a {
  background-color: transparent;
}

.horizontal-scrollable {
  overflow-x: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.justify-content-center {
  justify-content: center;
}

.title-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* CCTV */
#cctvLocWrap {
  display: flex;
  flex-direction: row;
}

.cctv-link-wrap {
  /* display: inline-flex; */
  display: none;
  align-items: center;
}

.cctv-link-wrap::before {
  display: inline-block;
  vertical-align: top;
  width: 1px;
  height: 16px;
  margin: 2px 8px 2px 8px;
  background-color: #8c8c8c;
  content: '';
}

.cctv-link {
  display: inline-flex;
  align-items: center;
}

.cctv-link span {
  font-size: 13px;
  font-weight: 600;
  color: var(--main-color-d1);
  line-height: 20px;
  margin: 0 4px;
}

.cctv-link .cctv-icon {
  width: 20px;
  height: 20px;
}

.cctv-link .right-arrow-icon {
  width: 10px;
  height: 10px;
}

#rainInfoDescription {
  justify-content: center;
  padding-bottom: 20px;
}
.rainInfoDescriptionContainer {
  display: flex;
  align-items: center;
}
.rainInfoDescriptionContainerMiddle {
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.rainInfoDescriptionCircle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
#rainCircle {
  background-color: #27a7c6;
}
#snowCircle {
  background-color: #70c9fc;
}
#mixCircle {
  background-color: #e280e6;
}
.rainDescriptionContents {
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--main-color-d4);
}

.card:first-child > .title-wrap {
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.open-more-btn {
  margin-right: 14px;
  padding: 0 16px;
}

.info-more-btn2 {
  font-size: 13px;
  min-width: 100px;
  height: 30px;
  line-height: 30px;
}

.place-name {
  text-align: center;
  font-size: 24px;
  font-weight: var(--weight-bold);
}

#currData .card {
  padding-bottom: 7px;
}

#currData .flex-between {
  align-items: center;
}

.season-temp {
  font-size: 67px;
  font-weight: var(--weight-bold);
  color: var(--color-black);
  letter-spacing: -2px;
  line-height: 80px;
}

.sunIcon {
  filter: brightness(0) saturate(100%) invert(0%) sepia(20%);
}

.weather-detail-wrap {
  padding-bottom: 20px;
  margin: 0 -10px 13px;
}

.swiper-card .swiper-container {
  padding: 0 20px;
}

.list-item {
  /* padding-right: 20px; */
  flex-shrink: 0;
  box-sizing: border-box;
}

.list-item:last-child {
  padding-right: 0;
}

.list-item-slide-img {
  height: 166px;
  border-radius: var(--border-radius-small);
  object-fit: cover;
}

.list-item a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.list-item.sns a {
  display: flex;
}

.list-item.topic a::before,
.list-item.sns a::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-small);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 42%, #000000 120%);
  margin-bottom: -1px;
}

.list-item .list-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 20px);
}

.list-item .list-info p {
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-white);
  /* text-shadow: 0 -1px 0 rgb(0 0 0 / 70%); */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.list-item.topic .cp-wrap {
  display: flex;
  align-items: center;
}

.list-item.topic .cp-logo {
  height: 18px;
  object-fit: contain;
  border-radius: 100%;
}

.list-item.topic .list-info .cp-title {
  font-size: 13px;
  margin-left: 5px;
}

.list-item.topic .list-info .title {
  margin-top: 3px;
}

.list-item.sns .list-info p:first-of-type {
  font-size: 13px;
}

#cardNewsContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background-color: var(--card-color);
  border-radius: var(--border-radius-medium);
  padding: 15px;
  margin-top: 5px;
}

#cardNewsContainer > li {
  width: 50%;
  padding: 5px;
}

.list-item .list-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-small);
  max-height: 204px;
}

.list-item .swiper-slide {
  flex-shrink: 0;
  box-sizing: border-box;
}

.swiper-slide-img {
  height: 166px;
  border-radius: var(--border-radius-small);
}

.align-items-center {
  align-items: center;
}

.detail-info-wrap {
  cursor: pointer;
}

.detail-info-wrap.top {
  margin-top: 16px;
}

.flex-column {
  flex-direction: column;
}

.d-flex .flex-column {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 3px;
}

.swiper-container {
  overflow: hidden;
}

.weather-detail-info-wrap:first-of-type {
  border-bottom: 1px solid;
  border-color: var(--border-color);
  padding-bottom: 5px;
}

