@charset "UTF-8";

/* layout */
.overflow-h {
  overflow: hidden;
}
.container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.container > .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  height: 100%;
}
.column {
  flex-direction: column;
}
.flex-auto {
  flex: auto !important;
}
.flex {
  display: flex;
}
.flex1 {
  flex: 1;
}
.gap8 {
  gap: 8px;
}
body{
	margin: 0;
	height: 100%;
	
}

a, a*{
	text-decoration:none;
}

@media (max-width: 767px) {
  body {
    overflow: hidden;
  }
  .container > .content {
    top: 60px;
    min-height: calc(100% - 60px);
  }
  
  #panel .top {
  	margin-top: 4%;
  }
}

/* map */
.map {
  flex: 1;
  position: relative;
}

/* aside */
.aside {
  position: relative;
  padding: 12px;
  width: 94px;
  /* width: 70px; */
  min-height: fit-content;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
  /* z-index: 4; */
  z-index: 999;
}
.container.open .aside {
  position: relative;
  margin: 0;
  padding: 20px;
  width: 330px;
  height: 100%;
}
.open-menu-btn {
  display: none;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background: url(../img/new/menu-button.png) center no-repeat;
  background-size: 30px auto;
}
.aside-btn {
  text-indent: -9999px;
  position: absolute;
  top: 21px;
  right: 0;
  width: 20px;
  height: 50px;
  border-radius: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow: hidden;
  background: #246beb;
  z-index: 3;
  border: none;
}
.aside-btn:before {
  content: "";
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  width: 16px;
  height: 16px;
  background: url(../img/new/aside-arrow.png) center no-repeat;
  background-size: 16px auto;
}
.nav-wrap .aside-btn {
  display: none;
}
.nav-wrap nav ul{
	list-style :none;
	padding: 0;
	
}

.nav-wrap nav ul li a{
	text-decoration: none;
	
}
/*요소 전체 적용 스타일 start*/
/* div{
	border: none !important;
}
button{
	border: none !important;
} */
/*요소 전체 적용 스타일 end*/

div ul li{
	list-style: none;
}

.container.open .aside .aside-btn {
  top: 36px;
}
.container.open .aside .aside-btn:before {
  transform: translate(-50%, -50%);
}
.aside h1 {
  display: block;
  padding: 13px 4px 25px;
}
.container.open .aside h1 {
  display: inline-block;
  margin-left: -4px;
  padding: 11px 0;
}
.aside h1 a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
}
.aside h1 img {
  width: 48px;
}
.container.open .aside h1 img {
  width: 54px;
}
.aside h1 .text {
  display: none;
}
.container.open .aside h1 .text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aside h1 .text b {
  font-size: 28px;
  font-weight: 700;
}
.aside h1 .text span {
  font-size: 16px;
  letter-spacing: -0.16px;
}
.search-btn {
  display: none;
  width: 30px;
  height: 30px;
  background: url(../img/new/search-icon.png) center no-repeat;
  background-size: 30px auto;
}
.aside .bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.search-box {
  display: none;
  padding: 21px 0 20px;
  position: relative;
  background: #fff;
}
.search-box:before {
  content: "";
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../img/new/search-icon.png) center no-repeat;
  background-size: 30px auto;
}
.search-box.on:before {
  background: url(../img/new/search-icon-focus.png) center no-repeat;
  background-size: 30px auto;
}
.search-box input {
  width: 100%;
  height: 48px;
  padding: 16px 38px 16px 47px;
  font-size: 15px;
  line-height: 150%; /* 22.5px */
  border-radius: 12px;
  border: 1px solid var(--gray-gray-40, #c6c6c6);
  overflow: hidden;
}
.search-box .search-clear {
  display: none;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../img/new/search-clear.png) center no-repeat;
  background-size: 20px auto;
}
.search-box.on .search-clear {
  display: inline-block;
}
.search-box .prev {
  display: none;
}

#infoNameSearch {
  ime-mode:active;
  width: 100%;
  height: 48px;
  padding: 16px 38px 16px 47px;
  font-size: 15px;
  line-height: 150%; /* 22.5px */
  border-radius: 12px;
  border: 1px solid var(--gray-gray-40, #c6c6c6);
  overflow: hidden;
}

