:root {
  --accordion-color-background: var(--color-background-white-subtle);
  --accordion-color-background-hover: var(--color-background-gray-subtler);
  --accordion-color-text-on: var(--color-text-disabled);
}
@media screen and (max-width: 768px) {
	#map {
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-color: #e6d6d6;
	}
	
	header + .body {
	  position: relative;
	  height: 100%;
	  overflow: hidden;
	}
	
	.accordion__list li {
	  float: unset;
	  background: var(--accordion-color-background);
	  border-radius: var(--border-radius-small);
	  width: 100%;
	}
	.accordion__list li > div:first-child {
	  display: flex;
	  align-items: center;
	  justify-content: unset;
	  flex-direction: row;
	  column-gap: var(--gap-02);
	  row-gap: var(--gap-00);
	  padding: var(--padding-02);
	  border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
	  width: 100%;
	  flex-wrap: wrap;
	}
	.accordion__list li > div:first-child:hover {
	  background-color: var(--accordion-color-background-hover);
	}
	.accordion__list li > div:first-child > a {
	  flex: 1;
	  padding-right: var(--padding-08);
	}
	.accordion__list li .ico__folder {
	  width: var(--icon-size-xsmall);
	  height: var(--icon-size-xsmall);
	  background-position: center;
	  background-repeat: no-repeat;
	  background-color: transparent;
	  background-image: url(../images/common/ico-folder.svg);
	  background-size: contain;
	}
	.on > .ico__folder {
	  background-image: url(../images/common/ico-folder-open.svg) !important;
	}
	
	.accordion__list li .ico__file {
	  width: var(--icon-size-xsmall);
	  height: var(--icon-size-xsmall);
	  background-position: center;
	  background-repeat: no-repeat;
	  background-color: transparent;
	  background-image: url(../images/common/ico-file.svg);
	  background-size: contain;
	}
	.accordion__list > ul > li {
	  box-shadow: var(--shadow-normal-gray);
	  padding: 8px;
	}
	.accordion__list > ul > li a {
	  font-weight: var(--font-weight-bold);
	  font-size: var(--font-size-body-xsmall);
	}
	.accordion__list > ul > li:not(:last-child) {
	  margin-bottom: var(--gap-01);
	}
	.accordion__list > ul > li > div {
	  padding: var(--padding-02) 0;
	}
	.accordion__list .hasdepth > div {
	  background-position: center right 8px;
	  background-repeat: no-repeat;
	  background-color: transparent;
	  background-image: url(../images/common/ico-accordion-down.svg);
	  cursor: pointer;
	}
	.accordion__list .hasdepth > div.on {
	  background-image: url(../images/common/ico-accordion-up.svg);
	}
	.accordion__list .hasdepth > div.on a {
	  color: var(--accordion-color-text-on);
	}
	.accordion__depth {
	  background-image: url(../images/common/ico-accordion_line.svg);
	  background-repeat: repeat-y;
	  background-position-x: var(--padding-04);
	  width: 100%;
	  display: none;
	  padding-left: var(--padding-06);
	}
	.accordion__depth li {
	  display: flex;
	  align-items: unset;
	  justify-content: unset;
	  flex-direction: row;
	  flex-wrap: wrap;
	  padding-right: 0;
	}
	.accordion__depth li:not(:last-child) {
	  margin-bottom: var(--gap-00);
	}
	.accordion__depth li label {
	  flex: 1;
	}
	.accordion__depth .range__box {
	  display: none;
	  width: 100%;
	  padding-left: var(--padding-09);
	}
	.accordion__depth .range__box label input[type=range] {
	  width: 100%;
	  position: relative;
	  top: 1px;
	}
	.accordion__depth .range__box select {
	  width: unset;
	}
	.accordion__depth .range__box .range__list {
	  display: flex;
	  align-items: center;
	  justify-content: unset;
	  flex-direction: row;
	  border-radius: var(--border-radius-small);
	  gap: var(--gap-03);
	  padding: var(--padding-02);
	  background: var(--color-background-gray-subtler);
	}
	.accordion__depth .range__box .range__list.active {
	  background: var(--color-background-primary-subtler);
	}
	.accordion__depth .range__box .range__list label.range__label {
	  flex: 1;
	}
	.accordion__depth .range__box .range__list input {
	  flex: 1;
	}
	.accordion__depth .radio__name, .accordion__depth .check__name {
	  font-size: var(--font-size-body-xsmall);
	  display: inline-block;
	  width: calc(100% - 22px);
	}
	.accordion__item .item__button {
	  width: 100%;
	  position: relative;
	}
	.accordion__item .item__button > label, .accordion__item .item__button > button {
	  display: flex;
	  align-items: center;
	  justify-content: unset;
	  flex-direction: row;
	  gap: var(--gap-02);
	  position: relative;
	  cursor: pointer;
	  padding: var(--padding-02) var(--padding-08) var(--padding-02) var(--padding-07);
	  background: var(--color-background-secondary-subtler);
	  border-radius: var(--border-radius-small);
	  font-weight: var(--font-weight-bold);
	}
	.accordion__item .item__button > label::before, .accordion__item .item__button > button::before {
	  content: "";
	  display: inline-block;
	  width: var(--icon-size-small);
	  height: var(--icon-size-small);
	  background-position: center;
	  background-repeat: no-repeat;
	  background-color: transparent;
	  background-image: url(../images/common/ico-accordion-right.svg);
	  position: absolute;
	  top: 7px;
	  z-index: 1;
	  left: 0px;
	}
	.accordion__item .item__button > label .check__mark, .accordion__item .item__button > button .check__mark {
	  position: absolute;
	  right: 8px;
	  top: 10px;
	}
	.accordion__item .item__button > label .line__box, .accordion__item .item__button > button .line__box {
	  transition: all 0.2s ease-in-out;
	  display: inline-block;
	  height: 1px;
	  flex: 0;
	  background-color: var(--color-border-gray-subtle);
	}
	.accordion__item .item__button > label .check__name, .accordion__item .item__button > button .check__name {
	  padding: 0;
	}
	.accordion__item .item__button button {
	  border: 0;
	  width: 100%;
	  padding-right: var(--padding-03);
	}
	.accordion__item__depth {
	  display: none;
	}
	.accordion__item__depth .img__box {
	  height: 250px;
	  background-color: #f4f6f9;
	  margin-bottom: var(--padding-03);
	  border-radius: var(--border-radius-small);
	}
	.accordion__item__depth .graph__box {
	  height: 250px;
	  background-color: #f4f6f9;
	  border-radius: var(--border-radius-small);
	}
	.accordion__item.on .item__button {
	  background: var(--color-background-primary-subtler);
	}
	.accordion__item.on .item__button > label, .accordion__item.on .item__button > button {
	  background-color: var(--color-background-tertiary);
	}
	.accordion__item.on .item__button > label::before, .accordion__item.on .item__button > button::before {
	  background-image: url(../images/common/ico-accordion-down-line.svg);
	}
	.accordion__item.on .item__button .line__box {
	  flex: 1;
	}
	.accordion__item.on__depth {
	  display: block;
	}
	
	.range__box:not(.accordion__list .range__box) {
	  position: absolute;
	  top: -100px;
	  bottom: auto;
	  right: 12px;
	  padding: var(--padding-02);
	  border-radius: var(--border-radius-small);
	  border: 1px solid var(--color-border-gray-subtle);
	  background-color: #fff;
	  display: flex;
	  align-items: center;
	  justify-content: unset;
	  flex-direction: row;
	  gap: var(--padding-05);
	}
	.range__box:not(.accordion__list .range__box) .play {
	  width: var(--icon-size-medium);
	  height: var(--icon-size-medium);
	  cursor: pointer;
	  border: 1px solid transparent;
	  background: var(--button-primary-color) url(../images/common/ico-arrow-right_white.svg) no-repeat center/var(--icon-size-xxsmall);
	  border-radius: var(--border-radius-small);
	}
	.range__box:not(.accordion__list .range__box) .play.active {
	  background: #fff url(../images/common/ico-pause.svg) no-repeat center/var(--icon-size-xxsmall);
	  border: 1px solid var(--color-background-primary);
	}
	.range__box:not(.accordion__list .range__box) .legends {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  flex-direction: row;
	  gap: 12px;
	  padding: 0 4px;
	}
	.range__box:not(.accordion__list .range__box) .legends span {
	  position: relative;
	  font-size: var(--font-size-body-xsmall);
	  color: var(--color-text-subtle);
	}
	.range__box:not(.accordion__list .range__box) .legends span::before {
	  content: "";
	  display: block;
	  position: absolute;
	  width: 1px;
	  height: 10px;
	  background-color: var(--color-border-gray-subtle);
	  top: -7px;
	  left: 50%;
	  transform: translateX(-50%);
	}
	.range__box:not(.accordion__list .range__box) input[type=range] {
	  overflow: hidden;
	  height: 16px;
	  -webkit-appearance: none;
	  appearance: none;
	  margin: 6px 0;
	  width: 100%;
	  background: transparent;
	  padding: 0 10px;
	}
	.range__box:not(.accordion__list .range__box) input[type=range]:focus {
	  outline: none;
	}
	.range__box:not(.accordion__list .range__box) input[type=range]::-webkit-slider-runnable-track {
	  width: 100%;
	  height: 100%;
	  cursor: pointer;
	  border-radius: var(--border-radius-maximum);
	  border: 1px solid #00C9C8;
	  background-color: #eee;
	  overflow: hidden;
	}
	.range__box:not(.accordion__list .range__box) input[type=range]::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  width: 16px;
	  height: 16px;
	  background: #fff;
	  position: relative;
	  top: -1px;
	  border: 1px solid #00C9C8;
	  box-shadow: 1px 1px 7px #0082E5;
	  cursor: pointer;
	  box-shadow: -100vw 0 0 100vw #00C9C8;
	  border-radius: unset;
	}
	
	.content-box {
	  position: absolute;
	  z-index: 3;
	  width: 100%;
	  display: block;
	  transition: bottom 0.4s ease-out;
	  bottom: 0;
	}
	.content-box.on {
	  bottom: 0vmax;
	}
	.content-box.on_Full::after {
	  content: "";
	  position: absolute;
	  display: block;
	  height: 100vmax;
	  background-color: rgba(0, 0, 0, 0.5);
	  opacity: 1;
	}
	.content-box::after {
	  content: "";
	  left: 0;
	  bottom: 0;
	  width: 100vmin;
	  opacity: 0;
	  z-index: -1;
	  transition: all 0.2s ease-in-out;
	}
	.content-box .content-area {
	  background-color: var(--color-background-gray-subtler);
	  width: 100%;
	  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
	}
	.content-box .content-area > ul {
	  height: 0;
	  transition: all 0.2s ease-in-out;
	  width: 100%;
	  position: relative;
	  overflow: hidden;
	}
	.content-box .content-area > ul.active {
	  height: 35vmax;
	  overflow: unset;
	}
	.content-box .content-area > ul > li {
	  width: 100%;
	  height: 100%;
	  display: flex;
	  align-items: unset;
	  justify-content: unset;
	  flex-direction: column;
	  padding: 0 var(--padding-05);
	}
	.content-box .content-area > ul > li .accordion__list {
	  height: 100%;
	  overflow: auto;
	}
	.content-box .content-area > ul.layer {
	  background-color: #fff;
	}
	.content-box .moving-button-box {
	  text-align: center;
	  z-index: 2;
	  width: 100%;
	  display: none;
	  height: 15px;
	}
	.content-box.on .moving-button-box {
	  display: block;
	}
	
	.content-box .moving-button-box .moving {
	  background-color: #000;
	  border-radius: var(--border-radius-small);
	  bottom: 8px;
	  z-index: -1;
	  display: inline-block;
	  width: 32px;
	  height: 4px;
	  padding: 0;
	}
	
	.widget {
	  position: absolute;
	}
	.widget__top {
	  top: calc(118px + var(--padding-07));
	  right: var(--padding-05);
	}
	.widget__top > ul {
	  display: flex;
	  align-items: unset;
	  justify-content: unset;
	  flex-direction: column;
	  gap: var(--gap-02);
	}
	.widget__top > ul::after {
	  content: none;
	}
	.widget__top > ul > li {
	  display: inline-block;
	  box-shadow: var(--shadow-normal-gray);
	  border-radius: var(--border-radius-small);
	  position: relative;
	}
	.widget__top > ul > li:last-child {
	  margin-right: 0;
	}
	.widget__top > ul > li button {
	  background-color: var(--color-background-tertiary);
	  position: relative;
	  z-index: 1;
	}
	.widget__top > ul > li button::before {
	  content: "";
	  display: block;
	  width: var(--icon-size-small);
	  height: var(--icon-size-small);
	  background-position: center;
	  background-repeat: no-repeat;
	  margin: 0 auto var(--padding-01);
	}
	.widget__top > ul > li button:hover {
	  background-color: var(--color-background-primary-subtler);
	}
	.widget__top > ul > li.active > button {
	  background-color: var(--color-background-primary-subtler);
	}
	.widget__top > ul > li.active .depth {
	  display: block;
	}
	.widget__top .depth {
	  display: none;
	  position: absolute;
	  top: 68px;
	  background: #fff;
	  border-radius: 10px;
	  overflow: hidden;
	  left: 50%;
	  transform: translateX(-50%);
	}
	.widget__top .depth a {
	  display: inline-block;
	  padding: var(--padding-04);
	  font-weight: var(--font-weight-bold);
	  color: var(--color-text-basic);
	}
	.widget__top .depth a:hover {
	  background-color: var(--color-background-primary-subtler);
	}
	.widget__layer::before {
	  background-image: url(../images/map/ico-widget-layer.svg);
	}
	.widget__info::before {
	  background-image: url(../images/map/ico-widget-infomation.svg);
	}
	.widget__boundary::before {
	  background-image: url(../images/map/ico-widget-boundary.svg);
	  background-size: 24px;
	}
	.widget__save::before {
	  background-image: url(../images/map/ico-widget-save.svg);
	  background-size: 24px;
	}
	
	.select__box {
	  margin: var(--padding-05) 0;
	  display: flex;
	  align-items: center;
	  justify-content: unset;
	  flex-direction: row;
	}
	.select__box .name {
	  width: 90px;
	}
	
	.sec__tit {
	  margin-bottom: var(--padding-02);
	  font-size: var(--font-size-heading-xxsmall);
	}
	
	.testmodal {
	  position: absolute;
	  top: 86px;
	}
	
	.legend {
	  position: absolute;
	  right: var(--padding-05);
	  top: 218px;
	}
	.legend__wrap {
	  display: flex;
	  align-items: unset;
	  justify-content: center;
	  flex-direction: row;
	  position: relative;
	  gap: var(--gap-02);
	  background-color: rgba(255, 255, 255, 0.75);
	  padding: var(--padding-02);
	  border-radius: var(--border-radius-small);
	}
	.legend__list {
	  display: flex;
	  align-items: flex-end;
	  justify-content: space-between;
	  flex-direction: column;
	}
	.legend__bar {
	  width: 20px;
	  height: 100px;
	  background-image: linear-gradient(to top, #FFFD00 0%, #FF312F 100%);
	  border-radius: var(--border-radius-small);
	}
}