.weather-detail-info-wrap:last-of-type {
  padding-top: 15px;
}

.today-story {
  display: none !important;
}

/* 팝업창 */
body.remove-scroll {
  overflow: hidden;
}

.header-container-wrap.up-to-top {
  position: fixed;
  top: 0;
}

.seasonPopup {
  display: none;
}

.seasonPopup.on {
  position: fixed;
  top: 60px;
  left: 0;
  display: block;
  width: 767px;
  height: calc(100% - 60px);
  background-color: var(--background-color);
  padding: 0px 20px 20px 20px;
  margin: 0 calc((100vw - 767px) / 2);
  z-index: 50;
  display: flex;
  justify-content: center;
}

.seasonPopup.on .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: calc(100vh - 130px); */
  /* height: calc(100vh - 90px); */
  /* height: 100%; */
  overflow: hidden;
  /* padding-bottom: 0; */
  margin: 0;
  width: 100%;
  max-width: 1280px;
}

/* .season-close-wrap {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
} */

.seasonPopup .tab-wrap {
  padding-top: 70px;
  overflow: hidden;
}

.seasonPopup .tab-wrap .tab-btn {
  width: 50%;
  float: left;
  text-align: center;
  color: var(--color-white);
  background: #a4b4c7;
}

.seasonPopup .tab-wrap .tab-btn.on span {
  background: #006fe8;
}

.seasonPopup .tab-wrap .tab-btn span {
  display: block;
  padding: 10px 0;
  font-size: 14px;
}

.seasonPopup .popup-card .card-top {
  width: 100%;
  /* max-width: 800px; */
}

.seasonPopup .popup-card .card-top > div {
  display: flex;
  justify-content: space-between;
  /* margin: 0 auto; */
  align-items: center;
}

.seasonPopup .popup-card .card-top .season-title {
  font-size: 21px;
  font-weight: var(--weight-bold);
  color: var(--main-color-d1);
}

.seasonPopup .popup-card .card-top .season-close {
  width: 30px;
  height: 30px;
  object-fit: contain;
  cursor: pointer;
}
#findLocationPopUp {
  width: 100%;
  overflow: auto;
}

.seasonPopup .popup-card .card-middle {
  /* overflow: auto; */
  width: 100%;
  /* max-width: 800px; */
  /* border-bottom: 1px solid;
  border-color: var(--border-color); */
  /* padding: 16px 20px 20px; */
  /* margin: 0 -20px; */
}

.sidoNameList {
  padding: 16px 0;
  color: var(--main-color-d1);
}
#season-title-closeBtn-container {
  margin-bottom: 20px;
}

.sidoChoiceContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.arrow-img {
  width: 32px;
  height: 32px;
  transition: transform 0.7s ease-in-out;
  padding: 7px;
}

.themeList {
  display: none;
}

.seasonPopup .popup-card .card-bottom {
  margin: 0 -20px;
}

.seasonPopup .popup-card .card-piece:nth-child(3) {
  overflow: scroll;
}

.address-wrap {
  border-bottom: 1px solid var(--color-black);
  padding: 10px 0;
}

.addr-select-wrap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3px;
  max-width: 800px;
  margin: 0 auto;
}

.addr-select-wrap .sido-select {
  width: 100%;
  font-size: 14px;
  /* color: var(--color-d5-text); */
  color: #858585;
  line-height: 35px;
  text-align: center;
  border-radius: 18px;
  transition: all 0.2s ease-in-out;
}

.sido-select:hover {
  cursor: pointer;
}

.sido-select.active {
  font-weight: var(--weight-medium);
  color: var(--color-white);
  background-color: var(--button-color);
}

.addr-options-wrap {
  margin: 0 auto;
  max-width: 800px;
  /* display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3px; */
  /* max-height: 70vh; */
  height: 100%;
  overflow: auto;
  padding-bottom: 20px;
}

.options-kItemNm {
  cursor: pointer;
  width: 100%;
  /* height: 50px; */
  font-size: 14px;
  /* text-align: center; */
  /* line-height: 50px; */
  color: var(--main-color-d1);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid;
  border-color: var(--border-color);
  /* background-color: var(--color-l2); */
  /* padding: 0 10px; */
  padding: 13px 25px;
  overflow: hidden;
}

.options-kItemNm:hover {
  cursor: pointer;
}

.options-kItemNm:last-child {
  border: unset;
}

/* .options-kItemNm:nth-child(3n) {
  border-right: unset;
} */