.search-view {
  position: relative;
}
.search-on .search-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-list-box {
  display: none;
  flex: 1;
  background: #fff;
}
.search-on .search-list-box {
  display: block;
  overflow: hidden;
  overflow-y: auto;
}
.search-on .search-list-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.search-on .search-list-box::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 3px;
}
.search-list-box .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}
.search-list-box .top span {
  color: #000;
  font-size: 17px;
  line-height: 26.5px;
}
.all-clear {
  padding: 0 2px;
  color: var(--primary-primary-60, #1d56bc);
  font-size: 17px;
  line-height: 32px;
  background: none;
}
.search-list li {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--gray-gray-20, #e4e4e4);
}
.result-search-list .search-list li {
  height: auto;
}
.search-list-box li:hover {
  background: var(--gray-gray-5, #f8f8f8);
}
.search-list li a {
  padding: 12px 0 11px;
  flex: 1;
  color: var(--gray-gray-90, #1d1d1d);
  font-size: 15px;
  line-height: 150%; /* 25.5px */
}
.recent-search-list .search-list li a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.search-list li .clear {
  margin-right: -7px;
  width: 30px;
  height: 30px;
  background: url(../img/new/search-list-clear.png) center no-repeat;
  background-size: 16px auto;
}
.search-list-box.on .recent-search-list {
  display: none;
}
.result-search-list {
  display: none;
}
.search-list-box.on .result-search-list {
  display: block;
}
.aside.search-on .search-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  background: var(--gray-gray-10, #f0f0f0);
  z-index: 4;
}
.aside.search-on .search-box {
  padding: 13px 10px;
  height: 60px;

  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid var(--gray-gray-10, #f0f0f0);
}
.container.open .aside .search-box {
  display: block;
}
.container.open .aside.search-on .search-box {
  display: flex;
}
.aside.search-on .search-box .prev {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../img/new/prev-arrow.png) center no-repeat;
  background-size: 30px auto;
}
.aside.search-on .search-box:before {
  left: auto;
  right: 10px;
  background: url(../img/new/search-icon-m.png) center no-repeat;
  background-size: 30px auto;
}
.search-box.on:before {
  display: none;
}
.aside.search-on .search-box input {
  flex: 1;
  height: 30px;
  border: none;
  font-size: 17px;
  padding: 0 36px 0 0;
}
.search-box .search-clear {
  display: none;
}
.search-box.on .search-clear {
  right: 10px;
  display: inline-block;
}
.aside.search-on .search-list-box {
  display: block;
  padding: 0 0 16px;
}
.search-list li {
  height: 56px;
  padding: 0 13px 0 20px;
}
.search-list li a {
  padding: 12px 0;
  font-size: 17px;
}
.search-list li .clear {
  margin-right: 0;
}
.result-search-list .search-list li {
  padding: 0 20px;
}
.result-search-list .search-list li a {
  padding: 14.75px 0;
}
.search-on .nav-wrap {
  display: none;
}
.aside .nav-wrap {
  position: relative;
  flex: 1;
}
.container.open .aside.search-on {
  min-height: calc(var(--vh, 1vh) * 100);
  height: 100%;
}
.aside nav {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
.aside nav > ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aside nav > ul > li a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 11.5px;
  height: 70px;
  font-size: 13px;
  font-weight: 600;
  line-height: 150%; /* 19.5px */
  border-radius: 12px;
  border: 1px solid var(--gray-gray-20, #e4e4e4);
}
.container.open .aside nav > ul > li a {
  padding: 10px 15px;
  flex-direction: row;
  height: 56px;
  font-size: 19px;
  gap: 16px;
}
.aside nav > ul > li a:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
}
.aside nav > ul > li:nth-child(1) a:before {
  background-image: url(../img/new/nav-icon1.png);
}
.aside nav > ul > li:nth-child(2) a:before {
  background-image: url(../img/new/nav-icon2.png);
}
.aside nav > ul > li:nth-child(3) a:before {
  background-image: url(../img/new/nav-icon3.png);
}
.aside nav > ul > li:nth-child(4) a:before {
  background-image: url(../img/new/nav-icon4.png);
}
.aside nav > ul > li:nth-child(5) a:before {
  background-image: url(../img/new/nav-icon5.png);
}
.aside nav > ul > li:nth-child(6) a:before {
  background-image: url(../img/new/nav-icon6.png);
}
.aside nav > ul > li:nth-child(7) a:before {
  background-image: url(../img/new/nav-icon7.png);
}
.aside nav > ul > li:nth-child(8) a:before {
  background-image: url(../img/new/nav-icon8.png);
}
.aside nav > ul > li:nth-child(1) a:hover:before,
.aside nav > ul > li:nth-child(1).active a:before {
  background-image: url(../img/new/nav-icon1-h.png);
}
.aside nav > ul > li:nth-child(2) a:hover:before,
.aside nav > ul > li:nth-child(2).active a:before {
  background-image: url(../img/new/nav-icon2-h.png);
}
.aside nav > ul > li:nth-child(3) a:hover:before,
.aside nav > ul > li:nth-child(3).active a:before {
  background-image: url(../img/new/nav-icon3-h.png);
}
.aside nav > ul > li:nth-child(4) a:hover:before,
.aside nav > ul > li:nth-child(4).active a:before {
  background-image: url(../img/new/nav-icon4-h.png);
}
.aside nav > ul > li:nth-child(5) a:hover:before,
.aside nav > ul > li:nth-child(5).active a:before {
  background-image: url(../img/new/nav-icon5-h.png);
}
.aside nav > ul > li:nth-child(6) a:hover:before,
.aside nav > ul > li:nth-child(6).active a:before {
  background-image: url(../img/new/nav-icon6-h.png);
}
.aside nav > ul > li:nth-child(7) a:hover:before,
.aside nav > ul > li:nth-child(7).active a:before {
  background-image: url(../img/new/nav-icon7-h.png);
}
.aside nav > ul > li:nth-child(8) a:hover:before,
.aside nav > ul > li:nth-child(8).active a:before {
  background-image: url(../img/new/nav-icon8-h.png);
}
.container.open .aside nav > ul > li a:after {
  content: "";
  position: absolute;
  display: inline-block;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: url(../img/new/nav-arrow.png) center no-repeat;
  background-size: 24px auto;
}
.aside nav > ul > li a:hover:after,
.aside nav > ul > li.active a:after {
  background: url(../img/new/nav-arrow-h.png) center no-repeat !important;
  background-size: 24px auto !important;
}
.aside nav > ul > li a:hover,
.aside nav > ul > li.active a {
  color: #fff;
  background: #246beb;
  border-color: #246beb;
  box-shadow: 0px 4px 5px 0px rgba(36, 107, 235, 0.2);
}
.related-site {
  position: relative;
}
.container.open .aside .related-site {
  width: 100%;
}
.related-site button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  width: 70px;
  height: 70px;
  font-size: 0;
  line-height: 0;
  background: none;
  border-radius: 12px;
  border: 1px solid var(--gray-gray-20, #e4e4e4);
}
.related-site.on button,
.related-site button:hover {
  border: 1px solid var(--gray-gray-20, #246beb);
  background: var(--primary-primary-50, #246beb);
}
.container.open .aside .related-site button {
  display: none;
}
.related-site button:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(../img/new/related-site-icon.png) center no-repeat;
  background-size: 22px auto;
}
.related-site.on button:before,
.related-site button:hover:before {
  background: url(../img/new/related-site-icon-h.png) center no-repeat;
  background-size: 22px auto;
}
.related-site button span {
  padding-top: 9px;
  color: var(--gray-gray-90, #1d1d1d);
  font-size: 13px;
  font-weight: 600;
  line-height: 19.5px;
}
.related-site.on button span,
.related-site button:hover span {
  color: #fff;
}
.related-site ul {
  display: none;
  position: absolute;
  bottom: 0;
  left: 94px;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  gap: 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}
.container.open .aside .related-site ul {
  display: flex;
  position: relative;
  bottom: auto;
  left: auto;
  width: 100%;
  padding: 0;
  gap: 8px;
  box-shadow: none;
}
.related-site.on ul {
  display: flex;
}
.related-site ul li {
  position: relative;
}
.related-site ul li:last-child:before {
  display: none;
}
.related-site ul li:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -8.5px;
  transform: translateY(-50%);
  display: inline-block;
  width: 1px;
  height: 48px;
  background: #e4e4e4;
}
.related-site ul a {
  display: flex;
  width: 90px;
  padding-top: 6px;
  height: 94px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.container.open .aside .related-site ul li {
  flex: 1;
}
.container.open .aside .related-site ul li:before {
  display: none;
}
.container.open .aside .related-site ul a {
  width: auto;
  border-radius: 12px;
  border: 1px solid var(--gray-gray-20, #e4e4e4);
}
.related-site ul a:before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(../img/new/site-icon.png) center no-repeat;
  background-size: 32px auto;
}
.related-site ul a span {
  color: #000;
  font-size: 12px;
  line-height: 150%; /* 19.5px */
  word-break: break-all;
}
@media (max-width: 767px) {
  .aside,
  .container.open .aside {
    position: absolute;
    top: 0;
    left: 0;
    min-height: auto;
    box-sizing: unset;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: none;
  }
  .container.open .aside {
    height: 100%;
  }
  header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 10px;
    background: #fff;
  }
  .open-menu-btn {
    display: block;
  }
  .aside .nav-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: min(330px, calc(100% - 53px));
    height: calc(var(--vh, 1vh) * 100);
    z-index: 4;
    transform: translateX(calc(-100% - 53px));
  }
  .transition .aside .nav-wrap {
    transition: 0.2s all ease-in-out;
  }
  .container.open .nav-wrap {
    transform: translateX(0);
  }
  
  @media (max-width: 767px) {
	.container.open .nav-wrap {
    transform: translateX(0);
    /* top:4em; */
    height: 100vh;
  	}
}
  
  .aside nav {
    gap: 40px;
    padding: 20px;
    background: #fff;
    z-index: 3;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .aside nav:-webkit-scrollbar {
    display: none;
  }
  .container.open .aside nav .close-menu-btn {
    display: inline-block;
  }
  .search-btn {
    display: inline-block;
  }
  .container.open .aside h1,
  .aside h1 {
    padding: 0;
    margin: 0;
  }
  .aside h1 a {
    gap: 12px;
  }
  .container.open .aside h1 img,
  .aside h1 img {
    width: 35px;
  }
  .container.open .aside h1 .text,
  .aside h1 .text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .container.open .aside h1 .text b,
  .aside h1 .text b {
    font-size: 21px;
  }
  .container.open .aside h1 .text span,
  .aside h1 .text span {
    font-size: 12px;
    letter-spacing: -0.12px;
  }
  .aside > .aside-btn {
    display: none;
  }
  .nav-wrap .aside-btn {
    display: inline-block;
    top: 13px !important;
    right: auto !important;
    left: calc(100% + 16px) !important;
    width: 30px;
    height: 30px;
    border-radius: 0 !important;
    background: url(../img/new/nav-close.png) center no-repeat;
    background-size: 24px auto;
  }
  .aside-btn:before {
    display: none;
  }
  .aside nav > ul > li a {
    padding: 10px 15px;
    flex-direction: row;
    height: 56px;
    font-size: 19px;
    gap: 16px;
  }
  .aside nav > ul > li a:after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url(../img/new/nav-arrow.png) center no-repeat;
    background-size: 24px auto;
  }
  .search-view {
    display: none;
  }
  .search-view.on {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    background: var(--gray-gray-10, #f0f0f0);
    z-index: 5;
  }
  .search-box {
    padding: 13px 10px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border-bottom: 1px solid var(--gray-gray-10, #f0f0f0);
  }
  .search-box:before {
    left: auto;
    right: 10px;
    background: url(../img/new/search-icon-m.png) center no-repeat;
    background-size: 30px auto;
  }
  .search-box.on:before {
    display: none;
  }
  .search-box .prev {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/new/prev-arrow.png) center no-repeat;
    background-size: 30px auto;
  }
  .search-box input {
    flex: 1;
    height: 30px;
    border: none;
    font-size: 17px;
    padding: 0 36px 0 0;
  }
  .search-list-box {
    display: block;
  }
  .search-box.on .search-clear {
    right: 10px;
    display: inline-block;
  }
}

/* toolbar */
.top-box {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.btn-box {
  position: relative;
}
.btn-box > button {
  position: relative;
  display: flex;
  width: 70px;
  height: 70px;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--gray-gray-40, #c6c6c6);
  background: var(--gray-gray-0, #fff);
  overflow: hidden;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}
.btn-box.on button {
  border: 1.5px solid var(--primary-primary-50, #246beb);
}
.btn-box > button:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 46px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 46px;
}
.btn-box.step1 > button:before {
  background-image: url(../img/new/map1.jpg);
}
.btn-box.step2 > button:before {
  background-image: url(../img/new/map2.jpg);
}

.btn-box.step3 > button:before {
  background-image: url(../img/new/map2.jpg);
}
.btn-box > button span {
  color: var(--gray-gray-90, #1d1d1d);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
}
.year-list {
  display: none;
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  width: 120px;
  padding: 4px 0px;
  flex-direction: column;
  border-radius: 10px;
  background: var(--gray-gray-0, #fff);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.year-list.on {
  display: inline-flex;
}
.year-list li input {
  display: none;
}
.year-list li label {
  padding: 0 12px;
  display: block;
  color: var(--gray-gray-90, #1d1d1d);
  font-size: 15px;
  line-height: 40px;
  cursor: pointer;
}
.year-list li label:hover {
  background: var(--gray-gray-10, #f0f0f0);
}
.year-list li input:checked + label {
  color: var(--primary-primary-50, #246beb);
  font-weight: 600;
  background: var(--primary-primary-5, #eff5ff);
}
.tool-box {
  position: absolute;
  right: 15px;
  top: 145px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 50px;
  z-index: 1;
}
.bundle {
  background: #fff;
  border: 1px solid var(--gray-gray-20, #e4e4e4);
  border-radius: 10px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  /* width: 56px; */
  padding: 0;
}
.bundle li {
  position: relative;
}
.bundle li button{
	border: none;
}

.bundle li > button {
  position: relative;
  display: flex;
  width: 56px;
  height: 56px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--gray-gray-20, #e4e4e4);
  background: none;
  background: var(--gray-gray-0, #fff);
}
.tool-box > .bundle > li:first-child > button {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.tool-box > .bundle > li:last-child > button {
  border-bottom: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.bundle:not(.type2) > li.on:not(.not) > button:hover,
.bundle:not(.type2) > li.on:not(.not) > button {
  background: var(--primary-primary-50, #246beb);
}
.tool-box > .bundle > li > button:hover {
  background: #e4e4e4;
}
.bundle:not(.not).step1 > li > button:hover {
  background: var(--gray-gray-10, #f0f0f0);
}
.bundle li > button:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 20px auto;
}
.bundle li.active:not(.not) > button:before,
.bundle li.on:not(.not) > button:before {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.bundle li.step1 > button:before {
  background-image: url(../img/new/toolbar-icon1.png);
}
.bundle li.step1-1 > button:before {
  background-image: url(../img/new/toolbar-icon1-1.png);
}
.bundle li.step1-2 > button:before {
  background-image: url(../img/new/toolbar-icon1-2.png);
}
.bundle li.step1-3 > button:before {
  background-image: url(../img/new/toolbar-icon1-3.png);
}
.bundle li.step1-4 > button:before {
  background-image: url(../img/new/toolbar-icon1-4.png);
}
.bundle li.step2 > button:before {
  background-image: url(../img/new/toolbar-icon2.png);
}
.bundle li.step3 > button:before {
  background-image: url(../img/new/toolbar-icon3.png);
}
.bundle li.step4 > button:before {
  background-image: url(../img/new/toolbar-icon4.png);
}
.bundle li.step5 > button:before {
  background-image: url(../img/new/toolbar-icon5.png);
}
.bundle li.step6 > button:before {
  background-image: url(../img/new/toolbar-icon6.png);
}
.bundle li.step7 > button:before {
  background-image: url(../img/new/toolbar-icon7.png);
}
.bundle li.step8 > button:before {
  background-image: url(../img/new/toolbar-icon8.png);
}
.bundle li.step9 > button:before {
  background-image: url(../img/new/toolbar-icon9.png);
}
.bundle li.step10 > button:before {
  background-image: url(../img/new/toolbar-icon10-1.png);
}
.bundle li.step10.on > button:before {
  background-image: url(../img/new/toolbar-icon10.png);
}
.bundle li.step11 > button:before {
  background-image: url(../img/new/toolbar-icon11.png);
}
.bundle li.step12 > button:before {
  background-image: url(../img/new/refresh.png);
}
.bundle li > button span {
  color: var(--gray-gray-90, #1d1d1d);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.bundle li > button a {
  color: var(--gray-gray-90, #1d1d1d);
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
  margin-top: 13%;
}
.bundle li.active:not(.not) > button span,
.bundle li.on:not(.not) > button span {
  color: #fff;
}
.bundle .bundle {
  display: none;
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  border: none;
}
.bundle > li.on .bundle {
  display: flex;  
}
.bundle .bundle button:not(.btn1) {
  border-bottom: none;
}
.tool-box > .bundle .bundle > li:first-child > button {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.tool-box > .bundle .bundle > li:last-child > button {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.bundle.type2 {
  flex-direction: column;
  padding: 4px 0;
}
.bundle.type22 {
  flex-direction: column;
  padding: 4px 0;
}
.bundle.type2 button:not(.btn1) {
  padding: 0 13.1px;
  width: 100%;
  height: 40px;
  flex-direction: row;
  justify-content: flex-start;
}
.tool-box > .bundle .bundle.type2 > li:first-child > button {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.tool-box > .bundle .bundle.type2 > li:last-child > button {
  border-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.bundle.type2 button:before {
  background-image: url(../img/new/check.png);
}
.bundle.type2 li.on > button {
  background: var(--primary-primary-5, #eff5ff);
}
.bundle.type2 li.on > button:before {
  background-image: url(../img/new/check-on.png);
  filter: none;
}
.bundle.type2 span {
  font-size: 15px;
  line-height: 150%; /* 22.5px */
  text-align: left;
}
.bundle.step2 {
  right: 0;
  top: calc(100% + 12px);
  /* width: 128px; */
}
.bundle.step22 {
  right: 0;
  top: calc(100% + 12px);
  /* width: 128px; */
}
.bundle.step66 {
  right: 0;
  top: calc(100% + 12px);
  /* width: 128px; */
}
.bundle.step2 li > button {
  cursor: default;
}
.bundle.step2 li > button:before {
  width: 22px;
  height: 22px;
  background-size: 22px auto;
}
.bundle.step2 li:nth-child(1) > button:before {
  background-image: url(../img/new/water1.png);
}
.bundle.step2 li:nth-child(2) > button:before {
  background-image: url(../img/new/water2.png);
}
.bundle.step2 li:nth-child(3) > button:before {
  background-image: url(../img/new/water3.png);
}
.bundle.step2 li:nth-child(4) > button:before {
  background-image: url(../img/new/water4.png);
}
.bundle.step2 li:nth-child(5) > button:before {
  background-image: url(../img/new/water5.png);
}
.bundle.step2 li:nth-child(6) > button:before {
  background-image: url(../img/new/water6.png);
}
.bundle.step2 li:nth-child(7) > button:before {
  background-image: url(../img/new/water7.png);
}
.bundle.step22 li:nth-child(1) > button:before {
  background-image: url(../img/new/land1.png);
}
.bundle.step22 li:nth-child(2) > button:before {
  background-image: url(../img/new/land2.png);
}
.bundle.step22 li:nth-child(3) > button:before {
  background-image: url(../img/new/land3.png);
}
.bundle.step22 li:nth-child(4) > button:before {
  background-image: url(../img/new/land4.png);
}
.bundle.step22 li:nth-child(5) > button:before {
  background-image: url(../img/new/land5.png);
}
.bundle.step22 li:nth-child(6) > button:before {
  background-image: url(../img/new/land6.png);
}
.bundle.step22 li:nth-child(7) > button:before {
  background-image: url(../img/new/land7.png);
}
.bundle.step22 li:nth-child(8) > button:before {
  background-image: url(../img/new/land8.png);
}
.bundle.step22 li:nth-child(9) > button:before {
  background-image: url(../img/new/land9.png);
}

.bundle.step222 li:nth-child(1) > button:before {
  background-image: url(../images/symbol/chicken.png);
}
.bundle.step222 li:nth-child(2) > button:before {
  background-image: url(../images/symbol/cow.png);
}
.bundle.step222 li:nth-child(3) > button:before {
  background-image: url(../images/symbol/deer.png);
}
.bundle.step222 li:nth-child(4) > button:before {
  background-image: url(../images/symbol/duck.png);
}
.bundle.step222 li:nth-child(5) > button:before {
  background-image: url(../images/symbol/milkcow.png);
}
.bundle.step222 li:nth-child(6) > button:before {
  background-image: url(../images/symbol/pig.png);
}
.bundle.step222 li:nth-child(7) > button:before {
  background-image: url(../images/symbol/goat.png);
}
.bundle.step222 li:nth-child(8) > button:before {
  background-image: url(../images/symbol/horse.png);
}
.bundle.step222 li:nth-child(9) > button:before {
  background-image: url(../images/symbol/dog.png);
}
.bundle.step222 li:nth-child(10) > button:before {
  background-image: url(../images/symbol/poultry.png);
}

.bundle.step66 li:nth-child(1) > button:before {
  background-image: url(../img/icon_exhaust.png);
}
.bundle.step66 li:nth-child(2) > button:before {
  background-image: url(../img/icon_pig.png);
}
.bundle.step66 li:nth-child(3) > button:before {
  background-image: url(../img/icon_farming.png);
}

.bundle.type2 li.on > button span {
  color: var(--primary-primary-50, #246beb);
  font-weight: 600;
}
.bundle.type2 li.on > button a {
  width:90px;
  color: var(--primary-primary-50, #246beb);
  font-weight: 600;
  margin-top: 13%;
}
.bundle.url {
  display: none;
  padding: 9px 16px 16px;
  gap: 13px;
  background: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
li.on .bundle.url {
  display: flex;
}
.bundle.url .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bundle.url .top span {
  position: relative;
  padding-top: 4px;
  color: var(--gray-gray-90, #1d1d1d);
  font-size: 17px;
  font-weight: 600;
  line-height: 150%; /* 25.5px */
  display: flex;
  align-items: center;
  gap: 8px;
}
.bundle.url .top span:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../img/new/url-icon.png) center no-repeat;
  background-size: 20px auto;
}
.bundle.url .top button {
  margin-right: -4px;
  width: 30px;
  height: 30px;
  background: url(../img/new/url-close.png) center no-repeat;
  background-size: 30px auto;
  top: -9px;
}
.input-box {
  display: flex;
  gap: 8px;
}
.input-box input {
  border: none;
  display: flex;
  width: 228px;
  height: 40px;
  padding: 0px 16px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  font-size: 15px;
  line-height: 150%;
  border-radius: 6px;
  border: 1px solid var(--gray-gray-40, #c6c6c6);
  background: var(--gray-gray-0, #fff);
}
/*공유하기 div*/
#shareUrlDiv {
  border: none;
  display: flex;
  width: 228px;
  /* height: 40px;
  padding: 0px 16px; */
  padding:7px 8px 7px 8px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  font-size: 15px;
  line-height: 150%;
  border-radius: 6px;
  border: 1px solid var(--gray-gray-40, #c6c6c6);
  background: var(--gray-gray-0, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.input-box input::-webkit-input-placeholder {
  color: var(--gray-gray-50, #8e8e8e);
}
.btn1 {
  display: flex;
  min-width: 50px;
  height: 40px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  border: 1px solid var(--primary-primary-50, #246beb);
  background: var(--primary-primary-5, #eff5ff);
}
.btn1 span {
  color: var(--primary-primary-60, #1d56bc);
  font-size: 15px;
  line-height: 150%; /* 22.5px */
  white-space: nowrap;
}
.transparency {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 24px;
  background: var(--gray-gray-0, #fff);
}
.transparency.vertical {
  width: 24px;
  height: 100px;
  border-radius: 6px;
}
.transparency .track {
  position: relative;
  width: 185px;
  height: 4px;
  background: var(--gray-gray-30, #d8d8d8);
  cursor: pointer;
}
.transparency.vertical .track {
  width: 4px;
  height: 76.471px;
}
.transparency .track span {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 20px;
  border-radius: 8px;
  background: var(--primary-primary-50, #246beb);
}
.transparency.vertical .track span {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 6px;
  border-radius: 6px;
  box-shadow: 0px 2px 2px 0px rgba(36, 107, 235, 0.25);
}
.open-toolbar {
  display: none;
}
.year-select-box {
  display: none;
}
.tool-box-mo {
  display: none;
}
.toolbar .close-btn {
  display: none;
}
@media (max-width: 767px) {
  .open-toolbar {
    position: absolute;
    top: 76px;
    right: 16px;
    display: inline-block;
    display: flex;
    width: 40px;
    height: 40px;
    background: url(../img/new/open-toolbar-icon.png) #fff center no-repeat;
    background-size: 24px auto;
    border-radius: 8px;
    z-index: 1;
  }
  .toolbar {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
  }
  .toolbar.on {
    display: flex;
    justify-content: end;
    min-height: calc(var(--vh, 1vh) * 100);
    z-index: 4;
  }
  .toolbar > .wrap {
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .toolbar > .wrap:-webkit-scrollbar {
    display: none;
  }
  .toolbar .close-btn {
    display: inline-block;
    position: absolute;
    top: 13px;
    left: -49px;
    width: 30px;
    height: 30px;
    border-radius: 0 !important;
    background: url(../img/new/nav-close.png) center no-repeat;
    background-size: 24px auto;
  }
  .toolbar .wrap {
    position: relative;
    width: 225px;
    background: #fff;
    z-index: 2;
  }
  .top-box {
    position: relative;
    top: auto;
    right: auto;
    padding: 12px 12px 11px;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid var(--gray-gray-20, #e4e4e4);
  }
  .tool-box {
    display: none;
  }
  .btn-box {
    width: 100%;
  }
  .btn-box > button {
    width: 100%;
    height: auto;
    padding: 8px;
    gap: 12px;
    flex-direction: row;
    background: none;
    border-radius: 8px;
    border: none !important;
    box-shadow: none;
  }
  .btn-box.on > button {
    background: var(--primary-primary-5, #eff5ff);
  }
  .btn-box > button:before {
    width: 40px;
    height: 40px;
  }
  .btn-box > button span {
    font-size: 17px;
    font-weight: 600;
    line-height: 150%; /* 25.5px */
  }
  .year-list {
    display: none !important;
  }
  .year-select-box {
    width: 100%;
    padding: 7px 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--gray-gray-20, #e4e4e4);
  }
  .year-select-box button {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px auto;
    background-color: transparent;
  }
  .year-select-box button.prev {
    background-image: url(../img/new/year-prev.png);
  }
  .year-select-box button.next {
    background-image: url(../img/new/year-next.png);
  }
  .year-select-box ul {
    flex: 1;
  }
  .year-select-box ul li {
    display: none;
    color: var(--gray-gray-90, #1d1d1d);
    text-align: center;
    font-size: 17px;
    line-height: 30px;
  }
  .year-select-box ul li.on {
    display: block;
  }
  .tool-box-mo {
    display: block;
    padding-bottom: 24px;
    background: #fff;
  }
  .tool-box-mo > ul {
    box-shadow: 0 1px 0 0 #e4e4e4;
  }
  .tool-box-mo > ul:last-child {
    box-shadow: none;
  }
  .tool-box-mo > ul > li {
    height: 54px;
  }
  .tool-box-mo > ul > li.not > button {
    cursor: default;
  }
  .tool-box-mo > ul > li.on > button {
    background: var(--gray-gray-10, #f0f0f0);
  }
  .tool-box-mo > ul > li > button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 16px 12px 12px 16px;
    width: 100%;
    height: 100%;
  }
  .tool-box-mo > ul > li > button span {
    flex: 1;
    color: #000;
    font-size: 17px;
    font-weight: 600;
    line-height: 150%; /* 25.5px */
    text-align: left;
  }
  .tool-box-mo > ul > li > button:before {
    content: "";
    display: inline-block;
    margin-bottom: 2px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
  }
  .tool-box-mo > ul > li.step1 button:before {
    background-image: url(../img/new/toolbar-icon1.png);
  }
  .tool-box-mo > ul > li.step2 button:before {
    background-image: url(../img/new/toolbar-icon1-2.png);
  }
  .tool-box-mo > ul > li.step3 button:before {
    background-image: url(../img/new/toolbar-icon3-1.png);
  }
  .tool-box-mo > ul > li.step4 button:before {
    background-image: url(../img/new/toolbar-icon4.png);
  }
  .tool-box-mo > ul > li.step5 button:before {
    background-image: url(../img/new/toolbar-icon7.png);
  }
  .tool-box-mo > ul > li.step6 button:before {
    background-image: url(../img/new/toolbar-icon6.png);
  }
  .tool-box-mo > ul > li.step7 button:before {
    background-image: url(../img/new/toolbar-icon7-1.png);
  }
  .tool-box-mo > ul > li.step8 button:before {
    background-image: url(../img/new/toolbar-icon8-1.png);
  }
  .tool-box-mo > ul > li.step9 button:before {
    background-image: url(../img/new/toolbar-icon9-1.png);
  }
  .tool-box-mo > ul > li.step10 button:before {
    background-image: url(../img/new/toolbar-icon10-2.png);
  }
  .tool-box-mo > ul > li.step11 button:before {
    background-image: url(../img/new/toolbar-icon11.png);
  }
  .tool-box-mo > ul > li > button:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../img/new/tool-arrow.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    margin-bottom: 1px;
  }
  .tool-box-mo > ul.type2 > li > button:after {
    background-image: url(../img/new/tool-arrow2.png);
  }
  .tool-box-mo > ul > li.step12 button:before {
    background-image: url(../img/new/refresh.png);
  } 
  
  .toolbar .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
}
@media (max-width: 360px) {
  .related-site ul a span {
    font-size: 11px;
  }
}

/* 지역 검색 */
.location-search {
  position: absolute;
  left: 145px;
  top: 15px;
  display: inline-flex;
  padding: 12.455px;
  height: 42px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: var(--gray-gray-0, #fff);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  z-index: 1;
}
.container.open .location-search {
  left: 346px;
}
.location-search span {
  margin-top: 3px;
  color: var(--gray-gray-90, #1d1d1d);
  font-size: 17px;
  font-weight: 600;
  line-height: 150%; /* 25.5px */
}
.modal-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.modal-popup.on {
  display: flex;
}
.modal-popup .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.modal-popup .modal-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 457px;
  max-width: calc(100% - 30px);
  max-height: calc(100% - 30px);
  font-size: 0;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
}
.modal-popup .inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: #fff;
  overflow: hidden;
}
.modal-popup .top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.modal-popup .top h3 {
  padding-top: 1px;
}
.modal-popup .top h3 span {
  color: #000;
  font-size: 19px;
  font-weight: 600;
  line-height: 150%; /* 28.5px */
}
.close {
  width: 30px;
  height: 30px;
  background: url(../img/new/modal-close.png) center no-repeat;
  background-size: 30px auto;
  position: relative;
  top: -28px;
}
.close2 {
  width: 30px;
  height: 30px;
  background: url(../img/new/modal-close.png) center no-repeat;
  background-size: 30px auto;
  position: relative;
  top: -7px;
}
.modal-popup .close {
  width: 30px;
  height: 30px;
  background: url(../img/new/modal-close.png) center no-repeat;
  background-size: 30px auto;
}
.select-box-wrap {
  display: flex;
  gap: 8px;
  font-size: 0;
}
.select-box {
  flex: 1;
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--gray-gray-40, #c6c6c6);
}
.select-box:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../img/new/select-arrow.png) center no-repeat;
  background-size: 20px auto;
}
.select-box select {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2px 30px 0 15px;
  color: var(--gray-gray-90, #1d1d1d);
  font-size: 15px;
  line-height: 150%; /* 22.5px */
  overflow: hidden;
  text-overflow: ellipsis;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: none;
  background: none;
}
.dong-list {
  flex: 1;
  max-height: 270px;
  overflow: hidden;
  overflow-y: auto;
}
.dong-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.dong-list::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 3px;
}
.dong-list > ul {
  border-top: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 */
}
.dong-list button {
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  width: 100%;
  height: 44px;
  color: #000;
  font-size: 15px;
  line-height: 150%; /* 22.5px */
  background: none;
}
.dong-list button:hover {
  background: var(--gray-gray-10, #f0f0f0);
}
.dong-list li.on button {
  color: #fff;
  background: var(--primary-primary-50, #246beb);
}

/*시군구 list추가*/
.sigungu-list {
  flex: 1;
  max-height: 270px;
  overflow: hidden;
  overflow-y: auto;
}
.sigungu-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.sigungu-list::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 3px;
}
.sigungu-list > ul {
  border-top: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 */
}
.sigungu-list button {
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  width: 100%;
  height: 44px;
  color: #000;
  font-size: 15px;
  line-height: 150%; /* 22.5px */
  background: none;
}
.sigungu-list button:hover {
  background: var(--gray-gray-10, #f0f0f0);
}
.sigungu-list li.on button {
  color: #fff;
  background: var(--primary-primary-50, #246beb);
}








.modal-popup .bottom button {
  display: flex;
  width: 100%;
  height: 56px;
  padding: 0px 20px;
  justify-content: center;
  align-items: center;
  background: var(--primary-primary-50, #246beb);
}
.modal-popup .bottom button:hover {
  background: #1d56bc;
}
.modal-popup .bottom button:active {
  background: #16408d;
}
.modal-popup .bottom button span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 1px;
  color: var(--gray-gray-0, #fff);
  font-size: 19px;
  line-height: 150%; /* 28.5px */
}
.modal-popup .bottom button span:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/new/map-pin-icon.png) center no-repeat;
  background-size: 20px auto;
}
@media (max-width: 767px) {
  .location-search {
    top: 76px;
    left: 16px !important;
    height: 36px;
    padding: 16.46px;
  }
  .location-search span {
    margin-top: 2px;
  }
  .modal-popup .modal-box {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    max-height: calc(var(--vh, 1vh) * 100);
    border-radius: unset;
  }
  .modal-popup .inner {
    padding: 0 20px 20px;
    gap: 16px;
  }
  .modal-popup .top {
    min-height: 52px;
    padding-top: 15px;
  }
  .modal-popup .top h3 {
    padding-top: 0;
  }
  .modal-popup .top h3 span {
    font-size: 21px;
  }
  .modal-popup .close {
    background: url(../img/new/modal-close-mo.png) center no-repeat;
    background-size: 30px auto;
  }
  .select-box-wrap {
    display: block;
    line-height: 0;
  }
  .select-box-wrap .select-box {
    display: inline-block;
    height: 56px;
    border-radius: 8px;
  }
  .select-box-wrap.type3 .select-box:nth-child(1) {
    width: 100%;
    margin-bottom: 8px;
  }
  .select-box-wrap.type3 .select-box:nth-child(2) {
    margin-right: 8px;
  }
  .select-box-wrap.type3 .select-box:not(:first-child) {
    width: calc((100% - 8px) / 2);
  }
  .select-box:before {
    width: 24px;
    height: 24px;
    background: url(../img/new/select-arrow-mo.png) center no-repeat;
    background-size: 24px auto;
  }
  .select-box select {
    padding-right: 35px;
    font-size: 19px;
  }
  .dong-list {
    max-height: unset;
  }
  .dong-list button {
    height: 54px;
  }
  
  
  /* 시군구 list추가*/
  
  .sigungu-list {
    max-height: unset;
  }
  .sigungu-list button {
    height: 54px;
  }
}

/* 메뉴 페이지 */
.pannel {
  display: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 94px;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 3;
  transform: translateX(-100%);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
  /* transition: 0.2s all ease-in-out; */
}
.pannel.on {
  display: inline-block;
}
.pannel.slide {
  opacity: 1;
  transform: translateX(0);
}
.container.open .pannel {
  left: 330px;
}
.page-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 32px;
  width: 426px;
  height: 100%;
  background: #fff;
  left: 95px;
}
.page-inner .top .tap .on button a {
	text-decoration: none;
}

.pannel .top {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pannel .top h3 span {
  color: var(--gray-gray-90, #1d1d1d);
  font-size: 21px;
  font-weight: 600;
  line-height: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pannel .top h3 span:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
}
.pannel .top h3 span.step1:before {
  background-image: url(../img/new/nav-icon1.png);
}
.pannel .top h3 span.step2:before {
  background-image: url(../img/new/nav-icon2.png);
}
.pannel .top h3 span.step3:before {
  background-image: url(../img/new/nav-icon3.png);
}
.pannel .top h3 span.step4:before {
  background-image: url(../img/new/nav-icon4.png);
}
.pannel .top h3 span.step5:before {
  background-image: url(../img/new/nav-icon5.png);
}
.pannel .top h3 span.step6:before {
  background-image: url(../img/new/nav-icon6.png);
}
.pannel .top h3 span.step7:before {
  background-image: url(../img/new/nav-icon7.png);
}
.pannel .top h3 span.step8:before {
  background-image: url(../img/new/nav-icon8.png);
}
.pannel .top .prev {
  display: none;
  width: 30px;
  height: 30px;
  background: url(../img/new/prev-arrow.png) center no-repeat;
  background-size: 30px auto;
}
.pannel .top .close {
  width: 30px;
  height: 30px;
  background: url(../img/new/menu-page-close.png) center no-repeat;
  background-size: 30px auto;
}
.tab {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.tab > li {
  flex: 1;
}
.tab button {
  width: 100%;
  display: flex;
  height: 48px;
  padding: 0px 11px;
  justify-content: center;
  align-items: center;
  background: var(--gray-gray-10, #f0f0f0);
}
.tab li.on button {
  background: var(--primary-primary-50, #246beb);
}
.tab button span {
  padding-top: 2px;
  color: var(--gray-gray-70, #555);
  font-size: 17px;
  font-weight: 600;
  line-height: 150%; /* 25.5px */
}
.tab li.on button span {
  color: var(--gray-gray-0, #fff);
}
.tab-cont {
  /* flex: 1; */
  /* display: flex; */
  overflow: hidden;
}
.tab-cont > li {
  display: none;
}
.tab-cont > li.on {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.select-box.type2 {
  border-radius: 8px;
  height: 44px;
}
.select-box.type2:before {
  right: 11px;
}
.select-box.type2 select {
  padding: 2px 30px 0 11px;
  font-size: 17px;
}
/*검색 버튼 스타일 설정 start*/
.search_result_btn {
  border: 1px solid darkgray; 
  border-radius: 8px;
  height: 44px;
  /*background:lightgray;*/
}
.search_result_btn:hover {
  background-color: #f0f0f0;
}
/* .search_result_btn:before {
  right: 11px;
} */
/* .select-box.type2 select {
  padding: 2px 30px 0 11px;
  font-size: 17px;
} */
/*검색 버튼 스타일 설정 end*/
.pannel .table {
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}
.pannel .table::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.pannel .table::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 3px;
}
/*조회 '위치' col */
/* colgroup.style1 col:nth-child(1) {
  width: 97px;
} */
colgroup.style1 col:nth-child(1) {
  width: 50%;
}
/*수자원현황-하천현황*/
colgroup.style11 col:nth-child(1) {
  width: 97px;
}




colgroup.style1 col:nth-child(3) {
  width: 62px;
}
.table:not(.not-h) tbody tr:hover,
.table:not(.not-h) tbody tr.on {
  position: relative;
  cursor: pointer;
  box-shadow: 0px 4px 4px 0px #246beb26;
  z-index: 1;
}
.table:not(.not-h) tbody tr:hover td:last-child:before,
.table:not(.not-h) tbody tr.on td:last-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #1d56bc;
}
.table span {
  position: relative;
  display: inline-block;
  padding-top: 1px;
  font-size: 15px;
  color: var(--gray-gray-90, #1d1d1d);
  word-break: break-all;
  z-index: 1;
}
.detail {
  position: relative;
  padding-top: 2px;
  width: 100%;
  height: 100%;
  color: var(--primary-primary-60, #1d56bc);
  font-size: 15px;
  line-height: 150%; /* 22.5px */
  background: none;
  z-index: 1;
}
.chart-box {
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.chart {
  height: 244px;
}
.state-color-box ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.state-color-box ul li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.state-color-box .circle {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
.state-color-box .txt {
  color: var(--gray-gray-70, #555);
  font-size: 15px;
  line-height: 150%; /* 22.5px */
}
.paging-box {
  padding-top: 16px;
  text-align: center;
}
.paging-box ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.paging-box li {
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
.paging-box li.on a {
  color: var(--primary-primary-60, #1d56bc);
  font-weight: 600;
}
.paging-box a,
.paging-box span {
  position: relative;
  display: inline-block;
  min-width: 40px;
  height: 40px;
  padding: 8px 4px;
  color: var(--gray-gray-70, #555);
  text-align: center;
  font-size: 17px;
  line-height: 150%; /* 25.5px */
}
.paging-box .paging a {
  min-width: 62px;
  display: flex;
  align-items: center;
}
.paging-box .prev a {
  padding: 6px 8px 6px 4px;
  line-height: 28px;
}
.paging-box .next a {
  padding: 6px 4px 6px 8px;
  line-height: 28px;
}
.paging-box .paging.prev a:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/new/paging-arrow.png) center no-repeat;
  background-size: 20px auto;
}
.paging-box .paging.next a:after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/new/paging-arrow.png) center no-repeat;
  background-size: 20px auto;
  transform: rotate(180deg);
}
.paging-box .meatballs span {
  background: url(../img/new/meatballs-icon.png) center no-repeat;
  background-size: 20px auto;
}
@media (max-width: 767px) {
  .pannel {
    left: 0 !important;
    padding: 0;
    width: 100% !important;
    z-index: 4;
    transform: unset !important;
    transition: none;
  }
  .page-inner {
    padding: 0 20px 20px;
    /* width: 100%; */
    /*테스트*/
    position: fixed;
    height: 100vh;
    /* top: 4em; */
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 4;
    overflow: auto;
    /* left: 95px; */
    /* top: 0; */
    
  }
  .pannel .top {
    align-items: center;
    margin-bottom: 0;
    padding-top: 8px;
    height: 52px;
  }
  .pannel .top .prev {
    display: inline-block;
  }
  .pannel .top h3 span:before {
    display: none;
  }
  .tab button {
    height: 52px;
  }
  .select-box.type2 {
    margin-bottom: 8px;
  }
  .select-box-wrap.type2 {
    display: flex;
  }
  .select-box-wrap.type2 .select-box {
    margin: 0 !important;
  }

  @media (max-width: 767px) {
  
	  .select-box-wrap.type2 {
	    display: block;
	  }
	  
	  .select-box-wrap.type2 .select-box {
	    margin: 0 !important;
	    position: relative;
	    width: 50%;
	  }
	  
	  .select-box-wrap .column > div {
	  	position: relative;
	  	margin-top: 2%;
	  }
	
}
  
  
  colgroup.style1 col:nth-child(1) {
    width: 87px;
  }
  .paging-box {
    padding: 0 0 3px;
  }
  .paging-box li {
    display: none;
  }
  .paging-box ul {
    justify-content: center;
  }
  .paging-box li.paging {
    display: inline-block;
  }
}

/* 상세정보 */
.detail-page {
  left: calc(94px + 426px);
  z-index: 2;
}
.container.open .detail-page {
  left: calc(330px + 426px);
}
.detail-page .page-inner {
  gap: 0;
}
.pannel.detail-page .top {
  margin-bottom: 24px;
}
.pannel.detail-page .top h3 span:before {
  background-image: url(../img/new/detail-page-icon.png);
}
.excel {
  display: flex;
  width: 150px;
  height: 44px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid #257045;
}
.excel:hover {
  background: #257045;
}
.excel span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #257045;
  font-size: 17px;
  line-height: 150%; /* 25.5px */
}
.excel:hover span {
  color: #fff;
}
.excel span:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../img/new/excel.png) center no-repeat;
  background-size: 20px auto;
}
.excel:hover span:before {
  background: url(../img/new/excel-h.png) center no-repeat;
  background-size: 20px auto;
}
.button-box-wrap {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  width: 100%;
}
.button-box {
  display: flex;
  gap: 8px;
  width: 100%;
}
.button-box button {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0px 15px;
  border-radius: 8px;
  border: 1px solid var(--gray-gray-40, #c6c6c6);
  background: var(--gray-gray-10, #f0f0f0);
}
button.btn-style1 {
  width: 110px;
}
.button-box button span {
  color: var(--gray-gray-50, #8e8e8e);
  font-size: 17px;
  line-height: 150%; /* 25.5px */
}
.table-box {
  flex: 1;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  overflow-y: auto;
}
.table-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.table-box::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 3px;
}

.border-box {
  padding: 15px;
  border-radius: 16px;
  border: 1px solid var(--gray-gray-20, #e4e4e4);
}
.table span.arrow:before {
  padding-right: 4px;
}
.table span.down:before {
  content: "▼";
  color: var(--primary-primary-50, #246beb);
}
.table span.up:before {
  content: "▲";
  color: var(--system-danger-50, #eb003b);
}
@media (max-width: 767px) {
  .detail-page {
    left: 0 !important;
    z-index: 5;
  }
  .pannel.detail-page .top {
    height: 60px;
    padding-top: 0;
    margin-bottom: 8px;
  }
  .excel {
    margin-top: 8px;
    width: 100%;
  }
  button.btn-style1 {
    width: 112px;
  }
  .chart-box {
    gap: 3px;
  }
  .chart {
    height: 260.5px;
  }
  .state-color-box {
    padding-bottom: 16px;
  }
}

/* loading */
.loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.loading.on {
  display: flex;
}
.loading .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(0, 0, 0, 0.5);
}
.loading .content {
  position: relative;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading .lottie {
  width: 100px;
  height: 100px;
}
.loading .content p {
  color: var(--gray-gray-0, #fff);
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 150%; /* 25.5px */
}
@media (max-width: 767px) {
  .loading .content {
    padding: 0 0 40px;
  }
  .loading .content p {
    padding-top: 14px;
  }
}

/*추가 스타일*/
/* .astyle{
	display: inline-block;
	padding: 10px 40px;
} */
.spanstyle{
	display: inline-block;
	/* padding: 10px 45px; */
}

.leftmenu {
	/* display: block; */
	position: absolute;
	left: 94px;
	height: 100%;
	top: 0;
}

/* .leftmenu .page-inner .top{
	height: 30px;
} */



.bundle2 {
  background: #fff;
  border: 1px solid var(--gray-gray-20, #e4e4e4);
  border-radius: 10px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  /* width: 56px; */
  padding: 0;
}
.bundle2 li {
  position: relative;
}
.bundle2 li button{
	border: none;
}

.bundle2 li > button {
  position: relative;
  display: flex;
  width: 56px;
  height: 56px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--gray-gray-20, #e4e4e4);
  background: none;
  background: var(--gray-gray-0, #fff);
}
.tool-box > .bundle2 > li:first-child > button {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.tool-box > .bundle2 > li:last-child > button {
  border-bottom: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.bundle2:not(.type2) > li.on:not(.not) > button:hover,
.bundle2:not(.type2) > li.on:not(.not) > button {
  background: var(--primary-primary-50, #246beb);
}
.tool-box > .bundle2 > li > button:hover {
  background: #e4e4e4;
}
.bundle2:not(.not).step1 > li > button:hover {
  background: var(--gray-gray-10, #f0f0f0);
}
.bundle2 li > button:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 20px auto;
}
.bundle2 li.active:not(.not) > button:before,
.bundle2 li.on:not(.not) > button:before {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.bundle2 li.step1 > button:before {
  background-image: url(../img/new/toolbar-icon1.png);
}
.bundle2 li.step1-1 > button:before {
  background-image: url(../img/new/toolbar-icon1-1.png);
}
.bundle2 li.step1-2 > button:before {
  background-image: url(../img/new/toolbar-icon1-2.png);
}
.bundle2 li.step1-3 > button:before {
  background-image: url(../img/new/toolbar-icon1-3.png);
}
.bundle2 li.step1-4 > button:before {
  background-image: url(../img/new/toolbar-icon1-4.png);
}
.bundle2 li.step2 > button:before {
  background-image: url(../img/new/toolbar-icon2.png);
}
.bundle2 li.step3 > button:before {
  background-image: url(../img/new/toolbar-icon3.png);
}
.bundle2 li.step4 > button:before {
  background-image: url(../img/new/toolbar-icon4.png);
}
.bundle2 li.step5 > button:before {
  background-image: url(../img/new/toolbar-icon5.png);
}
.bundle2 li.step6 > button:before {
  background-image: url(../img/new/toolbar-icon6.png);
}
.bundle2 li.step7 > button:before {
  background-image: url(../img/new/toolbar-icon7.png);
}
.bundle2 li.step8 > button:before {
  background-image: url(../img/new/toolbar-icon8.png);
}
.bundle2 li.step9 > button:before {
  background-image: url(../img/new/toolbar-icon9.png);
}
.bundle2 li.step10 > button:before {
  background-image: url(../img/new/toolbar-icon10-1.png);
}
.bundle2 li.step10.on > button:before {
  background-image: url(../img/new/toolbar-icon10.png);
}
.bundle2 li.step11 > button:before {
  background-image: url(../img/new/toolbar-icon11.png);
}
.bundle2 li > button span {
  color: var(--gray-gray-90, #1d1d1d);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.bundle2 li.active:not(.not) > button span,
.bundle2 li.on:not(.not) > button span {
  color: #fff;
}
.bundle2 .bundle2 {
  display: none;
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  border: none;
}
.bundle2 > li.on .bundle2 {
  display: flex;
}
.bundle2 .bundle2 button:not(.btn1) {
  border-bottom: none;
}
.tool-box > .bundle2 .bundle2 > li:first-child > button {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.tool-box > .bundle2 .bundle2 > li:last-child > button {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.bundle2.type2 {
  flex-direction: column;
  padding: 4px 0;
}
.bundle2.type2 button:not(.btn1) {
  padding: 0 13.1px;
  width: 100%;
  height: 40px;
  flex-direction: row;
  justify-content: flex-start;
}

.after_copy {    
    padding: 0 15px !important;
    vertical-align: middle !important;
    line-height: 22px !important;
    color: #303038 !important;
}

.half-view{
	position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 100%;
    width: 3px;
    background-color: #693131;
    z-index: 3;    
}

.separator {
	position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 100%;
    width: 5px;
    background-color: black;
    z-index: 3;
    cursor: ew-resize;    
}

.btnResize{
	position: relative;
	left: calc(50% - 51.8px);
	top: calc(16% - 70px);
	width: 105px;
	height: 50px;
	border-radius: 15px;
	background:url(../img/view/l_arrow.png) no-repeat, url(../img/view/r_arrow.png) no-repeat ,linear-gradient(1deg,#ffab00,#fff800);
	border: 2px solid #000000;
	background-size: 40px;
	background-position: left center, right center;
	box-sizing: border-box;
}


/*****************************************추가 스타일****************************************/

#leftMenu::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px; /* 그림자 너비 조절 */
  background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
  pointer-events: none; /* 그림자가 클릭 등 이벤트 방해 안 하도록 */
}
#layer_content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px; /* 그림자 너비 조절 */
  background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
  pointer-events: none; /* 그림자가 클릭 등 이벤트 방해 안 하도록 */
}


/*버튼 hover, active, focus시 색상 진하게*/
.tab li.on button:hover/* , .tab li.on button:active, .tab li.on button:focus */ {
  background: var(--primary-primary-50, #1E57C7);
}

.table-content{
	height: 70%;
	/*height: 71%;*/
	overflow-y:auto;
}

#chart_content{
		top: 61%;
		width: 400px;
		right: 40%;
		height:340px; 
		border: 1px solid #ccc; 
		border-radius: 12px; 
		/* margin: 12px; */
		left: 3%; 
	
	}

@media (max-width: 767px) {
	
	.layer_wrap{
		position: absolute;
		top: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 20px 20px 32px;
		width: 100vw;
		height: 100vh;
		background: #fff;
		left: 0;
		z-index: 5;
	}
	
	/*상세정보 컨텐츠 요소별 mobile css 설정*/
	#layer_content{
		/* width:100vw; */
		width:100%;
		height: 100vh;
		left: 0 !important;
	}
	#Detail_Result{
	
	}
	#Detail_Result .detail_layer .layer_header{
	
	}
	#Detail_Result .detail_layer .layer_body{
		width: 87%;
		left: 5%;
		
	}
	#Detail_Result  .layer_body{
		width: 87%;
		left: 5%;
		
		
	}
	
	
	#chart_content{
		width: 87%;
		left: 5%;
		margin: 0;
		/* margin-top: 107%; */
		/* top: 78%; */
		top: 45%;
	
	}
	
	
}


	

.layer_wrap{
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 20px 32px;
	width: 426px;
	height: 100%;
	background: #fff;
	left: 758px;
}

	
	.table-content-01{
		height: 55%;
		overflow-y:auto;
	}
}

/*매뉴별 table-content height설정*/
.table-content-01{
	height: 63%;
	overflow-y:auto;
}




.layer_body{
	border: solid 1px lightgray;
	border-radius: 12px;
	padding: 10px;
	width: 400px;
	position: absolute;
	left: 10px;
	top: 18%;
}

@media (max-width: 767px) {
	.layer_body{
		border: solid 1px lightgray;
		border-radius: 12px;
		padding: 10px;
		width: 400px;
		position: absolute;
		left: 6em;
		/* top: 11%; */
		top: 15em;
	}	
	
	#submap_sel{
	  	display:none;
	  }	
	
}



/*비활성화 버튼 - 정보 표시*/
/*정보 1개*/
.disabled-button {
  background-color: #f0f0f0; /* 연한 회색 배경 */
  color: #999999;           /* 흐릿한 텍스트 색상 */
  border: 1px solid #dddddd; /* 연한 테두리 */
  padding: 10px 16px;
  border-radius: 6px;
  cursor: not-allowed;      /* 마우스 커서 모양 변경 */
  pointer-events: none;     /* 클릭 이벤트 차단 */
  font-size: 15px;
}

/*정보 2개*/
.disabled-button1 {
  background-color: #f0f0f0; /* 연한 회색 배경 */
  color: #999999;           /* 흐릿한 텍스트 색상 */
  border: 1px solid #dddddd; /* 연한 테두리 */
  padding: 10px 16px;
  border-radius: 6px;
  cursor: not-allowed;      /* 마우스 커서 모양 변경 */
  pointer-events: none;     /* 클릭 이벤트 차단 */
  font-size: 15px;
  width: 30%;
}
.disabled-button2 {
  background-color: #f0f0f0; /* 연한 회색 배경 */
  color: #999999;           /* 흐릿한 텍스트 색상 */
  border: 1px solid #dddddd; /* 연한 테두리 */
  padding: 10px 16px;
  border-radius: 6px;
  cursor: not-allowed;      /* 마우스 커서 모양 변경 */
  pointer-events: none;     /* 클릭 이벤트 차단 */
  font-size: 15px;
  width: 68%;
  margin-left: 7px;
  
}


/*생태사진 등록 관련 버튼*/
.button_exif {
	padding: 6px 10px 6px 10px;
	font-size: 13px;
	/* background: #4c5d7e; */
	background: #246BEB;
}
.button_exif:hover, .button_exif:active, .button_exif:focus {
	text-decoration: none;
	/* background: #355595; */
	background: #1E57C7;
	color: #fff;
}
.button_exif2 {
	padding: 6px 10px 6px 10px;
	font-size: 13px;
	background: #f0f0f0;
}
.button_exif2:hover, .button_exif2:active, .button_exif2:focus {
	text-decoration: none;
	background: #e5e5e5;
}
.button_exif3{
  padding: 2%;
  margin-top: 4%;
  width: 100%;
  color: #fff;
  background: var(--primary-primary-50, #246beb);
  font-size: 17px;
  font-weight: 600;
  line-height: 150%; /* 25.5px */
}
.button_exif3:hover, .button_exif3:active, .button_exif3:focus {
	text-decoration: none;
	color: #fff;
	background: var(--primary-primary-50, #1E57C7);
}


/* .tab li.on button span {
  color: var(--gray-gray-0, #fff);
} */



/*표에서 tbody 폰트 굵기 고정*/
.info_table tbody tr td{
	font-weight: normal;
}





/*통합검색 스타일 설정*/
/* 결과 전체 컨테이너 (높이 고정 + 스크롤) */
#vworld_result {
    max-height: 400px; /* 원하는 높이(px) 지정 */
    overflow-y: auto;
    border: 1px solid #ccc; /* 전체 박스 테두리 */
    padding: 8px;
    background-color: #fff;
}

/* 각 결과 wrap */
.vsch_result_wrap {
    padding: 12px 0;
    border-bottom: 1px solid #ddd; /* 얇은 회색 구분선 */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* 마지막 요소는 border-bottom 제거 */
.vsch_result_wrap:last-child {
    border-bottom: none;
}

/* hover 시 색상 변경 */
.vsch_result_wrap:hover {
    background-color: #f9f9f9;
}

/* 결과 내용 스타일 */
.vsch_result {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: transparent; /* 기존 회색 제거 */
}

.vsch_result li {
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}

.vsch_result li.title {
    font-size: 16px;
    font-weight: bold;
    /* color: #222; */
    background: none;
}

.vsch_result li.title .category {
    font-size: 13px;
    color: #777;
    margin-left: 8px;
}

.vsch_result li.status {
    font-size: 13px;
    color: #555;
}

.vsch_result li.distance {
    font-size: 13px;
    color: #555;
}

.vsch_result li.address {
    margin-top: 8px;
    font-size: 13px;
    color: #444;
    line-height: 1.4;
}

.vsch_result li.address .road,
.vsch_result li.address .jibun {
    display: block;
}





/*통합검색 결과 화면 css*/
#vworld_result {
  display: none;
}

#vworld_result.active {
  display: block;
}


/*검색 버튼 스타일*/
.sch_button{
	/* border: 1px solid black; */
	border-radius: 5px;
	height: 30px;
	margin-top: -8px;
}


/* 생태환경 - 생태환경 통합검생 input style*/
.eco-search-input{
	ime-mode:active;	/* 기존에 있던 스타일 */
	width: 85%;
	height: 30px;
	padding: 16px;
	/* border-radius: 7px; */
	border: 1px solid #c6c6c6;
	
}
.button_eco {
	padding: 8px;
	font-size: 13px;
	background: #f0f0f0;
	position: relative;
	display: inline-block;
	height: 34px;
	width: 13%;
	text-align: center;
}
.button_eco:hover, .button_eco:active, .button_eco:focus {
	text-decoration: none;
	background: #e5e5e5;
}


/* 지역 간편이동 */
/* .auto-width-button {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  width: auto; 내용에 따라 너비 자동 조절
  max-width: 100%; 너무 길어지는 경우 대비
  white-space: nowrap; 줄바꿈 방지
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  cursor: pointer;
} */
/* 
.auto-width-button {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  cursor: pointer;
} */
/* 지역 간편이동 */
.auto-width-button {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  width: auto; /* 내용에 따라 너비 자동 조절 */
  /* max-width: 100%; */ /* 너무 길어지는 경우 대비 */
  white-space: nowrap; /* 줄바꿈 방지 */
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  cursor: pointer;
}


#selected-region {
  display: inline; /* 또는 block이 아닌 상태 */
  white-space: nowrap;
}



/* 지역선택 오버레이 화면 클릭 막기 */
#sigungu_modalbg {
  pointer-events: none; /* 클릭을 잡는다 */
}


.container.open .aside .modal-popup .bg{
	display: block;
}

.tool-box-mo > ul.type2 > li > button:after {
    background-image: url(../img/new/tool-arrow2.png);
  }
  
  .tool-box-mo > ul.type2 > li.on > button::after {
  background-image: url(../img/new/check-on.png)
  }


/*********************************검색 체크박스 테스트 start**********************************/

.bundlechk {
  background: #fff;
  /* border: 1px solid var(--gray-gray-20, #e4e4e4); */
  /* border-radius: 10px; */
  /* box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15); */
  /* width: 56px; */
  padding: 0;
}
.bundlechk li {
  position: relative;
}
.bundle li button{
	border: none;
}

.bundlechk li > button {
  position: relative;
  display: flex;
  width: 56px;
  height: 56px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--gray-gray-20, #e4e4e4);	/* 체크박스 하단에 얇은 선 */
  background: none;
  background: var(--gray-gray-0, #fff);
}



.bundlechk.type2chk {
  display: flex;
  gap: 4px;
}

.bundlechk.type2chk li {
  list-style: none;
  flex: 1;
}

.bundlechk.type2chk button {
  position: relative;
  width: 100%;
  height: 40px;
  padding-left: 30px;
  text-align: left;
  font-size: 15px;
  background: #fff;
  /* border: 1px solid #ddd; */
  /* border-radius: 6px; */
  cursor: pointer;
}

/* 체크 아이콘 - 기본 회색 */
.bundlechk.type2chk button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 20px;
  height: 20px;
  background-image: url("../img/new/check.png");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

/* 선택된 li에만 check-on 아이콘으로 변경 */
.bundlechk.type2chk li.on > button::before {
  background-image: url("../img/new/check-on.png");
}

/*  배경색 없애고 강조 없이 체크 이미지로만 구분하고 싶다면 아래 제거 */
.bundlechk.type2chk li.on > button {
  background-color: #fff;
  color: #000;
  font-weight: normal;
}


.closemodal {
  width: 30px;
  height: 30px;
  background: url(../img/new/modal-close.png) center no-repeat;
  background-size: 30px auto;
  position: relative;
  top: 20%;
}

/*********************************검색 체크박스 테스트 end**********************************/