/* .options-kItemNm:hover {
  border: 1px solid #006fe8;
  color: #006fe8;
} */

/* 전력양 시작 */
.power-card {
  display: flex;
  flex-direction: column;
  background-color: var(--card-color);
  border-radius: var(--border-radius-medium);
  padding: 30px 20px;
  margin-top: 5px;
  margin-bottom: 13px;
}

.risk-power-graph-box {
  display: flex;
  justify-content: center;
}

#electric-alert-graph-container {
  position: relative;
  width: 250px;
  margin-bottom: 20px;
}

#electric-alert-graph-arrow {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform-origin: 90% 50%;
  width: 30%;
}

#electric-alert-index {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 21px;
  font-weight: var(--weight-medium);
  color: var(--main-color-d1);
}

.risk-power-graph-contents-box {
  width: 100%;
}

.power-graph-contents-item-container {
  margin-bottom: 16px;
}

.power-graph-item-title-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.power-graph-item-title,
.power-graph-item-current {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--main-color-d1);
}

.power-graph-item-graph {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--select-color);
  border-radius: 20px;
}

.power-graph-item-current-graph {
  position: absolute;
  height: 100%;
  border-radius: 20px;
}

.power-graph-standard-contents {
  font-size: 13px;
  color: var(--color-d5-text);
}

#cardWord {
  display: none;
  font-size: 14px;
  color: var(--color-d5-text);
  text-align: center;
  word-break: keep-all;
  padding: 0 20px;
  margin-top: 16px;
}

.ad-wrap {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 10px;
}
/* 태블릿 모드 */
@media all and (min-width: 1024px) {
  #currData .card .card-bottom {
    display: flex;
    flex-wrap: wrap;
  }

  #currData .card .card-bottom > a {
    width: calc(50% - 18px);
  }

  #currData .card .card-bottom > a:nth-child(odd) {
    margin-right: 18px;
  }

  [dir='rtl'] #currData .card .card-bottom > a:nth-child(odd) {
    margin-right: 0;
    margin-left: 18px;
  }

  #currData .card .card-bottom > a:nth-child(even) {
    margin-left: 18px;
  }

  [dir='rtl'] #currData .card .card-bottom > a:nth-child(even) {
    margin-left: 0;
    margin-right: 18px;
  }

  #currData .card .card-bottom .detail-info-wrap {
    border-bottom: none;
    border-top: 1px solid var(--border-color);
  }

  .power-card {
    flex-direction: row;
  }

  #electric-alert-graph-container {
    margin-bottom: 0;
    margin-right: 36px;
  }

  .risk-power-graph-contents-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media all and (min-width: 768px) {
  .title-wrap {
    display: none;
  }

  #cur-weather-wrap .card {
    margin-top: 0;
  }

  .card:first-child > .title-wrap {
    display: flex;
  }

  .card:first-child > .title-wrap > .headline-wrap > #cctvLocWrap > .headline {
    padding-left: 0;
  }

  .card:first-child > .title-wrap > .headline-wrap > .sub-title {
    padding-left: 0;
  }

  .card:first-child > .title-wrap > .open-more-btn-wrap > .open-more-btn {
    margin-right: 0;
  }

  .seasonPopup.on {
    width: 100%;
    margin: 0;
    top: 134px;
    height: calc(100% - 134px);
    padding-top: 10px;
  }

  .weather-detail-wrap {
    margin: 0 0 13px;
  }

  .weather-detail-close {
    padding: 0;
    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
  }

  .weather-detail-close.active,
  .weather-detail-wrap .weekly-container {
    background-color: var(--card-color);
  }

  .weather-detail-wrap .weekly-container {
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
  }

  .detail-close {
    padding: 14px 20px;
  }
}

@media screen and (min-width: 950px) {
  .weather-detail-info-wrap:first-of-type {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .seasonPopup.on {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 300px) {
  /* .headline {
    padding-left: 10px;
  } */

  #currentTime.sub-title {
    padding-right: unset;
  }

  .open-more-btn {
    padding: 0 10px;
  }
}

@media (max-width: 281px) {
  .power-graph-item-title {
    font-size: 14px;
  }

  .power-graph-item-current {
    font-size: 12px;
  }

  .power-graph-standard-contents {
    font-size: 10px;
  }
}

@media (max-width: 1280px) {
  #mapleMap{
    scroll-margin-top: 80px;
  }
  #skiMap{
    scroll-margin-top: 80px;
  }
  #springMap{
    scroll-margin-top: 80px;
  }
  #summerMap{
    scroll-margin-top: 80px;
  }
}
@media (max-width: 767px) {
  #mapleMap {
    scroll-margin-top: 60px;
  }
  #springMap {
    scroll-margin-top: 60px;
  }
  #summerMap {
    scroll-margin-top: 60px;
  }
}
/* 다크모드 */
@media (prefers-color-scheme: dark) {
  .sunIcon {
    filter: invert(27%) sepia(0%) saturate(1%) hue-rotate(347deg) brightness(102%) contrast(87%);
  }

  .weather-detail-close.active,
  .weather-detail-wrap .weekly-container {
    background-color: var(--color-d1);
  }

  .weather-detail-info .weather-card,
  .weather-detail-info .weather-card-wrap .weather-card {
    background-color: var(--color-d3);
  }
}

@media (max-width: 768px) {
  .today-story {
    display: flex !important;
  }
}


.skimap-select-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: unset;
  font-size: 15px;
  font-weight: var(--weight-regular);
  color: var(--color-d5-text);
  letter-spacing: -0.3px;
  line-height: 36px;
  text-align: center;
  white-space: nowrap;
  border-radius: 18px;
  background-color: var(--main-color-l1);
  cursor: pointer;
  padding: 0 15px;
  max-width: 100%;
}

.skimap-select-text.active {
  background-color: var(--main-color-d1);
  font-weight: var(--weight-medium);
  color: var(--main-color-l1);
  letter-spacing: -0.5px;
  transition: all 0.2s ease-in-out;
}

.skimap-select-text:not(:last-child) {
  margin-right: 8px;
}

.ski_map_image_container_box{
  position: relative;
  margin-top: 20px;
}
#ski_map_location_item{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
}
#spring_map_location_item{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
}
.ski_item_btn{
  width: 30%;
  height: 4%;
  position: absolute;
  cursor: pointer;
}

#slope_item0{
  top: 30%;
  left: 5%;
  /* 뚝섬 한강공원 */
}
#slope_item1{
  top: 35%;
  left: 13%;
  width: 25%;
  /* 에버랜드 눈썰매장 */
}
#slope_item2{
  top: 39%;
  left: 10%;
  /* 곤지암 */
}
#slope_item3{
  top: 26%;
  left: 50%;
  /* 비발디 */
}
#slope_item4{
  top: 32%;
  left: 55%;
  width: 36%;
  /* 휘닉스평창 */
}
#slope_item5{
  top: 45%;
  left: 38%;
  /* 상록 */
}
#slope_item6{
  top: 50%;
  left: 34%;
  /* 알프스 */
}
#slope_item7{
  top: 61%;
  left: 19%;
  /* 덕유산 */
}
#slope_item8{
  top: 73%;
  left: 2%;
  /* 광주패밀리 */
}
#slope_item9{
  top: 70%;
  left: 40%;
  width: 20%;
  /* 백아산 */
}
#slope_item10{
  top: 81%;
  left: 18%;
  width: 24%;
  /* 에코힐즈 */
}
#slope_item11{
  top: 57%;
  left: 60%;
  width: 23%;
  /* 이월드 */
}
#slope_item12{
  top: 63%;
  left: 73%;
  width: 23%;
  /* 경주월드 */
}
#slope_item13{
  top: 70%;
  left: 67%;
  /* 에덴벨리 */
}
#slope_item14{
  top: 76%;
  left: 50%;
  /* 금오산랜드 */
}

#waterpark_item0{
  top: 25%;
  left: 13%;
  width: 20%;
  /* 웅진 */
}
#waterpark_item1{
  top: 30%;
  left: 1%;
  width: 27%;
  /* 파라다이스시티씨메르 */
}
#waterpark_item2{
  top: 34%;
  left: 25%;
  width: 15%;
  /* 하피랜드 */
}
#waterpark_item3{
  top: 31%;
  left: 45%;
  width: 18%;
  /* 이천테르메덴 */
}
#waterpark_item4{
  top: 25%;
  left: 45%;
  width: 18%;
  /* 오션월드 */
}
#waterpark_item5{
  top: 18%;
  left: 60%;
  width: 28%;
  /* 한화설악 */
}
#waterpark_item6{
  top: 29%;
  left: 70%;
  width: 28%;
  /* 쏠비치 */
}
#waterpark_item7{
  top: 40%;
  left: 40%;
  width: 16%;
  /* 아산스파비스 */
}
#waterpark_item8{
  top: 42%;
  left: 10%;
  width: 26%;
  /* 파라다이스스파도고 */
}
#waterpark_item9{
  top: 48%;
  left: 9%;
  width: 20%;
  height: 7%;
  /* 리솜 워터파크 */
}
#waterpark_item10{
  top: 41%;
  left: 60%;
  width: 28%;
  /* 소노문 단양 */
}
#waterpark_item11{
  top: 62%;
  left: 2%;
  width: 28%;
  /* 소노벨 변산 */
}
#waterpark_item12{
  top: 61%;
  left: 40%;
  width: 20%;
  /* 진안 홍삼스파 */
}
#waterpark_item13{
  top: 71%;
  left: 16%;
  width: 22%;
  /* 금호 화순 */
}
#waterpark_item14{
  top: 36%;
  left: 70%;
  width: 25%;
  /* 덕구온천 */
}
#waterpark_item15{
  top: 64%;
  left: 70%;
  width: 28%;
  /* 울산대공원 */
}
#waterpark_item16{
  top: 74%;
  left: 60%;
  width: 26%;
  height: 7%;
  /* 클럽디오아시스 */
}
#waterpark_item17{
  top: 91%;
  left: 5%;
  width: 20%;
  /* 산방산 */
}
#ski_item0{
  top : 22%;
  left: 11%;
  width: 25%;
  height: 7%;
  /* 엘리시안 */
}
#ski_item1{
  top : 20%;
  left: 69%;
  width: 25%;
  height: 7%;
  /* 알펜시아 */
}
#ski_item2{
  top : 32%;
  left: 2%;
  width: 25%;
  height: 7%;
  /* 비발디 */
}
#ski_item3{
  top : 30%;
  left: 73%;
  width: 25%;
  height: 7%;
  /* 용평 */
}
#ski_item4{
  top : 40%;
  left: 2%;
  width: 25%;
  height: 7%;
  /* 오크 */
}
#ski_item5{
  top : 49%;
  left: 2%;
  width: 25%;
  height: 7%;
  /* 곤지암 */
}
#ski_item6{
  top : 47%;
  left: 74%;
  width: 25%;
  height: 7%;
  /* 휘닉스 */
}
#ski_item7{
  top : 58%;
  left: 2%;
  width: 25%;
  height: 7%;
  /* 지산 */
}
#ski_item8{
  top : 59%;
  left: 74%;
  width: 25%;
  height: 7%;
  /* 하이원 */
}
#ski_item9{
  top : 70%;
  left: 74%;
  width: 25%;
  height: 7%;
  /* 오투 */
}
#ski_item10{
  top : 81%;
  left: 68%;
  width: 25%;
  height: 7%;
  /* 웰리 */
}
#ski_item11{
  top : 84%;
  left: 40%;
  width: 25%;
  height: 7%;
  /* 에덴 */
}
#ski_item12{
  top : 84%;
  left: 4%;
  width: 25%;
  height: 7%;
  /* 덕유 */
}
#festival_item0{
  top: 19%;
  left: 9%;
  width: 35%;
}
#festival_item1{
  top: 20%;
    left: 60%;
    width: 35%;
}
#festival_item2{
  top: 26%;
    left: 3%;
}
#festival_item3{
  top: 25%;
    left: 70%;
    width: 25%;
}
#festival_item4{
  top: 31%;
    left: 29%;
    width: 20%;
}
#festival_item5{
  top: 30%;
    left: 65%;
    width: 25%;
}
#festival_item6{
  top: 36%;
    left: 16%;
}
#festival_item7{
  top: 42%;
    left: 13%;
}
#festival_item8{
  top: 47%;
  left: 3%;
  width: 36%;
}
#festival_item9{
  top: 44%;
    left: 67%;
}
#festival_item10{
  top: 49%;
    left: 66%;
}
#festival_item11{
  top: 63%;
    left: 9%;
    width: 38%;
}
#festival_item12{
  top: 69%;
    left: 72%;
    width: 23%;
}
#festival_item13{
  top: 87%;
  left: 35%;
  width: 25%;
}
#festival_item14{
  top: 93%;
    left: 30%;
    width: 45%;
}

.spring_item_btn{
  width: 23%;
  height: 7%;
  position: absolute;
  cursor: pointer;
}

#spring_map_item0{
  top: 21%;
  left: 8%;
}
#spring_map_item1{
  top: 25%;
  left: 43%;
  width: 29%;
  height: 9%;
}
#spring_map_item2{
  top: 12%;
  left: 14%;
}
#spring_map_item3{
  top: 15%;
  left: 58%;
}
#spring_map_item4{
  top: 40%;
  left: 2%;
}
#spring_map_item5{
  top: 44%;
  left: 43%;
  width: 34%;
}
#spring_map_item6{
  top: 60%;
  left: 15%;
}
#spring_map_item7{
  top: 69%;
  left: 2%;
  width: 20%;
}
#spring_map_item8{
  top: 78%;
  left: 3%;
  width: 20%;
}
#spring_map_item9{
  top: 53%;
    left: 60%;
    width: 36%;
}
#spring_map_item10{
  top: 62%;
  left: 63%;
  width: 16%;
}
#spring_map_item11{
  top: 72%;
  left: 48%;
  width: 29%;
}
#spring_map_item12{
  top: 76%;
  left: 27%;
  width: 19%;
}

#spring_bike_item0{
  top: 15%;
    height: 4%;
    left: 2%;
    width: 27%;
}
#spring_bike_item1{
  height: 4%;
    top: 21%;
    left: 6%;
    width: 25%;
}
#spring_bike_item2{
  top: 19%;
  height: 4%;
  left: 44%;
}
#spring_bike_item3{
  height: 4%;
    top: 14%;
    left: 52%;
}
#spring_bike_item4{
  height: 4%;
    top: 9%;
    left: 66%;
}
#spring_bike_item5{
  height: 4%;
  top: 33%;
  left: 7%;
}
#spring_bike_item6{
  height: 4%;
    top: 38%;
    left: 18%;
    width: 20%;
}
#spring_bike_item7{
  height: 4%;
    top: 43%;
    left: 21%;
    width: 18%;
}
#spring_bike_item8{
  height: 4%;
    top: 49%;
    left: 16%;
    width: 25%;
}
#spring_bike_item9{
  height: 4%;
    top: 57%;
    left: 25%;
    width: 25%;
}
#spring_bike_item10{
  height: 4%;
    top: 65%;
    left: 8%;
}
#spring_bike_item11{
  height: 4%;
    top: 72%;
    left: 12%;
}
#spring_bike_item12{
  height: 4%;
    top: 40%;
    left: 70%;
}
#spring_bike_item13{
  height: 4%;
    left: 62%;
    top: 46%;
    width: 28%;
}
#spring_bike_item14{
  height: 4%;
    left: 58%;
    top: 57%;
}
#spring_bike_item15{
  height: 4%;
    left: 52%;
    top: 71%;
}
#spring_bike_item16{
  height: 4%;
    left: 32%;
    top: 85%;
}
#spring_bike_item17{
  height: 4%;
    top: 94%;
    left: 4%;
    width: 26%;
}
#spring_cherry_item{
  width: 100%;
  height: 100%;
  position: absolute;
}
#spring_cherry_item0{
  height: 7%;
  top: 27%;
  left: 8%;
  width: 28%;
  /* background: rgba(0,0,0,0.3); */
}
#spring_cherry_item1{
  height: 7%;
  top: 35%;
  left: 15%;
  width: 28%;
  /* background: rgba(0,0,0,0.3); */
}
#spring_cherry_item2{
    height: 7%;
    top: 28%;
    left: 55%;
    width: 22%;
    /* background: rgba(0,0,0,0.3); */
}
#spring_cherry_item3{
  height: 7%;
  top: 20%;
  left: 57%;
  width: 25%;
  /* background: rgba(0,0,0,0.3); */
}
#spring_cherry_item4{
  height: 7%;
  top: 71%;
  left: 11%;
  width: 24%;
  /* background: rgba(0,0,0,0.3); */
}
#spring_cherry_item5{
  height: 7%;
  top: 47.5%;
  left: 68.5%;
  width: 21%;
  /* background: rgba(0,0,0,0.3); */
}
#spring_cherry_item6{
  height: 7%;
  top: 62%;
  left: 54.5%;
  width: 23.5%;
  /* background: rgba(0,0,0,0.3); */
}
#spring_cherry_item7{
  height: 7%;
  top: 70%;
  left: 52%;
  width: 42.5%;
  /* background: rgba(0,0,0,0.3); */
}
#spring_cherry_item8{
  height: 7%;
  top: 89.5%;
  left: 28.5%;
  width: 30%;
  /* background: rgba(0,0,0,0.3); */
}

#summer_map_location_item{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
}
.summer_item_btn{
  width: 23%;
  height: 7%;
  position: absolute;
  cursor: pointer;
}
/* 한탄강 */
#summer_camping_item0{
  top: 17%;
  height: 5%;
  left: 2%;
  width: 35%;
}
/* 자라섬 */
#summer_camping_item1{
  top: 24%;
  height: 5%;
  left: 7%;
  width: 35%;
}
/* 홍천 */
#summer_camping_item2{
  top: 17%;
    height: 5%;
    left: 50%;
    width: 35%;
}
/* 계방산 */
#summer_camping_item3{
  top: 27%;
  height: 5%;
  left: 57%;
  width: 35%;
}
/* 어은돌 */
#summer_camping_item4{
  top: 36%;
  height: 5%;
  left: 25%;
  width: 35%;
}
/* 칠갑 */
#summer_camping_item5{
  top: 47%;
  height: 5%;
  left: 2%;
  width: 35%;
}
/* 청송 */
#summer_camping_item6{
  top: 41%;
  height: 5%;
  left: 62%;
  width: 35%;
}
/* 그린 */
#summer_camping_item7{
  top: 54%;
  height: 5%;
  left: 40%;
  width: 35%;
}
/* 압록 */
#summer_camping_item8{
  top: 70%;
  height: 5%;
  left: 2%;
  width: 37%;
}
/* 심천 */
#summer_camping_item9{
  top: 80%;
  height: 5%;
  left: 30%;
  width: 35%;
}
/* 황매 */
#summer_camping_item10{
  top: 67%;
  height: 5%;
  left: 55%;
  width: 35%;
}
/* 협재 */
#summer_camping_item11{
  top: 92%;
  height: 5%;
  left: 23%;
  width: 40%;
}
/* 왕산 */
#summer_surfing_item0{
  top: 31%;
  height: 4%;
  left: 32%;
  width: 20%;
}
/* 송지호 */
#summer_surfing_item1{
  top: 21%;
  height: 4%;
  left: 57%;
  width: 24%;
}
/* 죽도 */
#summer_surfing_item2{
  top: 27%;
  height: 4%;
  left: 64%;
  width: 20%;
}
/* 망상 */
#summer_surfing_item3{
  top: 35%;
  height: 4%;
  left: 68%;
  width: 20%;
}
/* 만리포 */
#summer_surfing_item4{
  top: 46%;
  height: 4%;
  left: 31%;
  width: 22%;
}
/* 부흥리 */
#summer_surfing_item5{
  top: 49%;
  height: 4%;
  left: 70%;
  width: 22%;
}
/* 구룡포 */
#summer_surfing_item6{
  top: 55%;
  height: 4%;
  left: 73%;
  width: 22%;
}
/* 격포 */
#summer_surfing_item7{
  top: 63%;
  height: 4%;
  left: 30%;
  width: 20%;
}
/* 송정 */
#summer_surfing_item8{
  top: 68%;
  height: 4%;
  left: 65%;
  width: 20%;
}
/* 남열 */
#summer_surfing_item9{
  top: 77%;
  height: 4%;
  left: 40%;
  width: 20%;
}
/* 협재 */
#summer_surfing_item10{
  top: 89%;
  height: 4%;
  left: 3%;
  width: 20%;
}
/* 월정리 */
#summer_surfing_item11{
  top: 86%;
  height: 4%;
  left: 32%;
  width: 20%;
}
/* 색달 */
#summer_surfing_item12{
  top: 91%;
  height: 4%;
  left: 30%;
  width: 20%;
}

#summer_bike_item0{
  top: 15%;
   height: 4%;
   left: 2%;
   width: 27%;
}
#summer_bike_item1{
 top: 22%;
 height: 4%;
 left: 4%;
 width: 27%;
}
#summer_bike_item2{
 top: 19%;
 height: 4%;
 left: 44%;
}
#summer_bike_item3{
 height: 4%;
   top: 14%;
   left: 50%;
}
#summer_bike_item4{
 height: 4%;
 top: 8%;
 left: 64%;
 width: 25%;
}
#summer_bike_item5{
 height: 4%;
 top: 33%;
 left: 4%;
}
#summer_bike_item6{
 height: 4%;
   top: 34%;
   left: 41%;
   width: 24%;
}
#summer_bike_item7{
 height: 4%;
   top: 42%;
   left: 20%;
   width: 18%;
}
#summer_bike_item8{
 height: 4%;
 top: 49%;
 left: 12%;
 width: 29%;
}
#summer_bike_item9{
 height: 4%;
   top: 57%;
   left: 25%;
   width: 25%;
}
#summer_bike_item10{
 height: 4%;
   top: 66%;
   left: 4%;
   width: 26%;
}
#summer_bike_item11{
 height: 4%;
 top: 72%;
 left: 8%;
 width: 27%;
}
#summer_bike_item12{
 height: 4%;
 top: 41%;
 left: 68%;
 width: 28%;
}
#summer_bike_item13{
 height: 4%;
 left: 62%;
 top: 47%;
 width: 32%;
}
#summer_bike_item14{
 height: 4%;
   left: 58%;
   top: 57%;
}
#summer_bike_item15{
 height: 4%;
 left: 52%;
 top: 73%;
 width: 27%;
}
#summer_bike_item16{
 height: 4%;
 left: 32%;
 top: 88%;
 width: 27%;
}
#summer_bike_item17{
 height: 4%;
 top: 94%;
 left: 5%;
 width: 32%;
}
/* 국화리 */
#summer_village_item0{
  top: 19%;
  height: 5%;
  left: 28%;
  width: 25%;
}
/* 수미 */
#summer_village_item1{
  top: 27%;
  height: 5%;
  left: 19%;
  width: 25%;
}
/* 고라데이 */
#summer_village_item2{
  top: 18%;
  height: 5%;
  left: 61%;
  width: 28%;
}
/* 어름치 */
#summer_village_item3{
  top: 24%;
  height: 5%;
  left: 66%;
  width: 25%;
}
/* 상황림 */
#summer_village_item4{
  top: 31%;
  height: 5%;
  left: 60%;
  width: 25%;
}
/* 칠갑산꽃 */
#summer_village_item5{
  top: 38%;
  height: 5%;
  left: 2%;
  width: 27%;
}
/* 알프스 */
#summer_village_item6{
  top: 45%;
  height: 5%;
  left: 10%;
  width: 25%;
}
/* 기대리 */
#summer_village_item7{
  top: 38%;
  height: 5%;
  left: 50%;
  width: 34%;
}
/* 밤원 */
#summer_village_item8{
  top: 45%;
  height: 5%;
  left: 56%;
  width: 24%;
}
/* 고지 */
#summer_village_item9{
  top: 56%;
  height: 5%;
  left: 56%;
  width: 40%;
}
/* 경천애인 */
#summer_village_item10{
  top: 59%;
  height: 5%;
  left: 10%;
  width: 25%;
}
/* 명하쪽 */
#summer_village_item11{
  top: 74%;
  height: 5%;
  left: 4%;
  width: 25%;
}
/* 아홉굿 */
#summer_village_item12{
  top: 92%;
  height: 5%;
  left: 26%;
  width: 25%;
}
/* 을왕리 */
#summer_beach_item0{
  top: 20%;
    left: 9%;
    width: 27%;
}
/* 속초 */
#summer_beach_item1{
  top: 14%;
  left: 45%;
}
/* 경포 */
#summer_beach_item2{
  top: 20%;
  left: 72%;
}
/* 망상 */
#summer_beach_item3{
  top: 29%;
  left: 72%;
}
/* 만리포 */
#summer_beach_item4{
  top: 32%;
  left: 25%;
  width: 27%;
}
/* 대천 */
#summer_beach_item5{
  top: 41%;
  left: 30%;
}
/* 선유도 */
#summer_beach_item6{
  top: 50%;
  left: 36%;
  width: 26%;
}
/* 변산 */
#summer_beach_item7{
  top: 57%;
  left: 12%;
}
/* 격포 */
#summer_beach_item8{
  top: 66%;
  left: 10%;
}
/* 영일대 */
#summer_beach_item9{
  top: 44%;
  left: 72%;
}
/* 구룡 */
#summer_beach_item10{
  top: 54%;
  left: 70%;
}
/* 송정 */
#summer_beach_item11{
  top: 64%;
  left: 76%;
  width: 19%;
}
/* 해운대 */
#summer_beach_item12{
  top: 65%;
  left: 48%;
}
/* 광안리 */
#summer_beach_item13{
  top: 74%;
  left: 70%;
  width: 26%;
}
/* 김녕 */
#summer_beach_item14{
  top: 86%;
  left: 33%;
}
/* 협재 */
#summer_beach_item15{
  top: 89%;
  left: 2%;
}