@charset "UTF-8";
.container {
  margin: 0 auto;
  padding-left: var(--gap);
  padding-right: var(--gap);
  max-width: var(--xl);
}
.container.relative {
  position: relative;
}

.gutter-xxl {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (max-width: 1660px) {
  .gutter-xxl {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }
}

.skip {
  position: relative;
  z-index: 1000;
}
.skip a {
  position: absolute;
  left: 0;
  transform: translateY(-100%);
  transition: all 0.25s;
  width: 100%;
  height: 50px;
  background-color: #000;
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skip a:focus, .skip a:hover {
  transform: translateY(0%);
}

.header {
  position: relative;
  width: 100%;
  height: 8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  z-index: 100;
  background: #fff;
}
@media (max-width: 768px) {
  .header {
    display: none;
  }
}
.header--logo {
  display: block;
  width: 16.2rem;
  height: 3rem;
  background: url("../images/common/bi.png") no-repeat;
  background-size: contain;
}
@media (max-width: 1170px) {
  .header--logo {
    width: 11.8rem;
    height: 2rem;
  }
}
.header--util .parent-btn {
  display: inline-block;
  font-size: 1.5rem;
  height: 4rem;
  line-height: 4rem;
  border: 1px solid #2b316b;
  color: #2b316b;
  padding: 0 2rem;
  border-radius: 0.4rem;
}
@media (max-width: 1170px) {
  .header--util .parent-btn {
    height: 3rem;
    line-height: 3rem;
    font-size: 1.3rem;
    padding: 0 1rem;
  }
}
.header--util .parent-btn i {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(../images/common/head-util-arrow.png);
  margin-left: 1rem;
}
.header--mega--menu .mega-menu-content {
  position: absolute;
  width: 100%;
  background: #f0f0f0;
  top: 8rem;
  left: 0;
  opacity: 0;
  visibility: hidden;
  padding: 20px;
  transition: all 0.3s;
}
.header--mega--menu .mega-menu-content.active {
  display: block;
  opacity: 1;
  visibility: inherit;
}
.header--mega--menu .mega-menu-content.cs-type01 ul li a:hover, .header--mega--menu .mega-menu-content.cs-type01 ul li a:focus, .header--mega--menu .mega-menu-content.cs-type01 ul li a.active {
  background-color: #c8553e;
}
.header--mega--menu .mega-menu-content.cs-type02 ul li a:hover, .header--mega--menu .mega-menu-content.cs-type02 ul li a:focus, .header--mega--menu .mega-menu-content.cs-type02 ul li a.active {
  background-color: #64940e;
}
.header--mega--menu .mega-menu-content.cs-type03 ul li a:hover, .header--mega--menu .mega-menu-content.cs-type03 ul li a:focus, .header--mega--menu .mega-menu-content.cs-type03 ul li a.active {
  background-color: #0868ac;
}
.header--mega--menu .mega-menu-content.cs-type04 ul li a:hover, .header--mega--menu .mega-menu-content.cs-type04 ul li a:focus, .header--mega--menu .mega-menu-content.cs-type04 ul li a.active {
  background-color: #35645e;
}
.header--mega--menu ul {
  display: flex;
  gap: 3rem;
  width: 1410px;
  margin: auto;
}
@media (max-width: 1170px) {
  .header--mega--menu ul {
    width: 100%;
  }
}
.header--mega--menu ul li {
  flex: 1;
}
.header--mega--menu ul li a {
  display: block;
  border-radius: 0.6rem;
  height: 6rem;
  line-height: 6rem;
  text-align: center;
  border: 1px solid #c6c6c6;
  background: #fff;
  font-size: 1.5rem;
  transition: all 0.3s;
}
@media (max-width: 1170px) {
  .header--mega--menu ul li a {
    font-size: 1.3rem;
  }
}
.header--mega--menu ul li a:hover {
  background-image: url(../images/common/megamenu-bg.png);
  background-color: #64940e;
  color: #fff;
  background-repeat: no-repeat;
  background-position: 5px -10px;
}
.header nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.header nav .gnb {
  display: flex;
}
.header nav .gnb li {
  position: relative;
  padding: 0 50px;
}
@media (max-width: 1170px) {
  .header nav .gnb li {
    padding: 0 25px;
  }
}
.header nav .gnb li:after {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  content: "";
  width: 6px;
  height: 16px;
  background-image: url(../images/common/slash.png);
}
.header nav .gnb li:first-child::after {
  display: none;
}
.header nav .gnb li.cs-type01 button:hover, .header nav .gnb li.cs-type01 button:focus, .header nav .gnb li.cs-type01 button.active {
  color: #c8553e;
}
.header nav .gnb li.cs-type02 button:hover, .header nav .gnb li.cs-type02 button:focus, .header nav .gnb li.cs-type02 button.active {
  color: #64940e;
}
.header nav .gnb li.cs-type03 button:hover, .header nav .gnb li.cs-type03 button:focus, .header nav .gnb li.cs-type03 button.active {
  color: #0868ac;
}
.header nav .gnb li.cs-type04 button:hover, .header nav .gnb li.cs-type04 button:focus, .header nav .gnb li.cs-type04 button.active {
  color: #35645e;
}
.header nav .gnb li button {
  font-size: 1.9rem;
  transition: all 0.3s;
  font-weight: bold;
}
@media (max-width: 1170px) {
  .header nav .gnb li button {
    font-size: 1.5rem;
  }
}

.dimmed {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}
.dimmed.active {
  opacity: 1;
  visibility: inherit;
  z-index: 90;
  background: rgba(0, 0, 0, 0.5);
}

.tar {
  text-align: right;
}

.mb0 {
  margin-bottom: 0 !important;
}

.p0 {
  padding: 0 !important;
}

.mb12 {
  margin-bottom: 1.2rem !important;
}

.mb18 {
  margin-bottom: 1.8rem !important;
}

.mb30 {
  margin-bottom: 3rem !important;
}

.mb40 {
  margin-bottom: 4rem !important;
}

.red {
  color: #d22c2c;
}

.blue {
  color: #164194;
}

.green {
  color: #46a540;
}

.purple {
  color: #8041d9;
}

.black {
  color: #1d1d1d;
}

.row {
  margin-bottom: 3rem;
}

.box {
  overflow: hidden;
  border-radius: 1.2rem;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background: #fff;
}
.box.boder {
  border: 1px solid #164194;
}
.box.scroll--box {
  height: calc(100vh - 4rem - 4rem - 10.3rem - 8rem);
}
.box.question-box {
  background: #c4ccd7;
}
.box .box-inner {
  padding: 3rem 4rem;
}

.heading-40 {
  font-size: 4rem !important;
}

.heading-32 {
  font-size: 3.2rem !important;
}

.heading-25 {
  font-weight: normal !important;
  font-size: 2.5rem !important;
}

.heading-21 {
  font-weight: normal !important;
  font-size: 2.1rem !important;
}

.heading-19 {
  font-weight: normal !important;
  font-size: 1.9rem !important;
}

.heading-17 {
  font-weight: normal !important;
  font-size: 1.7rem !important;
}

.bold {
  font-weight: bold !important;
}

.item--dl > dt {
  font-size: 1.5rem;
  color: #1d1d1d;
  margin-bottom: 0.8rem;
}
@media (max-width: 768px) {
  .item--dl > dt {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
  }
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.legend-item dt {
  display: flex;
  align-items: center;
  width: 2rem;
  height: 2rem;
}
@media (max-width: 768px) {
  .legend-item dt {
    font-size: 1.1rem;
  }
}
.legend-item dd {
  flex: 1;
  font-size: 1.3rem;
  color: #717171;
}
@media (max-width: 768px) {
  .legend-item dd {
    font-size: 1.1rem;
  }
}
.legend-item + dl {
  margin-top: 0.8rem;
}
@media (max-width: 768px) {
  .legend-item + dl {
    margin-top: 0.4rem;
  }
}

.toggle-cont-info {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #e4e4e4;
}
.toggle-cont-info p {
  color: #1d1d1d;
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}
@media (max-width: 768px) {
  .toggle-cont-info p {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
  }
}
.toggle-cont-info dl {
  display: flex;
  gap: 0.6rem;
}
.toggle-cont-info dl dt {
  color: #1d1d1d;
  font-size: 1.3rem;
}
@media (max-width: 768px) {
  .toggle-cont-info dl dt {
    font-size: 1.1rem;
  }
}
.toggle-cont-info dl dd {
  color: #717171;
  font-size: 1.3rem;
}
@media (max-width: 768px) {
  .toggle-cont-info dl dd {
    font-size: 1.1rem;
  }
}

.item--check {
  padding: 0.9rem;
  border: 1px solid #d8d8d8;
  border-radius: 0.6rem;
}
@media (max-width: 768px) {
  .item--check {
    padding: 0.45rem;
  }
}
.item--check + * {
  margin-top: 0.6rem;
}
@media (max-width: 768px) {
  .item--check + * {
    padding-top: 0.3rem;
  }
}

.slider-container {
  width: 100%;
  text-align: center;
}

.range-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(to right, #333 50%, #ddd 50%);
  outline: none;
  transition: background 0.2s;
  cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #333;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-transition: transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
}
.range-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #333;
  border-radius: 50%;
  cursor: pointer;
  -moz-transition: transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
}
.range-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.range-slider:hover::-moz-range-thumb {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.range-slider:active::-webkit-slider-thumb {
  transform: scale(1.4);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.range-slider:active::-moz-range-thumb {
  transform: scale(1.4);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.value-labels {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.toggle-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}
.toggle-label input[type=checkbox] {
  display: none;
}
.toggle-label input[type=checkbox]:checked + .toggle-custom::before {
  transform: translateX(20px);
}
@media (max-width: 768px) {
  .toggle-label input[type=checkbox]:checked + .toggle-custom::before {
    transform: translateX(10px);
  }
}
.toggle-label .toggle-custom {
  position: relative;
  width: 40px;
  height: 20px;
  background-color: #ccc;
  border-radius: 20px;
  margin-right: 8px;
  transition: background-color 0.3s ease;
}
@media (max-width: 768px) {
  .toggle-label .toggle-custom {
    margin-right: 4px;
    width: 20px;
    height: 10px;
  }
}
.toggle-label .toggle-custom::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
@media (max-width: 768px) {
  .toggle-label .toggle-custom::before {
    left: 1px;
    top: 1px;
    width: 8px;
    height: 8px;
  }
}

/* Tooltip */
.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 1;
}
.tooltip-container .ico-tooltip {
  background-image: url("../images/common/ico-info.png");
  width: 1.6rem;
  height: 1.7rem;
  transition: all 0.3s;
}
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.tooltip-container:hover .tooltip-text:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.tooltip-container.active .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.tooltip-container.active .ico-tooltip {
  background-image: url("../images/common/ico-info02.png");
}
.tooltip-container:hover .ico-tooltip {
  background-image: url("../images/common/ico-info02.png");
}

.tooltip-cont {
  max-width: 260px;
  background-color: #fff;
  color: #555555;
  border-radius: 6px;
  padding: 15px;
  position: absolute;
  z-index: 100;
  top: 145%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  word-break: break-all;
}
.tooltip-cont::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.tooltip-cont .tooltip-cont-ti {
  font-size: 13px;
  color: #1d1d1d;
  margin-bottom: 1.5rem;
}
.tooltip-cont .tooltip-cont-txt {
  font-size: 1.3rem;
  color: #717171;
  margin-bottom: 1.5rem;
}
.tooltip-cont .tooltip-cont-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tooltip-cont .tooltip-cont-link a {
  color: #1d1d1d;
  font-size: 1.3rem;
}
.tooltip-cont .tooltip-cont-link a:after {
  display: inline-block;
  content: "";
  width: 0.6rem;
  height: 1rem;
  background-image: url("../images/panel/link-arrow.png");
}

.weather-cast-item .weather-cast-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.3rem;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-info {
    margin-bottom: 0.75rem;
  }
}
.weather-cast-item .weather-cast-info .address {
  font-size: 1.7rem;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-info .address {
    font-size: 1.4rem;
  }
}
.weather-cast-item .weather-cast-info .time {
  font-size: 1.5rem;
  color: #717171;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-info .time {
    font-size: 1.2rem;
  }
}
.weather-cast-item .weather-cast-news {
  background: rgba(210, 44, 44, 0.08);
  border-radius: 0.6rem;
  padding: 1.2rem 1.6rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-news {
    font-size: 1.2rem;
    padding: 1rem;
  }
}
.weather-cast-item .weather-cast-news span {
  color: #d22c2c;
}
.weather-cast-item .weather-cast-news p {
  color: #1d1d1d;
  flex: 1;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-news p {
    font-size: 1.2rem;
  }
}
.weather-cast-item .weather-cast-today {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-today {
    margin-bottom: 0.75rem;
  }
}
.weather-cast-item .weather-cast-today > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.weather-cast-item .weather-cast-today > div img {
  max-width: 100%;
}
.weather-cast-item .weather-cast-today > div b {
  font-size: 4rem;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-today > div b {
    font-size: 2rem;
  }
}
.weather-cast-item .weather-cast-today > div b sub {
  vertical-align: top;
}
.weather-cast-item .weather-cast-today dl {
  margin-left: 2rem;
}
.weather-cast-item .weather-cast-today dl dt {
  font-size: 1.7rem;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-today dl dt {
    font-size: 1.3rem;
  }
}
.weather-cast-item .weather-cast-today dl dd {
  font-size: 1.7rem;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-today dl dd {
    font-size: 1.3rem;
  }
}
.weather-cast-item .weather-cast-today dl dd sub {
  vertical-align: top;
}
.weather-cast-item .weather-cast-flex-3 {
  display: flex;
  gap: 0.8rem;
}
.weather-cast-item .weather-cast-flex-3 > dl {
  flex: 1;
  text-align: center;
  background: #f0f0f0;
  padding: 1.2rem;
  border-radius: 0.4rem;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-flex-3 > dl {
    padding: 0.8rem;
  }
}
.weather-cast-item .weather-cast-flex-3 > dl dt {
  color: #555555;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-flex-3 > dl dt {
    font-size: 1.2rem;
  }
}
.weather-cast-item .weather-cast-flex-3 > dl dd {
  color: #1d1d1d;
  font-weight: bold;
}
.weather-cast-item .weather-cast-flex-3 > dl dd sub {
  vertical-align: top;
}
@media (max-width: 768px) {
  .weather-cast-item .weather-cast-flex-3 > dl dd {
    font-size: 1.2rem;
  }
}

/* mark-info */
.mark-info {
  border: 1px solid #f0f0f0;
  background: #f8f8f8;
  border-radius: 4px;
  padding: 11px;
  margin-bottom: 8px;
}
.mark-info p {
  position: relative;
  color: #555555;
  font-size: 15px;
  padding-left: 26px;
}
.mark-info p::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  content: "";
  background-image: url(../images/ico/mark-info-ico.png);
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
}

.sub-ti {
  position: relative;
  font-size: 1.3rem;
  color: #1d1d1d;
  padding-left: 0.6rem;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .sub-ti {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
}
.sub-ti:after {
  position: absolute;
  left: 0;
  top: 0.7rem;
  display: block;
  content: "";
  width: 0.2rem;
  height: 0.2rem;
  background: #1d1d1d;
}

.pdl-type01 {
  background: #f0f0f0;
  border-radius: 0.4rem;
  padding: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .pdl-type01 {
    padding: 0.9rem;
  }
}
.pdl-type01 + dl {
  margin-top: 0.4rem;
}
.pdl-type01 dt {
  position: relative;
  padding-left: 1.5rem;
}
@media (max-width: 768px) {
  .pdl-type01 dt {
    font-size: 1.2rem;
  }
}
.pdl-type01 dt:after {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #c6c6c6;
}
@media (max-width: 768px) {
  .pdl-type01 dd {
    font-size: 1.2rem;
  }
}
.pdl-type01 sup {
  font-size: 9px;
}

.layer--pop {
  border: 1px solid #1d1d1d;
  background: #fff;
  padding: 1.5rem;
  border-radius: 0.4rem;
}
@media (max-width: 768px) {
  .layer--pop {
    padding: 0.8rem;
  }
}
.layer--pop--head {
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .layer--pop--head {
    padding-bottom: 0.5rem;
  }
}
.layer--pop--head h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .layer--pop--head h3 {
    font-size: 1.2rem;
  }
}
.layer--pop--head .close img {
  vertical-align: middle;
}
.layer--pop--head.board {
  border-bottom: 1px solid #c6c6c6;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .layer--pop--head.board {
    margin-bottom: 0.5rem;
  }
}
.layer--pop--body.biotope dd {
  font-size: 1.7rem;
  color: #64940e;
  font-weight: bold;
}
@media (max-width: 768px) {
  .layer--pop--body.biotope dd {
    font-size: 1.3rem;
  }
}
.layer--pop--dl {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .layer--pop--dl {
    gap: 1.5rem;
  }
}
.layer--pop--dl + dl {
  margin-top: 1rem;
}
.layer--pop--dl dt {
  font-size: 1.3rem;
  color: #555555;
}
@media (max-width: 768px) {
  .layer--pop--dl dt {
    font-size: 1.1rem;
  }
}
.layer--pop--dl dd {
  font-weight: bold;
}

.chart-dl-wrap {
  border: 1px solid #c6c6c6;
  border-radius: 0.6rem;
  padding: 1.5rem;
}
.chart-dl-wrap .chart-dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .chart-dl-wrap .chart-dl {
    padding: 0.9rem;
  }
}
.chart-dl-wrap .chart-dl dt {
  position: relative;
  padding-left: 1.5rem;
}
@media (max-width: 768px) {
  .chart-dl-wrap .chart-dl dt {
    font-size: 1.2rem;
  }
}
.chart-dl-wrap .chart-dl dt:after {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #c6c6c6;
}

.poi {
  cursor: pointer;
}

.guide-wrap {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}
.guide-wrap img {
  display: block;
}
@media (max-width: 1170px) {
  .guide-wrap {
    display: none;
  }
}

.guide-ti {
  display: inline-block;
  position: relative;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
}
.guide-ti::after {
  position: absolute;
  left: -22px;
  top: 3px;
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  background-image: url(../images/guide/ti_ico.png);
}

.guide-box {
  position: absolute;
  padding: 24px 24px 24px 46px;
  border-radius: 16px;
}
.guide-box.gnb {
  top: 100px;
  left: -50px;
  border: 1px solid rgba(67, 162, 202, 0.4);
  background: rgba(67, 162, 202, 0.05);
}
.guide-box.position {
  top: 125px;
  right: 315px;
  width: 205px;
  border: 1px solid rgba(93, 149, 143, 0.4);
  background: rgba(93, 149, 143, 0.05);
}
.guide-box.search {
  top: 150px;
  left: 90px;
  width: 395px;
  border: 1px solid rgba(200, 85, 62, 0.4);
  background: rgba(200, 85, 62, 0.05);
}
.guide-box.snb {
  top: 410px;
  left: 200px;
  width: 320px;
  border: 1px solid rgba(254, 218, 110, 0.4);
  background: rgba(254, 218, 110, 0.05);
}
.guide-box.tool {
  width: 320px;
  right: 75px;
  top: 135px;
  border: 1px solid rgba(147, 191, 59, 0.4);
  background: rgba(147, 191, 59, 0.05);
}
.guide-box p {
  font-size: 12px;
  color: #fff;
  line-height: 1.5;
}

.guide-gnb {
  position: absolute;
  left: 50%;
  top: 7px;
  transform: translateX(-55%);
}

.guide-search {
  position: absolute;
  left: 80px;
  top: 90px;
}

.guide-position {
  position: absolute;
  right: 10px;
  top: 90px;
}

.guide-tool {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-80%);
}

.guide-snb {
  position: absolute;
  left: 0px;
  top: 80px;
}

.guid-center {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -30%);
}
.guid-center img {
  margin-bottom: 10px;
}
.guid-center button {
  background: none;
  border: 1px solid #fff;
  border-radius: 10px;
  width: 160px;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  height: 50px;
  line-height: 1;
}
.guid-center button + button {
  margin-left: 5px;
}

.twin--map {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 7rem);
  height: calc(100% - 8rem);
  display: flex;
}
.twin--map--wrap {
  position: relative;
  width: 50%;
}
.twin--map--foot {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.form-group {
  display: flex;
  gap: 1rem;
}
.form-group select {
  min-width: 10rem;
}

.tool-section .tool-top {
  position: absolute;
  top: 10rem;
  right: 2rem;
  display: flex;
  gap: 1.2rem;
}
@media (max-width: 768px) {
  .tool-section .tool-top {
    top: 6rem;
    right: 1rem;
  }
}
.tool-section .tool-top .address-select {
  display: flex;
}
.tool-section .tool-top .address-select .form-control {
  width: 16rem;
  border-radius: 0.6rem 0 0 0.6rem;
}
@media (max-width: 768px) {
  .tool-section .tool-top .address-select .form-control {
    width: 8rem;
  }
}
.tool-section .tool-top .address-select .form-control + .form-control {
  border-left: none;
  border-radius: 0 0.6rem 0.6rem 0;
}
.tool-section .tool-top .map-option-toggle {
  display: flex;
  border: 1px solid #d8d8d8;
  border-radius: 0.4rem;
  background: #Fff;
  padding: 0.3rem;
}
.tool-section .tool-top .map-option-toggle button {
  padding: 0.7rem 0.8rem;
  font-size: 1.5rem;
  border-radius: 0.46rem;
  color: #555555;
}
.tool-section .tool-top .map-option-toggle button.active {
  background: #2d2d2d;
  color: #fff;
}
.tool-section .tool-top .api-link {
  position: relative;
  background: #fff;
  height: 40px;
  line-height: 4rem;
  border-radius: 0.4rem;
  padding: 0 2rem;
}
.tool-section .tool-top .api-link::after {
  position: absolute;
  right: 0.3rem;
  top: 0.3rem;
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
}
.tool-section .tool-top .api-link.climate-type {
  color: #c8553e;
}
.tool-section .tool-top .api-link.climate-type::after {
  border-top: 6px solid #c8553e;
}
.tool-section .tool-top .api-link.carbon-type {
  color: #64940e;
}
.tool-section .tool-top .api-link.carbon-type::after {
  border-top: 6px solid #64940e;
}
.tool-section .tool-top .api-link.energy-type {
  color: #0868ac;
}
.tool-section .tool-top .api-link.energy-type::after {
  border-top: 6px solid #0868ac;
}
.tool-section .tool-top .api-link.score-type {
  color: #35645e;
}
.tool-section .tool-top .api-link.score-type::after {
  border-top: 6px solid #35645e;
}
.tool-section .tool-middle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
}
@media (max-width: 768px) {
  .tool-section .tool-middle {
    top: 25.5rem;
    right: 1rem;
  }
}
.tool-section .tool-bottom {
  position: absolute;
  bottom: 8.2rem;
  right: 2rem;
}
.tool-section .tool > li {
  position: relative;
  width: 4rem;
  height: 4rem;
  background: #fff;
  padding: 0.2rem;
}
.tool-section .tool > li > button {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0.9rem;
  text-align: center;
  color: #222222;
  padding-top: 2rem;
  line-height: 1;
  background-repeat: no-repeat;
  background-position: center 0.5rem;
}
.tool-section .tool > li:first-child {
  border-radius: 4px 4px 0 0;
}
.tool-section .tool > li:last-child {
  border-radius: 0 0 4px 4px;
}
.tool-section .tool > li.active > button, .tool-section .tool > li:hover > button {
  transition: all 0.3s;
  background-color: #000;
  border-radius: 0.2rem;
  color: #fff;
}
.tool-section .tool > li + li {
  border-top: 1px solid #e5e5e5;
}
.tool-section .tool > li.active .tool--layer {
  display: block;
}
.tool-section .tool.single > li {
  border-radius: 6px;
}
.tool-section .tool + .tool {
  margin-top: 8px;
}
@media (max-width: 768px) {
  .tool-section .tool.mobile-single > li {
    border-radius: 6px;
  }
}
.tool-section .tool--setting > button {
  background-image: url("../images/ico/ico-tool01.png");
}
.tool-section .tool--setting.active > button, .tool-section .tool--setting:hover > button {
  background-image: url("../images/ico/ico-tool01-on.png");
}
.tool-section .tool--2d > button {
  background-image: url("../images/ico/ico-tool02.png");
}
.tool-section .tool--2d.active > button, .tool-section .tool--2d:hover > button {
  background-image: url("../images/ico/ico-tool02-on.png");
}
.tool-section .tool--3d > button {
  background-image: url("../images/ico/ico-tool03.png");
}
.tool-section .tool--3d.active > button, .tool-section .tool--3d:hover > button {
  background-image: url("../images/ico/ico-tool03-on.png");
}
.tool-section .tool--distance > button {
  background-image: url("../images/ico/ico-tool04.png");
}
.tool-section .tool--distance.active > button, .tool-section .tool--distance:hover > button {
  background-image: url("../images/ico/ico-tool04-on.png");
}
.tool-section .tool--area > button {
  background-image: url("../images/ico/ico-tool05.png");
}
.tool-section .tool--area.active > button, .tool-section .tool--area:hover > button {
  background-image: url("../images/ico/ico-tool05-on.png");
}
.tool-section .tool--radius > button {
  background-image: url("../images/ico/ico-tool06.png");
}
.tool-section .tool--radius.active > button, .tool-section .tool--radius:hover > button {
  background-image: url("../images/ico/ico-tool06-on.png");
}
.tool-section .tool--height > button {
  background-image: url("../images/ico/ico-tool07.png");
}
.tool-section .tool--height.active > button, .tool-section .tool--height:hover > button {
  background-image: url("../images/ico/ico-tool07-on.png");
}
.tool-section .tool--save > button {
  background-image: url("../images/ico/ico-tool08.png");
}
.tool-section .tool--save:hover > button {
  background-image: url("../images/ico/ico-tool08-on.png");
}
.tool-section .tool--print > button {
  background-image: url("../images/ico/ico-tool09.png");
}
.tool-section .tool--print:hover > button {
  background-image: url("../images/ico/ico-tool09-on.png");
}
.tool-section .tool--share > button {
  background-image: url("../images/ico/ico-tool10.png");
}
.tool-section .tool--share:hover > button {
  background-image: url("../images/ico/ico-tool10-on.png");
}
.tool-section .tool--topic > button {
  background-image: url("../images/ico/ico-tool11.png");
}
.tool-section .tool--topic.active > button, .tool-section .tool--topic:hover > button {
  background-image: url("../images/ico/ico-tool11-on.png");
}

.tool--layer {
  display: none;
  position: absolute;
  width: 30rem;
  top: 0;
  right: 50px;
  background: #fff;
  border: 1px solid #2d2d2d;
  border-radius: 0.6rem;
}
@media (max-width: 768px) {
  .tool--layer {
    width: 24rem;
  }
}
.tool--layer--head {
  background: #000;
  height: 4.8rem;
  padding: 1.5rem 2rem;
  border-radius: 0.4rem 0.4rem 0 0;
}
@media (max-width: 768px) {
  .tool--layer--head {
    height: 2.8rem;
    padding: 0.75rem 1rem;
  }
}
.tool--layer--head h3 {
  font-size: 1.7rem;
  color: #fff;
  line-height: 1;
}
@media (max-width: 768px) {
  .tool--layer--head h3 {
    font-size: 1.3rem;
  }
}
.tool--layer--search {
  background: #f0f0f0;
  padding: 1rem 2rem;
  display: flex;
  gap: 0.8rem;
}
@media (max-width: 768px) {
  .tool--layer--search {
    padding: 0.5rem 1rem;
  }
}
.tool--layer--search input {
  flex: 1;
  width: 100%;
}
.tool--layer--search button {
  width: 6.6rem;
}
@media (max-width: 768px) {
  .tool--layer--search button {
    width: auto;
  }
}
.tool--layer--cont {
  padding: 2rem;
  max-height: 31.5rem;
}
@media (max-width: 768px) {
  .tool--layer--cont {
    padding: 1rem;
    max-height: 18.5rem;
  }
}
.tool--layer--ti {
  font-size: 1.5rem;
  color: #1d1d1d;
  font-weight: normal;
  margin-bottom: 1.2rem;
}
@media (max-width: 768px) {
  .tool--layer--ti {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
  }
}
.tool--layer--box {
  margin-bottom: 1.5rem;
}

.topic--li--item--ti {
  position: relative;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1rem 0;
  cursor: pointer;
}
@media (max-width: 768px) {
  .topic--li--item--ti {
    padding: 0.5rem 0;
    font-size: 1.2rem;
  }
}
.topic--li--item--ti.active:after {
  content: "+";
}
@media (max-width: 768px) {
  .topic--li--item--ti.active:after {
    font-size: 1.1rem;
  }
}
.topic--li--item--ti.active + .topic--li--item--cont {
  display: block;
}
.topic--li--item--ti:after {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "-";
  display: block;
}
.topic--li--item--cont {
  display: none;
}
.topic--li--item--cont .form-radio em {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}
.topic--li--item--cont .form-radio em img {
  max-width: 100%;
}

.btn-api01 {
  position: absolute;
  right: 10px;
  bottom: 1rem;
  width: 5.7rem;
  height: 5.7rem;
  text-align: center;
  line-height: 5.7rem;
  font-size: 1.7rem;
  font-weight: bold;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  letter-spacing: 1px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.btn-api01.climate-type {
  background: #c8553e;
}
.btn-api01.carbon-type {
  background: #64940e;
}
.btn-api01.energy-type {
  background: #0868ac;
}
.btn-api01.score-type {
  background: #35645e;
}
@media (max-width: 768px) {
  .btn-api01 {
    display: none !important;
  }
}

.btn-api02 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  border: 1px solid #fff;
}
@media (max-width: 768px) {
  .btn-api02 {
    display: none !important;
  }
}

.map-option-item {
  display: flex;
  gap: 0.7rem;
}
.map-option-item li {
  width: 5rem;
  text-align: center;
  cursor: pointer;
}
.map-option-item li .map-option-item-bg {
  position: relative;
  height: 5rem;
  background-repeat: no-repeat;
  background-size: contain;
}
.map-option-item li.map-option-item01 .map-option-item-bg {
  background-image: url("../images/modal/map-option-item01.png");
}
.map-option-item li.map-option-item02 .map-option-item-bg {
  background-image: url("../images/modal/map-option-item02.png");
}
.map-option-item li.map-option-item03 .map-option-item-bg {
  background-image: url("../images/modal/map-option-item03.png");
}
.map-option-item li.map-option-item04 .map-option-item-bg {
  background-image: url("../images/modal/map-option-item04.png");
}
.map-option-item li span {
  font-size: 1.2rem;
  color: #555555;
}
@media (max-width: 768px) {
  .map-option-item li span {
    font-size: 0.9rem;
  }
}
.map-option-item li.active .map-option-item-bg:after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url("../images/modal/map-option-item-check.png");
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #2d2d2d;
  border-radius: 0.4rem;
  box-sizing: border-box;
}
.map-option-item li.active span {
  font-weight: bold;
}

.footer {
  width: 100%;
  align-items: center;
  background: #000;
}
.footer--family--container {
  display: flex;
  justify-content: flex-end;
  width: 144rem;
  margin: 0 auto;
  padding: 1.2rem 0;
  background: #000;
}
.footer--family--container select {
  height: 4rem;
  border-radius: 2rem;
  min-width: 24rem;
}
@media (max-width: 768px) {
  .footer--family--container {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .footer--logo img {
    width: 50%;
  }
}
.footer .footer-sitemap {
  background: #111111;
}
@media (max-width: 768px) {
  .footer .footer-sitemap {
    display: none;
  }
}
.footer .footer-sitemap .footer-sitemap-inner {
  width: 930px;
  margin: auto;
  display: flex;
  gap: 3rem;
  padding-top: 10rem;
  padding-bottom: 6rem;
}
.footer .footer-sitemap ul {
  flex: 1;
}
.footer .footer-sitemap ul li:first-child strong {
  display: block;
  color: #ffffff;
  font-size: 2.1rem;
  padding-bottom: 3rem;
  margin-bottom: 3.5rem;
  border-bottom: 3px solid #2b316a;
}
.footer .footer-sitemap ul li + li {
  margin-bottom: 3rem;
}
.footer .footer-sitemap ul li a {
  position: relative;
  color: #717171;
  font-size: 1.7rem;
  transition: all 0.3s;
}
.footer .footer-sitemap ul li a:hover {
  color: #fff;
}
.footer .footer-sitemap ul li a.foot-ico-link:after {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  content: "";
  width: 14px;
  height: 15px;
  background-image: url("../images/ico/ico-foot-link.png");
}
.footer--container {
  display: flex;
  align-items: center;
  gap: 8rem;
  width: 144rem;
  margin: 0 auto;
  padding: 4rem 0 3rem;
  color: #717171;
  background-repeat: no-repeat;
  background-position: 0 center;
}
@media (max-width: 768px) {
  .footer--container {
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    gap: 2.5rem;
    margin: 0 4rem;
  }
}
.footer--addr {
  display: flex;
  font-size: 1.7rem;
  margin-bottom: 1.2rem;
}
@media (max-width: 768px) {
  .footer--addr {
    display: inline-block;
  }
  .footer--addr * {
    display: inline !important;
    word-break: break-all;
    font-size: 1.4rem;
  }
}
.footer--addr dl {
  display: flex;
  color: #717171;
}
.footer--addr dl dt {
  font-weight: bold;
  margin-right: 0.5rem;
}
@media (max-width: 768px) {
  .footer--addr dl {
    flex-direction: column;
  }
}
.footer--addr span {
  display: inline-block;
  margin: 0 0.5rem;
  color: #C6C6C6;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .footer--addr span {
    margin: 0 0.2rem;
  }
}
.footer--copy {
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .footer--copy {
    font-size: 1.2rem;
  }
}

.icon {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  text-indent: -9999px;
}
.icon-del._white {
  display: inline-block;
  vertical-align: middle;
  background-image: url("../images/icon/icon-del-white.png");
  width: 1.4rem;
  height: 1.4rem;
  background-repeat: no-repeat;
  background-position: 0 0;
}
@media (max-width: 768px) {
  .icon-del._white {
    width: 1.2rem;
    height: 1.2rem;
    background-size: cover;
    background-position: 50% 50%;
  }
}
.icon-close._white {
  display: inline-block;
  vertical-align: middle;
  background-image: url("../images/icon/icon-close-white.png");
  width: 1.4rem;
  height: 1.4rem;
  background-repeat: no-repeat;
  background-position: 0 0;
}
@media (max-width: 768px) {
  .icon-close._white {
    width: 1.2rem;
    height: 1.2rem;
    background-size: cover;
    background-position: 50% 50%;
  }
}
.icon-window._white {
  display: inline-block;
  vertical-align: middle;
  background-image: url("../images/icon/icon-window-white.png");
  width: 1.4rem;
  height: 1.4rem;
  background-repeat: no-repeat;
  background-position: 0 0;
}
@media (max-width: 768px) {
  .icon-window._white {
    width: 1.2rem;
    height: 1.2rem;
    background-size: cover;
    background-position: 50% 50%;
  }
}
.icon-download._white {
  display: inline-block;
  vertical-align: middle;
  background-image: url("../images/icon/icon-download-white.png");
  width: 1.9rem;
  height: 1.9rem;
  background-repeat: no-repeat;
  background-position: 0 0;
}
@media (max-width: 768px) {
  .icon-download._white {
    width: 1.2rem;
    height: 1.2rem;
    background-size: cover;
    background-position: 50% 50%;
  }
}

.ico-bul {
  background-image: url("../images/common/ti-bul.png");
  width: 1.1rem;
  height: 1.1rem;
  background-size: contain;
}
@media (max-width: 768px) {
  .ico-bul {
    width: 0.7rem;
    height: 0.7rem;
  }
}

.ico-api {
  background-image: url("../images/ico/api-ico-20@13.png");
  width: 2rem;
  height: 1.3rem;
}

.close-btn {
  background-image: url("../images/common/panel-close.png");
  width: 1.4rem;
  height: 1.4rem;
}

.ico-news {
  background-image: url("../images/ico/ico-breaking.png");
  width: 2rem;
  height: 1.6rem;
}

.badge {
  display: inline-block;
  height: 3.2rem;
  line-height: 3.2rem;
  padding: 0 2rem;
  font-size: 1.5rem;
  border-radius: 1.6rem;
}
.badge.small {
  height: 2.4rem;
  padding: 0 1rem;
  line-height: 2.4rem;
  border-radius: 1.2rem;
  font-size: 1.3rem;
}
.badge.primary {
  background: #d0d9ea;
  color: #164194;
}
.badge.danger {
  background: #f6cccc;
  color: #d93333;
}
.badge.green {
  background: #d5ead7;
  color: #419c48;
}
.badge.sky {
  background: #ccecf9;
  color: #009fe3;
}
.badge.yellow {
  background: #fdedcc;
  color: #ff9600;
}
.badge.grey {
  background: #dddddd;
  color: #575756;
}
.badge.border-primary {
  border: 1px solid #d0d9ea;
  color: #164194;
  background: #fff;
}
.badge.border-green {
  border: 1px solid #d5ead7;
  color: #164194;
  background: #fff;
}
.badge.border-danger {
  border: 1px solid #f6cccc;
  color: #d40000;
  background: #fff;
}

.form-control {
  position: relative;
  border-radius: 0.6rem;
  border: 1px solid #c6c6c6;
  height: 3.2rem;
  padding: 0 1rem;
  background: #fff;
  color: #555555;
}
.form-control.lg {
  height: 4.8rem;
}
.form-control.md {
  height: 4rem;
}
@media (max-width: 768px) {
  .form-control.md {
    height: 3.2rem;
    font-size: 1.1rem;
  }
}
.form-control.block {
  display: block;
  width: 100%;
}
.form-control.search {
  border-radius: 0.4rem;
  height: 4.8rem;
  border: transparent;
}
@media (max-width: 768px) {
  .form-control.search {
    height: 3.8rem;
  }
  .form-control.search input::-moz-placeholder {
    font-size: 1.3rem;
  }
  .form-control.search input::placeholder {
    font-size: 1.3rem;
  }
}
.form-control.search input {
  border: none;
  flex: 1;
  height: 100%;
  width: calc(100% - 40px);
  font-size: 1.7rem;
}
@media (max-width: 768px) {
  .form-control.search input {
    font-size: 1.3rem;
  }
}
.form-control.search .serch-btn {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  background: url("../images/common/search-btn.png") no-repeat;
  border: none;
}
@media (max-width: 768px) {
  .form-control.search .serch-btn {
    right: 1rem;
  }
}
.form-control.disable {
  background: #d8d8d8;
  color: #9e9e9e;
}
.form-control .eye-btn {
  position: absolute;
  right: 1.2rem;
  width: 2.5rem;
  height: 2.1rem;
  background: url("../images/login/eye_on.png") no-repeat;
  background-position: 0 2px;
}
.form-control .eye-btn.active {
  background: url("../images/login/eye_close.png") no-repeat;
}
.form-control.flex-control {
  display: flex;
  align-items: center;
  padding: 0 6rem 0 1rem;
}
.form-control.flex-control input {
  border: none;
  height: calc(100% - 0.2rem);
  flex: 1;
}

.form-flex {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.form-flex .form-control {
  width: 50%;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #fff url("../images/common/select-arrow.png") no-repeat right 10px center !important;
}

.form-type {
  margin-bottom: 2rem;
}
.form-type dt {
  position: relative;
  font-size: 1.7rem;
  margin-bottom: 1.1rem;
}
.form-type dt span {
  display: inline-block;
  width: 0.8rem;
  height: 1.2rem;
  vertical-align: middle;
}
.form-type dd {
  color: #1d1d1d;
  font-size: 1.4rem;
}

.form-radio {
  display: flex;
  align-items: center;
  position: relative;
  gap: 0 1rem;
  cursor: pointer;
}
@media (max-width: 1024px) {
  .form-radio {
    gap: 0 0.7rem;
  }
}
.form-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0.1;
}
.form-radio i {
  display: inline-block;
  position: relative;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  border: 1px solid #ddd;
  background: #fff;
  overflow: hidden;
  transition: all 0.25s;
}
@media (max-width: 1024px) {
  .form-radio i {
    width: 1.6rem;
    height: 1.6rem;
  }
}
.form-radio i::after {
  content: "";
  width: 0;
  height: 0;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.25s;
  border-radius: 50%;
  background-color: #fff;
}
.form-radio span {
  color: #555555;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .form-radio span {
    font-size: 1.1rem;
  }
}
.form-radio input:checked + i {
  background-color: #fff;
  border-color: #c6c6c6;
  background-image: url("../images/ico/check.png");
  background-repeat: no-repeat;
  background-position: center;
}
.form-radio input[type=checkbox] + i {
  border-radius: 0;
  border-radius: 0.3rem;
}
.form-radio input[type=checkbox]:checked + i::after {
  border-radius: 0;
  border-radius: 0.3rem;
}
.form-radio span span {
  color: #007ab4;
  font-size: 1.9rem;
}
@media (max-width: 1024px) {
  .form-radio span span {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .form-radio span span {
    font-size: 1.2rem;
  }
}

.form-input {
  display: inline-block;
  border-radius: 1rem;
  border: 1px solid #8e8e8e;
  padding: 0 2rem;
  height: 6rem;
  width: 100%;
}

/* switch */
.sc-switch {
  display: none;
  height: 0 !important;
  width: 0 !important;
  visibility: hidden;
}

.sc-switch-label {
  cursor: pointer;
  text-indent: -9999px;
  width: 38px;
  height: 24px;
  background: #e0e0e0;
  display: block;
  border-radius: 100px;
  position: relative;
  transition: all ease 0.8s;
}

.sc-switch-label:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background: #0071bb;
}

input:checked + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.sc-switch-label:active:after {
  width: 30px;
}

.form-textarea {
  display: inline-block;
  border-radius: 1rem;
  border: 1px solid #8e8e8e;
  padding: 2rem;
  overflow-y: auto;
  width: 100%;
}
@media (max-width: 1170px) {
  .form-textarea {
    padding: 1.5rem;
  }
}
@media (max-width: 1024px) {
  .form-textarea {
    font-size: 1.4rem;
  }
}

.form-control-dl {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.form-control-dl dt {
  min-width: 7rem;
}
.form-control-dl dd {
  position: relative;
  flex: 1;
  width: 100%;
}
.form-control-dl dd input:disabled {
  background: #e4e4e4;
}
.form-control-dl dd .form-text {
  font-size: 1.3rem;
  position: absolute;
  bottom: -2.2rem;
  left: 1rem;
  color: #d40000;
}

.search--wrap {
  width: 28rem;
  position: absolute;
  top: 10rem;
  left: 9rem;
}
@media (max-width: 768px) {
  .search--wrap {
    z-index: 110;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
  }
}
.search--wrap .search--head {
  width: 100%;
  margin-bottom: 1.2rem;
}
@media (max-width: 768px) {
  .search--wrap .search--head {
    margin-bottom: 0.6rem;
  }
}
.search--wrap .search--cont {
  width: 100%;
  background: #fff;
  border-radius: 0.6rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.search--wrap .search--cont--head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #d8d8d8;
}
.search--wrap .search--cont--head .count {
  position: relative;
  font-size: 1.3rem;
}
.search--wrap .search--cont--head .count span {
  font-weight: bold;
}
.search--wrap .search--cont--head .close-btn {
  width: 1.2rem;
  height: 1.2rem;
  background-image: url("../images/common/search_close.png");
}
.search--wrap .search--cont--body .search--li--inner {
  max-height: 49rem;
}
@media (max-width: 768px) {
  .search--wrap .search--cont--body .search--li--inner {
    height: calc(100vh - 25rem);
  }
}
.search--wrap .search--cont--body .search--li li:nth-child(odd) {
  background: #f8f8f8;
}
.search--wrap .search--cont--body .search--li li:last-child {
  border-bottom: none;
}
.search--wrap .search--cont--body .search--li--item {
  padding: 2rem;
  border-bottom: 1px solid #d8d8d8;
  cursor: pointer;
  transition: all 0.3s;
}
@media (max-width: 768px) {
  .search--wrap .search--cont--body .search--li--item {
    padding: 1rem 1.5rem;
  }
}
.search--wrap .search--cont--body .search--li--item--name {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
}
@media (max-width: 768px) {
  .search--wrap .search--cont--body .search--li--item--name {
    font-size: 1.3rem;
  }
}
.search--wrap .search--cont--body .search--li--item--name span {
  color: #000;
  font-weight: bold;
}
.search--wrap .search--cont--body .search--li--item--name p {
  color: #000000;
  font-size: 1.7rem;
}
@media (max-width: 768px) {
  .search--wrap .search--cont--body .search--li--item--name p {
    font-size: 1.3rem;
  }
}
.search--wrap .search--cont--body .search--li--item--juso01 {
  font-size: 1.4rem;
  color: #717171;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .search--wrap .search--cont--body .search--li--item--juso01 {
    font-size: 1.2rem;
  }
}
.search--wrap .search--cont--body .search--li--item--juso02 {
  font-size: 1.3rem;
  color: #717171;
}
@media (max-width: 768px) {
  .search--wrap .search--cont--body .search--li--item--juso02 {
    font-size: 1.1rem;
  }
}
.search--wrap .search--cont--foot {
  border-top: 1px solid #d8d8d8;
  padding: 1.2rem;
}
.search--wrap .search--cont--foot .pagination .paging a {
  font-size: 1.3rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
}
.search--wrap .search--cont--foot .pagination .paging strong {
  border-radius: 50%;
  font-size: 1.3rem;
  width: 2.4rem;
  height: 2.4rem;
}

/*
    table
*/
.table.cursor tr {
  cursor: pointer;
}
.table.cursor tr:hover td {
  background: #d6cac5;
  transition: all 0.3s;
}
.table table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #c6c6c6;
}
.table tr {
  border-bottom: 1px solid #c6c6c6;
}
.table th,
.table td {
  padding: 1.5rem 1rem;
  text-align: left;
  vertical-align: middle;
  font-size: 1.5rem;
}
.table th {
  background: #f7f7f7;
  color: #332b28;
  font-weight: normal;
}
.table td {
  color: #717171;
}
.table td .time-small {
  color: #757575;
  font-size: 1.5rem;
}
.table .tac {
  text-align: center;
}
.table thead th {
  background-color: #f0f0f0;
  text-align: center;
  border: 1px solid #c6c6c6;
}
.table thead th:first-child {
  border-left: none;
}
.table thead th:last-child {
  border-right: none;
}
.table tbody td {
  text-align: center;
  background-color: #fff;
  border: 1px solid #c6c6c6;
}
.table tbody td:first-child {
  border-left: none;
}
.table tbody td:last-child {
  border-right: none;
}
.table.type02 th, .table.type02 td {
  padding: 0.8rem;
}
.table.type02 thead th {
  text-align: left;
  padding-left: 2rem;
}
.table.type02 thead th.center {
  text-align: center;
}
.table.type02 tbody tr {
  border-bottom: none;
}
.table.type02 tbody tr td {
  padding-left: 4rem;
}
.table.type02 tbody tr:first-child td {
  padding-top: 1.5rem;
}
.table.sm th, .table.sm td {
  padding: 0.8rem;
}
@media (max-width: 768px) {
  .table.sm th, .table.sm td {
    padding: 0.4rem;
    font-size: 12px;
  }
}
.table.sm thead th {
  text-align: center;
}
.table.sm tbody td {
  color: #555555;
}
.table.sm tbody td.left {
  text-align: left;
}
.table.sm tbody td.right {
  text-align: right;
}

.btn {
  background: #fff;
}
.btn + .btn {
  margin-left: 0.6rem;
}
.btn.xs {
  display: inline-block;
  height: 2.4rem;
  line-height: 2.4rem;
  padding: 0 1.2rem;
  border-radius: 1.6rem;
  font-size: 1.3rem;
}
.btn.xs.round {
  border-radius: 1.2rem;
}
.btn.sm {
  display: inline-block;
  height: 3.2rem;
  line-height: 3.2rem;
  padding: 0 1.6rem;
  border-radius: 0.6rem;
  font-size: 1.5rem;
}
.btn.sm.round {
  border-radius: 1.6rem;
}
.btn.md {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  padding: 0 2rem;
  border-radius: 0.6rem;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .btn.md {
    height: 3.2rem;
    line-height: 3.2rem;
    font-size: 1.1rem;
    padding: 0 1rem;
  }
}
.btn.md.round {
  border-radius: 2rem;
}
.btn.lg {
  display: inline-block;
  height: 4.8rem;
  line-height: 4.8rem;
  padding: 0 2.4rem;
  border-radius: 0.6rem;
  font-size: 1.7rem;
}
.btn.lg.round {
  border-radius: 2.4rem;
}
.btn.xl {
  display: inline-block;
  height: 5.6rem;
  line-height: 5.6rem;
  padding: 0 3.5rem;
  border-radius: 0.6rem;
  font-size: 1.9rem;
}
.btn.xl.round {
  border-radius: 2.8rem;
}
.btn.border {
  border: 1px solid #dbdbdb;
}
.btn.border-white {
  border: 1px solid #dbdbdb;
  background: transparent;
  color: #fff;
}
.btn.border-gray {
  border: 1px solid #717171;
  background: transparent;
  color: #555555;
}
.btn.border-darkgray {
  background: #555555;
  background: transparent;
  color: #555555;
}
.btn.border-primary {
  border: 1px solid #164194;
  color: #164194;
}
.btn.black {
  background: #000;
  color: #fff;
}
.btn.gray {
  background: #717171;
  color: #fff;
}
.btn.dark-gray {
  background: #555555;
  color: #fff;
}
.btn.primary {
  background: #164194;
  color: #fff;
}
.btn.green {
  border: 1px solid #4eab56;
  background: #2f9638;
  color: #fff;
}
.btn.block {
  width: 100%;
}
.btn.grdient {
  color: #fff;
  background: rgb(200, 85, 62);
  background: linear-gradient(36deg, rgb(200, 85, 62) 0%, rgb(100, 148, 14) 35%, rgb(8, 104, 172) 70%, rgb(53, 100, 94) 100%);
}
.btn.grdient-main {
  color: #fff;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(22, 66, 148) 0%, rgb(46, 149, 58) 100%);
}
.btn.disable {
  background: #d8d8d8;
  color: #8e8e8e;
}

.btn-right {
  margin-top: 2rem;
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
}

.btn-fixed {
  width: 100%;
}

.btn-center {
  padding-top: 3rem;
  display: flex;
  justify-content: center;
}

.btn-search {
  width: 12.2rem;
  color: #fff;
  height: 4.8rem;
  border-radius: 0.8rem;
  padding-left: 6.1rem;
  text-align: left;
  background-color: #774f3f;
  background-image: url("../images/ico/ico-search.png");
  background-repeat: no-repeat;
  background-position: 3.2rem center;
}

.btn-reset {
  width: 12.2rem;
  height: 4.8rem;
  border-radius: 0.8rem;
  border: 1px solid #8e8e8e;
  padding-left: 5.2rem;
  text-align: left;
  background-image: url("../images/ico/ico-reset.png");
  background-repeat: no-repeat;
  background-position: 2.2rem center;
}

.btn-set {
  width: 15rem;
  height: 4rem;
  border-radius: 0.8rem;
  border: 1px solid #8e8e8e;
  padding-left: 5.2rem;
  text-align: left;
  background-image: url("../images/ico/ico-setting.png");
  background-repeat: no-repeat;
  background-position: 2.2rem center;
}

.btn-down {
  width: 16rem;
  height: 4rem;
  border-radius: 0.8rem;
  border: 1px solid #8e8e8e;
  padding-left: 5.2rem;
  text-align: left;
  background-image: url("../images/ico/ico-down.png");
  background-repeat: no-repeat;
  background-position: 2.2rem center;
}

.btn-stats {
  width: 16.5rem;
  height: 4rem;
  border-radius: 0.8rem;
  border: 1px solid #8e8e8e;
  padding-left: 5.2rem;
  text-align: left;
  background-image: url("../images/ico/ico-stats.png");
  background-repeat: no-repeat;
  background-position: 2.2rem center;
}

.list__square > li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.7rem;
  line-height: 1.25;
}
@media (max-width: 1024px) {
  .list__square > li {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .list__square > li {
    font-size: clamp(1.2rem, 2.08vw, 1.4rem);
  }
}
.list__square > li + li {
  margin-top: 1.5rem;
}
@media (max-width: 768px) {
  .list__square > li + li {
    margin-top: 1.2rem;
  }
}
.list__square > li::before {
  display: block;
  content: "";
  width: 4px;
  height: 4px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 1rem;
}
@media (max-width: 768px) {
  .list__square > li::before {
    width: 3px;
    height: 3px;
    top: 0.5rem;
  }
}
.list__circle > li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 2.1rem;
  color: #555;
  text-align: left;
  line-height: 1.25;
}
@media (max-width: 1024px) {
  .list__circle > li {
    font-size: 1.4rem;
    padding-left: 1rem;
  }
}
@media (max-width: 768px) {
  .list__circle > li {
    font-size: clamp(1.2rem, 2.08vw, 1.4rem);
  }
}
.list__circle > li + li {
  margin-top: 1.5rem;
}
.list__circle > li::before {
  display: block;
  content: "";
  width: 4px;
  height: 4px;
  background-color: #555;
  position: absolute;
  border-radius: 50%;
  left: 0;
  top: 1rem;
}
@media (max-width: 1024px) {
  .list__circle > li::before {
    width: 2px;
    height: 2px;
    top: 0.5rem;
  }
}

.tabs {
  display: flex;
  border-radius: 1.2rem;
  background: #ecf0f6;
  padding: 0.4rem 0.8rem;
  gap: 0.8rem;
}
.tabs .tab-item {
  position: relative;
  flex: 1;
  border-radius: 0.8rem;
  color: #555555;
  text-align: center;
}
.tabs .tab-item:after {
  position: absolute;
  width: 1px;
  height: 2rem;
  left: -0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  content: "";
  background: #a2b3d4;
}
.tabs .tab-item:first-child:after {
  display: none;
}
.tabs .tab-item button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.9rem;
  padding: 2rem 0.8rem;
}
.tabs .tab-item button .small {
  margin-left: 0.6rem;
  font-size: 1.5rem;
}
.tabs .tab-item.active {
  background: #164194;
}
.tabs .tab-item.active button {
  color: #fff;
}

.toggle-hidden {
  display: none;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination a, .pagination strong, .pagination span {
  transition: all 0.25s;
}
.pagination .adri {
  display: flex;
  align-items: center;
  height: 4rem;
  color: #555555;
}
.pagination a,
.pagination strong {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 400;
  height: 4rem;
  width: 4rem;
}
.pagination .paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  margin: 0 3rem;
}
.pagination .paging a,
.pagination .paging strong {
  border-radius: 0.5rem;
  font-size: 1.7rem;
}
.pagination .paging a:hover, .pagination .paging a:focus,
.pagination .paging strong:hover,
.pagination .paging strong:focus {
  background-color: #f5f7fa;
  color: #717171;
}
.pagination .paging strong {
  color: #fff;
  background-color: #091a3b;
  font-weight: 700;
}
.pagination .fir,
.pagination .prev,
.pagination .next,
.pagination .last {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
}
.pagination .fir span,
.pagination .prev span,
.pagination .next span,
.pagination .last span {
  white-space: nowrap;
  color: #555555;
  font-size: 1.5rem;
}
.pagination .fir:hover, .pagination .fir:focus,
.pagination .prev:hover,
.pagination .prev:focus,
.pagination .next:hover,
.pagination .next:focus,
.pagination .last:hover,
.pagination .last:focus {
  color: #717171;
}
.pagination .fir:hover span, .pagination .fir:focus span,
.pagination .prev:hover span,
.pagination .prev:focus span,
.pagination .next:hover span,
.pagination .next:focus span,
.pagination .last:hover span,
.pagination .last:focus span {
  color: #717171;
}
.pagination .fir img,
.pagination .prev img,
.pagination .next img,
.pagination .last img {
  display: flex;
}

.modal-wrap {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}

.modal-wrap-dimmed {
  z-index: 110;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.modal {
  overflow: hidden;
  z-index: 120;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.modal--inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.6rem;
}
.modal--close {
  width: 2rem;
  height: 2rem;
  background-image: url("../images/modal/white-close.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2rem;
}
@media (max-width: 768px) {
  .modal--close {
    width: 1.5rem;
    height: 1.5rem;
    background-size: 1.5rem;
  }
}
.modal--head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.5rem;
  background: #000;
  padding: 0 3rem;
  border-radius: 0.6rem 0.6rem 0 0;
}
.modal--head.carbon {
  background: #46670a;
}
.modal--head.score {
  background: #254642;
}
@media (max-width: 768px) {
  .modal--head {
    height: 4rem;
    padding: 0 1.5rem;
  }
}
.modal--head--inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal--head--inner h3 {
  font-size: 2.1rem;
  font-weight: normal;
  color: #fff;
}
@media (max-width: 768px) {
  .modal--head--inner h3 {
    font-size: 1.7rem;
  }
}
.modal--head--util {
  display: flex;
  align-items: center;
  gap: 2.3rem;
}
.modal--content {
  overflow: hidden;
  position: relative;
  background: #fff;
  padding: 3rem;
  border-radius: 0 0 0.6rem 0.6rem;
}
.modal--content--inner {
  max-height: 60rem;
}
@media (max-width: 768px) {
  .modal--content--inner {
    max-height: calc(100vh - 4rem - 3rem);
  }
}
@media (max-width: 768px) {
  .modal--content {
    padding: 1.5rem;
  }
}
@media (max-width: 768px) {
  .modal.full .modal--content {
    height: calc(100vh - 4rem) !important;
  }
}

#scoreComparison .modal--inner {
  /* width: 100%; */
  /*max-width: 995px;*/
}
.village-dl {
  display: flex;
  margin-bottom: 2rem;
}
.village-dl > div {
  display: flex;
  flex: 1;
}
.village-dl > div dl + dl dt {
  color: #717171;
}
@media (max-width: 768px) {
  .village-dl {
    flex-direction: column;
  }
}
.village-dl .right {
  position: relative;
}
.village-dl .right:after {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  content: "";
  width: 0.1rem;
  height: 4rem;
  background: #c6c6c6;
}
@media (max-width: 768px) {
  .village-dl .right:after {
    width: 100%;
    height: 0.1rem;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.village-dl dl {
  flex: 1;
  text-align: center;
}
@media (max-width: 768px) {
  .village-dl dl {
    padding: 1rem;
  }
}
.village-dl dl dt {
  font-size: 1.7rem;
  margin-bottom: 2rem;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .village-dl dl dt {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
}
.village-dl dl dd {
  font-size: 1.7rem;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .village-dl dl dd {
    font-size: 1.1rem;
  }
}
.village-dl dl dd strong {
  font-size: 4rem;
  margin-right: 1rem;
}
@media (max-width: 768px) {
  .village-dl dl dd strong {
    font-size: 3rem;
    margin-right: 0.5rem;
  }
}
.village-dl dl dd sup {
  font-size: 0.9rem;
}

.village-item-inner {
  display: flex;
  gap: 1.1rem;
  margin-bottom: 1.2rem;
}
@media (max-width: 768px) {
  .village-item-inner {
    flex-direction: column;
    margin-bottom: 0.6rem;
  }
}

.village--item {
  flex: 1;
  border: 1px solid #c6c6c6;
  border-radius: 1.2rem;
}
.village--item.first-carbon {
  border: 2px solid #64940e;
}
.village--item.first-carbon .village--item--head h3 {
  color: #64940e;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.village--item.first-carbon .village--item--head h3:after {
  display: inline-block;
  content: "";
  background-image: url("../images/modal/ico-village.png");
  width: 1.5rem;
  height: 1.7rem;
}
.village--item.first-score {
  border: 2px solid #254642;
}
.village--item.first-score .village--item--head h3 {
  color: #254642;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.village--item.first-score .village--item--head h3:after {
  display: inline-block;
  content: "";
  background-image: url("../images/modal/ico-score.png");
  width: 1.5rem;
  height: 1.7rem;
}
.village--item--head {
  background: #f0f0f0;
  padding: 1.8rem;
  border-radius: 1.2rem 1.2rem 0 0;
}
@media (max-width: 768px) {
  .village--item--head {
    padding: 0.9rem;
  }
}
.village--item--head h3 {
  text-align: center;
  margin-bottom: 1.8rem;
  font-size: 1.7rem;
}
@media (max-width: 768px) {
  .village--item--head h3 {
    margin-bottom: 0.9rem;
    font-size: 1.4rem;
  }
}
.village--item--head .select-row {
  display: flex;
  gap: 1rem;
}
.village--item--head .select-row select {
  flex: 1;
}
.village--item--data {
  padding: 1.5rem 1.8rem;
}
@media (max-width: 768px) {
  .village--item--data {
    padding: 0.75rem 0.9rem;
  }
}
.village--item--data dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  min-height: 6.3rem;
}
@media (max-width: 768px) {
  .village--item--data dl {
    padding: 0.75rem;
    min-height: auto;
  }
}
.village--item--data dl + dl {
  border-top: 1px solid #d8d8d8;
}
.village--item--data dl dt {
  color: #555555;
}
@media (max-width: 768px) {
  .village--item--data dl dt {
    font-size: 1.2rem;
  }
}
.village--item--data dl dd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #1d1d1d;
  font-size: 1.7rem;
}
.village--item--data dl dd .score {
  font-weight: bold;
}
@media (max-width: 768px) {
  .village--item--data dl dd .score {
    font-size: 1.3rem;
  }
}
.village--item--data dl dd .down {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  color: #0000ff;
  text-align: right;
  font-weight: normal;
}
.village--item--data dl dd .down:after {
  position: absolute;
  left: -10px;
  top: 7px;
  display: inline-block;
  content: "";
  background-image: url("../images/modal/blue-arrow.png");
  width: 0.5rem;
  height: 0.4rem;
}
@media (max-width: 768px) {
  .village--item--data dl dd .down:after {
    font-size: 0.9rem;
    left: -10px;
    top: 3px;
  }
}
@media (max-width: 768px) {
  .village--item--data dl dd .down {
    font-size: 0.9rem;
  }
}
.village--item--data dl dd .up {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  color: #ff0000;
  text-align: right;
  font-weight: normal;
}
.village--item--data dl dd .up:after {
  position: absolute;
  left: -10px;
  top: 7px;
  display: inline-block;
  content: "";
  background-image: url("../images/modal/red-arrow.png");
  width: 0.5rem;
  height: 0.4rem;
}
@media (max-width: 768px) {
  .village--item--data dl dd .up:after {
    font-size: 0.9rem;
    left: -10px;
    top: 3px;
  }
}
@media (max-width: 768px) {
  .village--item--data dl dd .up {
    font-size: 0.9rem;
  }
}
.village--item--data .double-dl {
  align-items: flex-start;
}
.village--item--data .double-dl dt {
  width: 6rem;
  padding-top: 0.5rem;
}
.village--item--data .double-dl dd {
  flex: 1;
}
.village--item--data .double-dl .double-dd {
  width: 100%;
}
.village--item--data .double-dl .double-dd .txt {
  color: #555555;
}
@media (max-width: 768px) {
  .village--item--data .double-dl .double-dd .txt {
    font-size: 1.1rem;
  }
}
.village--item--data .double-dl .double-dd .double-dd-row {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.village--item--data .double-dl .double-dd .double-dd-row + .double-dd-row {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid #d8d8d8;
}
.village--item--data--chart {
  border-top: 1px solid #d8d8d8;
  padding-top: 1rem;
}

.modal-chart-area {
  border: 1px solid #c6c6c6;
  border-radius: 0.4rem;
  min-height: 300px;
}

.park-wrap {
  padding: 0.7rem 2rem;
  background: #5d958f;
  border-radius: 1.2rem;
  display: flex;
  align-items: center;
  margin-bottom: 1.3rem;
}
@media (max-width: 768px) {
  .park-wrap {
    flex-direction: column;
  }
}
.park-wrap h3 {
  width: 28.5rem;
  text-align: center;
  color: #fff;
  font-size: 2.1rem;
  font-weight: normal;
}
@media (max-width: 768px) {
  .park-wrap h3 {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 1.7rem;
  }
}
.park-wrap .park-wrap-range {
  background: #fff;
  flex: 1;
  height: 8rem;
  border-radius: 1.2rem;
}
@media (max-width: 768px) {
  .park-wrap .park-wrap-range {
    flex: none;
    width: 100%;
  }
}

.ui-widget-header {
  border: 0px solid #dddddd;
  background: #fff;
}

.ui-datepicker-calendar > thead > tr > th {
  font-size: 14px !important;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 10px 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  border: 0px solid #c5c5c5;
  background-color: transparent;
  font-weight: normal;
  color: #454545;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 0em;
  line-height: 16px;
  text-align: center;
  font-size: 14px;
  padding: 0px;
  font-weight: bold;
}

.ui-datepicker {
  display: none;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 0px;
  padding: 20px;
  padding-bottom: 10px;
  width: 300px;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1);
}

.ui-widget.ui-widget-content {
  border: 1px solid #eee;
}

#datepicker:focus > .ui-datepicker {
  display: block;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  cursor: pointer;
}

.ui-datepicker-next {
  float: right;
}

.ui-state-disabled {
  cursor: auto;
  color: hsl(0, 0%, 80%);
}

.ui-datepicker-title {
  text-align: center;
  padding: 10px;
  font-weight: 100;
  font-size: 20px;
}

.ui-datepicker-calendar {
  width: 100%;
}

.ui-datepicker-calendar > thead > tr > th {
  padding: 5px;
  font-size: 20px;
  font-weight: 400;
}

.ui-datepicker-calendar > tbody > tr > td > a {
  color: #000;
  font-size: 12px !important;
  font-weight: bold !important;
  text-decoration: none;
}

.ui-datepicker-calendar > tbody > tr > .ui-state-disabled:hover {
  cursor: auto;
  background-color: #fff;
}

.ui-datepicker-calendar > tbody > tr > td {
  border-radius: 100%;
  width: 44px;
  height: 30px;
  cursor: pointer;
  padding: 5px;
  font-weight: 100;
  text-align: center;
  font-size: 12px;
}

.ui-datepicker-calendar > tbody > tr > td:hover {
  background-color: transparent;
  opacity: 0.6;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 0px solid #cccccc;
  background-color: transparent;
  font-weight: normal;
  color: #2b2b2b;
}

.ui-widget-header .ui-icon {
  background-image: url("../images/ico/cal-btns.png");
}

.ui-icon-circle-triangle-e {
  background-position: -20px 0px;
  background-size: 36px;
}

.ui-icon-circle-triangle-w {
  background-position: 0px 0px;
  background-size: 36px;
}

.ui-datepicker-calendar > tbody > tr > td:first-child a {
  color: red !important;
}

.ui-datepicker-calendar > tbody > tr > td:last-child a {
  color: #0099ff !important;
}

.ui-datepicker-calendar > thead > tr > th:first-child {
  color: red !important;
}

.ui-datepicker-calendar > thead > tr > th:last-child {
  color: #0099ff !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  border: 0px;
  background: #f1f1f1;
  border-radius: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.inp {
  background-image: url("../images/common/ico-cal.png");
  background-position: 90% center;
  background-repeat: no-repeat;
}

.inp:focus {
  outline: none;
}

.SNB {
  position: relative;
  height: 100%;
  transition: all 0.3s;
  /* 패널 버튼 영역 스타일 */
}
@media (max-width: 768px) {
  .SNB.active {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    height: 70vh;
  }
}
@media (max-width: 768px) {
  .SNB {
    z-index: 120;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 0 2rem;
    border-radius: 2rem 2rem 0 0;
    height: 4.5rem;
  }
}
.SNB .SNB-container {
  z-index: 50;
  position: absolute;
  height: calc(100% - 8rem);
  left: 0;
  width: 7rem;
}
@media (max-width: 768px) {
  .SNB .SNB-container {
    width: 100%;
    position: relative;
    height: auto;
    background: #fff !important;
  }
}
.SNB .SNB-container .mobile-panel-control {
  display: none;
}
@media (max-width: 768px) {
  .SNB .SNB-container .mobile-panel-control {
    display: block;
    padding: 2rem;
    display: flex;
    justify-content: center;
    cursor: pointer;
  }
  .SNB .SNB-container .mobile-panel-control:after {
    display: block;
    content: "";
    width: 3rem;
    height: 0.5rem;
    background: #ddd;
    border-radius: 0.5rem;
  }
}
.SNB .SNB-container .mobile-nav {
  display: none;
}
@media (max-width: 768px) {
  .SNB .SNB-container .mobile-nav {
    display: flex;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    padding: 1rem 0;
    margin-bottom: 1rem;
  }
  .SNB .SNB-container .mobile-nav a {
    flex: 1;
    text-align: center;
    font-weight: bold;
  }
}
@media (max-width: 768px) {
  .SNB .SNB-container .snblinks--inner {
    display: flex;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 1rem;
  }
}
.SNB .SNB-container .snblinks {
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 1.3rem;
  height: 12rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) {
  .SNB .SNB-container .snblinks {
    flex: 1;
    height: 5rem;
    border: 1px solid #d8d8d8;
    border-radius: 0.4rem;
    font-size: 1.1rem;
  }
}
.SNB .SNB-container .snblinks .icon {
  display: block;
  margin: auto auto 2rem auto;
}
@media (max-width: 768px) {
  .SNB .SNB-container .snblinks .icon {
    display: none;
  }
}
.SNB .SNB-container .snblinks span {
  color: #fff;
}
@media (max-width: 768px) {
  .SNB .SNB-container .snblinks span {
    color: #000;
  }
}
.SNB .SNB-container .snblinks.active {
  box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 60px -28px inset;
}
.SNB .SNB-container .snblinks.active span {
  color: #fff;
}
.SNB .SNB-container .SNB-container-util {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
@media (max-width: 768px) {
  .SNB .SNB-container .SNB-container-util {
    display: none;
  }
}
.SNB .SNB-container .SNB-container-util button {
  padding: 2.5rem;
}
.SNB .SNB-container .SNB-container-util .ico-notice {
  width: 22px;
  height: 23px;
  background-image: url(../images/ico/ico_notice.png);
}
.SNB .SNB-container .SNB-container-util .ico-guide {
  width: 22px;
  height: 18px;
  background-image: url(../images/ico/ico_guide.png);
}
.SNB .SNB--view {
  z-index: 40;
  position: absolute;
  display: none;
  left: 7rem;
  top: 0;
  border-top: none;
  transition: all 0.3s;
}
@media (max-width: 768px) {
  .SNB .SNB--view {
    position: initial;
  }
}
.SNB .SNB--view.active {
  display: block;
  visibility: inherit;
}
.SNB .SNB--view.active.hidden {
  left: -60rem;
}
.SNB .SNB--view.active.hidden .close-panel .panel-arrow {
  transform: rotate(180deg);
}
.SNB .SNB--view.active.hidden.half {
  left: -23rem;
}
.SNB .SNB--view.active.half .view--panel02 {
  display: none;
}
.SNB .SNB--view .close-panel {
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border: none;
  cursor: pointer;
  width: 2rem;
  height: 6rem;
  border-radius: 0 0.2rem 0.2rem 0;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
@media (max-width: 768px) {
  .SNB .SNB--view .close-panel {
    display: none;
  }
}
.SNB .SNB--view .close-panel .panel-arrow {
  background-image: url(../images/common/panel-arrow.png);
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s;
  width: 0.7rem;
  height: 1.2rem;
}
.SNB .SNB--view--panel {
  height: 100vh;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel {
    height: auto;
  }
}
.SNB .SNB--view--panel.view--panel01 {
  height: calc(100vh - 80px);
  position: relative;
  z-index: 30;
  width: 30rem;
  background: #fff;
  border-right: 1px solid #d8d8d8;
  box-shadow: 10px 0px 30px -15px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel01 {
    width: 100%;
    height: auto;
    height: calc(70vh - 17.6rem);
    overflow-y: auto;
    box-shadow: none;
    border-right: none;
  }
}
.SNB .SNB--view--panel.view--panel02 {
  width: 37rem;
  background: #f0f0f0;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 {
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.4rem;
  padding: 0 2rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--head {
    padding: 0 1rem;
    height: 4rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--head h3 {
  line-height: 1;
  color: #fff;
  font-size: 1.7rem;
  font-weight: normal;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--head h3 {
    font-size: 1.3rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont {
  height: calc(100vh - 80px - 57px);
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont {
    height: calc(100vh - 40px);
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item {
  padding: 2rem;
  background: #fff;
  margin-bottom: 0.8rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item {
    padding: 1rem;
    margin-bottom: 0.4rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item--ti {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item--ti h4 {
    font-size: 1.1rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .form-line {
  margin-bottom: 1rem;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item.data-item > div {
  border-bottom: 1px solid #e4e4e4;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item.data-item > div:last-child {
  border-bottom: none;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item {
  text-align: center;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item dl {
  padding: 2rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item dl {
    padding: 1rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item dl dt {
  font-size: 1.7rem;
  margin-bottom: 2rem;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item dl dt {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item dl dd {
  font-size: 1.5rem;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item dl dd {
    font-size: 1.1rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item dl dd strong {
  font-size: 4rem;
  margin-right: 1rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item dl dd strong {
    font-size: 3rem;
    margin-right: 0.5rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-data-item dl dd sup {
  font-size: 0.9rem;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item {
  padding: 2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  text-align: center;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item {
    gap: 0.5rem;
    padding: 1rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item dl {
  width: 50%;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item dl dt {
  color: #717171;
  font-size: 1.3rem;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item dl dt {
    font-size: 1.1rem;
  }
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item dl dd {
    font-size: 1.1rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item dl dd strong {
  font-size: 2.5rem;
  margin-right: 0.5rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item dl dd strong {
    font-size: 1.8rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item dl dd sup {
  font-size: 0.9rem;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-chart-item {
  padding: 2rem;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-chart-item dl {
  text-align: center;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-chart-item dl {
    margin-bottom: 0.75rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-chart-item dl dt {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-chart-item dl dt {
    font-size: 1.1rem;
  }
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-chart-item dl dd {
    font-size: 1.1rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-chart-item dl dd strong {
  font-size: 2.5rem;
  margin-right: 0.5rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-chart-item dl dd strong {
    font-size: 1.8rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .single-chart-item dl dd sup {
  font-size: 0.9rem;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--foot {
  padding: 2rem;
  background: #f0f0f0;
  border-top: 1px solid #c6c6c6;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--foot {
    padding: 1rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--foot .carbon-btn {
  background: #64940e;
  color: #fff;
  width: 100%;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--foot .score-btn {
  background: #35645e;
  color: #fff;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--foot .score-white-btn {
  border: 1px solid #35645e;
  color: #35645e;
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--foot button {
  height: 3.2rem;
  border-radius: 1.6rem;
  font-size: 1.5rem;
  width: 100%;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02 .view--panel02--foot button {
    height: 2.8em;
    border-radius: 1.4rem;
    font-size: 1.1rem;
  }
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--foot button + button {
  margin-top: 0.8rem;
}
.SNB .SNB--view--panel--inner {
  display: flex;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel--inner {
    display: block;
  }
}
.SNB .SNB--view--panel--li {
  border-bottom: 1px solid #d8d8d8;
}
.SNB .SNB--view--panel--li.active .SNB--view--panel--li--head {
  border-bottom: 1px solid #d8d8d8;
}
.SNB .SNB--view--panel--li.active .SNB--view--panel--li--cont {
  display: block;
}
.SNB .SNB--view--panel--li .toggle-label {
  font-size: 1.5rem;
  width: 100%;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel--li .toggle-label {
    font-size: 1.2rem;
  }
}
.SNB .SNB--view--panel--li--head {
  padding: 1.6rem 1.2rem;
  cursor: pointer;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel--li--head {
    padding: 1.2rem 0.8rem;
    font-size: 1.2rem;
  }
}
.SNB .SNB--view--panel--li--cont {
  display: none;
  padding: 1.2rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel--li--cont {
    padding: 0.8rem;
  }
}
.SNB .SNB--view--panel--li--item {
  border: 1px solid #c6c6c6;
  border-radius: 0.6rem;
}
.SNB .SNB--view--panel--li--item .toggle-ti {
  display: flex;
  padding: 1rem;
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel--li--item .toggle-ti {
    padding: 0.5rem;
  }
}
.SNB .SNB--view--panel--li--item .toggle-ti .right {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.SNB .SNB--view--panel--li--item .toggle-ti em {
  transition: all 0.3s;
  display: inline-block;
  border-bottom: 4px solid #717171;
  border-top: 4px solid transparent;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.SNB .SNB--view--panel--li--item .toggle-cont {
  display: none;
}
.SNB .SNB--view--panel--li--item + * {
  margin-top: 1.2rem;
}
.SNB .SNB--view--panel--li--item.active .toggle-ti {
  background: #f0f0f0;
  border-radius: 0.6rem 0.6rem 0 0;
}
.SNB .SNB--view--panel--li--item.active .toggle-ti .right em {
  transform: rotate(180deg);
}
.SNB .SNB--view--panel--li--item.active .toggle-cont {
  display: block;
  padding: 1.5rem;
}
.SNB .SNB--view--panel--li:first-child .SNB--view--panel--li--head {
  border-top: 1px solid #d8d8d8;
}

.climate-type .SNB-container {
  background: #e49264;
}
.climate-type .SNB-container .mobile-nav .active {
  color: #c8553e;
}
.climate-type .SNB-container .snblinks--inner .snblinks:nth-child(1) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav01-ico01.png);
}
.climate-type .SNB-container .snblinks--inner .snblinks:nth-child(2) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav01-ico02.png);
}
.climate-type .SNB-container .snblinks--inner .snblinks:nth-child(3) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav01-ico03.png);
}
.climate-type .SNB-container .snblinks--inner .snblinks:nth-child(4) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav01-ico04.png);
}
.climate-type .SNB-container .snblinks--inner .snblinks.active {
  background: #c8553e;
}
.climate-type .SNB-container .SNB-container-util {
  background: #c8553e;
}
.climate-type .toggle-label input[type=checkbox]:checked + .toggle-custom {
  background-color: #c8553e;
}
.climate-type .SNB--view .SNB--view--panel.view--panel02 .view--panel02--head {
  background: #c8553e;
}
.climate-type .SNB--view--panel--li.active {
  border-top: 1px solid #c8553e;
  border-bottom: 1px solid #c8553e;
}
.climate-type .SNB--view--panel--li.active .SNB--view--panel--li--head {
  color: #c8553e;
}

.carbon-type .SNB-container {
  background: #93bf3b;
}
.carbon-type .SNB-container .mobile-nav .active {
  color: #64940e;
}
.carbon-type .SNB-container .snblinks--inner .snblinks:nth-child(1) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav02-ico01.png);
}
.carbon-type .SNB-container .snblinks--inner .snblinks:nth-child(2) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav02-ico02.png);
}
.carbon-type .SNB-container .snblinks--inner .snblinks:nth-child(3) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav02-ico03.png);
}
.carbon-type .SNB-container .snblinks--inner .snblinks:nth-child(4) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav02-ico04.png);
}
.carbon-type .SNB-container .snblinks--inner .snblinks:nth-child(5) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav02-ico05.png);
}
.carbon-type .SNB-container .snblinks--inner .snblinks.active {
  background: #64940e;
}
.carbon-type .SNB-container .SNB-container-util {
  background: #64940e;
}
.carbon-type .toggle-label input[type=checkbox]:checked + .toggle-custom {
  background-color: #64940e;
}
.carbon-type .SNB--view .SNB--view--panel.view--panel02 .view--panel02--head {
  background: #64940e;
}
.carbon-type .SNB--view .SNB--view--panel.view--panel02 .view--panel02--cont {
  height: calc(100vh - 80px - 57px - 72px);
}
@media (max-width: 768px) {
  .carbon-type .SNB--view .SNB--view--panel.view--panel02 .view--panel02--cont {
    height: calc(100vh - 40px - 51.8px);
  }
}
.carbon-type .SNB--view--panel--li.active {
  border-top: 1px solid #64940e;
  border-bottom: 1px solid #64940e;
}
.carbon-type .SNB--view--panel--li.active .SNB--view--panel--li--head {
  color: #64940e;
}

.energy-type .SNB-container {
  background: #43a2ca;
}
.energy-type .SNB-container .mobile-nav .active {
  color: #0868ac;
}
.energy-type .SNB-container .snblinks--inner .snblinks:nth-child(1) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav03-ico01.png);
}
.energy-type .SNB-container .snblinks--inner .snblinks:nth-child(2) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav03-ico02.png);
}
.energy-type .SNB-container .snblinks--inner .snblinks:nth-child(3) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav03-ico03.png);
}
.energy-type .SNB-container .snblinks--inner .snblinks.active {
  background: #0868ac;
}
.energy-type .SNB-container .SNB-container-util {
  background: #0868ac;
}
.energy-type .toggle-label input[type=checkbox]:checked + .toggle-custom {
  background-color: #0868ac;
}
.energy-type .SNB--view .SNB--view--panel.view--panel02 .view--panel02--head {
  background: #0868ac;
}
.energy-type .SNB--view--panel--li.active {
  border-top: 1px solid #0868ac;
  border-bottom: 1px solid #0868ac;
}

.score-type .SNB-container {
  background: #5d958f;
}
.score-type .SNB-container .mobile-nav .active {
  color: #35645e;
}
.score-type .SNB-container .snblinks--inner .snblinks:nth-child(1) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav04-ico01.png);
}
.score-type .SNB-container .snblinks--inner .snblinks:nth-child(2) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav04-ico02.png);
}
.score-type .SNB-container .snblinks--inner .snblinks:nth-child(3) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav04-ico03.png);
}
.score-type .SNB-container .snblinks--inner .snblinks:nth-child(4) i {
  width: 34px;
  height: 34px;
  background-image: url(../images/ico/nav04-ico04.png);
}
.score-type .SNB-container .snblinks--inner .snblinks.active {
  background: #35645e;
  box-shadow: rgba(114, 88, 49, 0.8) 0px -80px 60px -28px inset;
}
.score-type .SNB-container .SNB-container-util {
  background: #35645e;
}
.score-type .toggle-label input[type=checkbox]:checked + .toggle-custom {
  background-color: #35645e;
}
.score-type .SNB--view .SNB--view--panel.view--panel02 .view--panel02--head {
  background: #35645e;
}
.score-type .SNB--view .SNB--view--panel.view--panel02 .view--panel02--cont {
  height: calc(100vh - 80px - 57px - 110px);
}
@media (max-width: 768px) {
  .score-type .SNB--view .SNB--view--panel.view--panel02 .view--panel02--cont {
    height: calc(100vh - 40px - 90px);
  }
}
.score-type .SNB--view--panel--li.active {
  border-top: 1px solid #35645e;
  border-bottom: 1px solid #35645e;
}

.carbon-color {
  color: #64940e;
}

.score-color {
  color: #35645e;
}

.accordion--item {
  margin-bottom: 2rem;
}
.accordion--item:last-child {
  margin-bottom: 0;
}
.accordion--item.active .accordion--button {
  border-radius: 1.2rem 1.2rem 0 0;
}
.accordion--item.active .accordion--content {
  opacity: 1;
  visibility: inherit;
  height: auto;
}
.accordion--item.active .accordion--ti--arrow {
  background-color: #f0f0f0;
  background-image: url("../images/components/accordion-arrow-on.svg");
}
.accordion--button {
  width: 100%;
  padding: 2rem;
  text-align: left;
  background-color: #fff;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease;
  border-radius: 1.2rem;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.accordion--ti--flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion--ti--arrow {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: 2rem;
  transition: all 0.3s;
  background-image: url("../images/components/accordion-arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.accordion--ti--arrow::after {
  position: absolute;
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.2rem;
  background: #c6c6c6;
  content: "";
}
.accordion--content {
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  background-color: #fff;
  overflow: hidden;
  border-radius: 0 0 1.2rem 1.2rem;
}
.accordion--content--body {
  box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
  padding: 2rem;
}
.accordion.carbon-main .accordion--ti--cont {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 8rem;
}
.accordion.carbon-main .accordion--ti--cont .scope-ti {
  display: flex;
  align-items: center;
}
.accordion.carbon-main .accordion--ti--cont .scope-ti h4 {
  font-size: 1.9rem;
  color: #555555;
  margin-left: 7rem;
  margin-right: 1.5rem;
}
.accordion.carbon-main .accordion--ti--cont .scope-index strong {
  display: inline-block;
  font-size: 2.5rem;
  color: #1d1d1d;
}
.accordion.carbon-main .accordion--ti--cont .scope-index span {
  color: #555555;
}

.board--wrap {
  padding: 3rem 4rem;
}
.board--wrap--head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.2rem;
}
.board--wrap--body {
  width: 100%;
}
.board--wrap--body .board-thead {
  display: table;
  width: 100%;
  background: #f0f0f0;
  border-radius: 0.8rem;
}
.board--wrap--body .board-thead > div {
  display: table-cell;
  font-size: 1.7rem;
  padding: 2rem 1rem;
  vertical-align: middle;
}
.board--wrap--body .board-tbody {
  margin-bottom: 6rem;
}
.board--wrap--body .board-tbody .board-tbody-item {
  border: 1px solid #c3c3c3;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-top: 0.8rem;
  border-radius: 0.8rem;
  transition: all 0.3s;
}
.board--wrap--body .board-tbody .board-tbody-item:hover {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px;
  border: 1px solid #000;
}
.board--wrap--body .board-tbody .board-tbody-item > div {
  display: table-cell;
  font-size: 1.7rem;
  color: #555555;
  padding: 2rem 1rem;
  vertical-align: middle;
}

.board-management .board-thead > div,
.board-management .board-tbody-item > div {
  text-align: center;
  width: 15%;
}
.board-management .board-thead > div + div,
.board-management .board-tbody-item > div + div {
  width: 15%;
}
.board-management .board-thead > div + div + div,
.board-management .board-tbody-item > div + div + div {
  width: auto;
}
.board-management .board-thead > div + div + div + div,
.board-management .board-tbody-item > div + div + div + div {
  width: 10%;
}
.board-management .board-thead > div + div + div + div + div,
.board-management .board-tbody-item > div + div + div + div + div {
  width: 10%;
}
.board-management .board-thead > div + div + div + div + div + div,
.board-management .board-tbody-item > div + div + div + div + div + div {
  width: 10%;
}

.write--management {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.write--management .box {
  padding: 3rem 4rem;
  width: 45rem;
}
.write--management .box.box-md {
  width: 90rem;
}
.write--management--head {
  text-align: center;
  border-bottom: 1px solid #e4e4e4;
}
.write--management--head h3 {
  margin-bottom: 1rem;
}
.write--management--head p {
  margin-bottom: 1.8rem;
}
.write--management--body {
  border-bottom: 1px solid #e4e4e4;
}
.write--management--body .txt-write {
  height: 150px;
  padding: 1rem;
}
.write--management--body .txt-write textarea {
  width: 100%;
  height: 85%;
  border: none;
  outline: none;
  overflow-y: auto;
}
.write--management--body .txt-write .byte-inner {
  text-align: right;
}
.write--management--body .info-box {
  background: #ecf0f6;
  border-radius: 0.8rem;
  padding: 2rem;
  color: #717171;
  font-size: 1.5rem;
  line-height: 1.5;
}
.write--management--foot {
  padding-top: 3.2rem;
}

.file--list--item {
  display: flex;
  border: 1px solid #c6c6c6;
  padding: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.6rem;
  margin-bottom: 0.8rem;
}
.file--list--item:last-child {
  margin-bottom: 0;
}
.file--list--ti {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 1.7rem;
  color: #555555;
}
.file--list--util {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.board-list-text table {
  border-top: 1px solid #333333;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 4rem;
}
.board-list-text thead th {
  color: #000000;
  font-size: 16px;
  height: 60px;
  background: #fafafa;
}
.board-list-text th, .board-list-text td {
  border-bottom: 1px solid #e1e1e1;
  box-sizing: border-box;
  padding: 10px;
  color: #666666;
}
.board-list-text tbody th, .board-list-text tbody td {
  height: 60px;
  text-align: center;
}
.board-list-text a {
  color: #091634;
}
.board-list-text .item_list-title {
  padding-left: 70px;
  text-align: left;
}
.board-list-text .cs-link-text {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.board-list-text .cs-link-text i {
  flex: 0 0 18px;
}
.board-list-text .cs-link-text span {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-list-text .cs-link-text > * + * {
  margin-left: 5px;
}

.board-search,
.board-search2 {
  background: #edf1f4;
  padding: 15px;
  margin-bottom: 4rem;
}
.board-search form,
.board-search2 form {
  display: flex;
  width: 830px;
  margin: 0 auto;
}
.board-search form > * + *,
.board-search2 form > * + * {
  margin-left: 8px;
}
.board-search .board-search_input,
.board-search2 .board-search_input {
  height: 44px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 0;
  padding: 0 15px;
  flex: 1;
  width: 100%;
}
.board-search select.board-search_input,
.board-search2 select.board-search_input {
  flex: 0 0 200px;
  width: 200px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -ms-appearance: none;
  padding-right: 35px;
}
.board-search .board-search_btn,
.board-search2 .board-search_btn {
  background: #2149a6;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  border: 0;
  height: 44px;
  box-sizing: border-box;
  width: 115px;
  flex: 0 0 115px;
}

.board-viwer .board-viwer_header {
  border-top: 2px solid #333333;
  display: flex;
  padding: 20px 0 20px 35px;
  align-items: center;
  border-bottom: 1px dashed #e1e1e1;
}
.board-viwer .board-viwer_header > strong, .board-viwer .board-viwer_header > h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  color: #000000;
  font-size: 22px;
}
.board-viwer .board-viwer_header > strong span, .board-viwer .board-viwer_header > h3 span {
  color: #2149a6;
  margin-right: 20px;
  font-size: 18px;
}
.board-viwer .board-viwer_header > span {
  margin-left: auto;
  margin-right: 0;
  flex: 0 0 270px;
  color: #666666;
  position: relative;
  text-align: center;
}
.board-viwer .board-viwer_header > span::after {
  content: "";
  width: 1px;
  height: 14px;
  background: #e1e1e1;
  position: absolute;
  left: 0;
  top: calc(50% - 7px);
}
.board-viwer .board-viwer_attach {
  padding: 15px 15px 15px 34px;
  background: #fafafa;
}
.board-viwer .board-viwer_text {
  padding: 20px 35px;
  min-height: 30rem;
}

.board-viwer + .board-nav {
  margin-top: 25px;
}

.board-viwer_footer {
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid #e1e1e1;
  display: flex;
  justify-content: flex-end;
}
.board-viwer_footer > * + * {
  margin-left: 5px;
}

.board-nav {
  border: 1px solid #333333;
  border-left: 0;
  border-right: 0;
}
.board-nav a {
  display: block;
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  align-items: center;
}
.board-nav a b {
  position: relative;
  font-weight: 500;
  flex: 0 0 140px;
  width: 140px;
  text-align: center;
}
.board-nav a b::before {
  content: "";
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  display: inline-block;
  margin-right: 10px;
  border: 2px solid #666666;
  border-top: 0;
  border-right: 0;
  position: relative;
  top: 2px;
  transform: rotate(135deg);
}
.board-nav a strong {
  font-weight: 500;
  width: 100%;
  flex: 1;
  padding: 0 20px;
}
.board-nav a span {
  flex: 0 0 270px;
  color: #666666;
  position: relative;
  text-align: center;
}
.board-nav a span::after {
  content: "";
  width: 1px;
  height: 14px;
  background: #e1e1e1;
  position: absolute;
  left: 0;
  top: calc(50% - 7px);
}
.board-nav .board-nav_next b::before {
  transform: rotate(-45deg);
  top: -3px;
}
.board-nav a + a {
  border-top: 1px solid #e1e1e1;
}

.error-body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-body .lay-logo {
  display: block;
  width: 27.5rem;
  height: 3.7rem;
  background: url("../images/common/bi.png") no-repeat;
  margin-bottom: 2rem;
}
.error-body .error-container {
  flex: 0 0 1280px;
}
.error-body .error-cont {
  text-align: center;
  padding: 100px 0;
  border-radius: 0 0 100px 0;
  border: 16px solid #edf1f4;
}
.error-body .error-cont > h2 {
  margin: 0;
  padding: 0px;
  color: #222222;
  font-size: 30px;
}
.error-body .error-cont .error-icons {
  text-align: center;
  margin-bottom: 30px;
}
.error-body .error-cont .error-icons i {
  background: url("../images/common/error_404.png") no-repeat;
  width: 114px;
  height: 91px;
  display: inline-block;
}
.error-body .error-cont .error-infos {
  margin-top: 35px;
  line-height: 1.6em;
  font-size: 16px;
  color: #666666;
}
.error-body .error-cont .error-btns {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
.error-body .error-cont .error-btns-home {
  padding: 0 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  height: 60px;
  color: #fff;
  border-radius: 10px;
  transition: all 0.25s;
}

html, body, #wrap {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

#wrap {
  position: relative;
  background: #dedede;
}
#wrap.intro-wrap {
  background: url("../images/intro/intro-bg.png") no-repeat;
  background-position: center;
  background-size: cover;
}

.intro-wrap .intro-inner {
  margin: 2.8rem auto;
  max-width: 141rem;
  text-align: center;
}
.intro-wrap .intro-inner .intro-cont {
  display: flex;
  height: calc(100vh - 2.8rem);
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
.intro-wrap .center-txt {
  font-size: 6rem;
  color: #fff;
  margin-bottom: 3rem;
  padding: 0 3rem;
}
@media (max-width: 1024px) {
  .intro-wrap .center-txt {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    padding: 0 1.5rem;
  }
  .intro-wrap .center-txt strong {
    display: block;
  }
}
.intro-wrap .quick-link {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4.3rem;
  margin-top: 3rem;
}
@media (max-width: 1024px) {
  .intro-wrap .quick-link {
    grid-template-columns: repeat(2, 2fr);
    padding: 0 4.3rem;
    gap: 2rem;
  }
}
@media (max-width: 768px) {
  .intro-wrap .quick-link {
    padding: 0 2rem;
  }
}
.intro-wrap .quick-link li {
  position: relative;
  top: 0;
  overflow: hidden;
  color: #fff;
  padding: 4rem;
  border-radius: 1.2rem;
  transition: all 0.3s;
  height: 26.5rem;
}
@media (max-width: 768px) {
  .intro-wrap .quick-link li {
    padding: 1.5rem;
    height: 15rem;
  }
}
.intro-wrap .quick-link li h3 {
  font-size: 2.3rem;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .intro-wrap .quick-link li h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}
.intro-wrap .quick-link li p {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  height: 9rem;
}
@media (max-width: 768px) {
  .intro-wrap .quick-link li p {
    font-size: 1.1rem;
    height: 4rem;
    margin-bottom: 1rem;
  }
}
.intro-wrap .quick-link li a {
  display: inline-block;
  border: 1px solid #fff;
  color: #fff;
  width: 14.5rem;
  height: 4.8rem;
  line-height: 4.6rem;
  border-radius: 0.6rem;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: auto;
  transition: all 0.3s;
}
@media (max-width: 768px) {
  .intro-wrap .quick-link li a {
    width: 100%;
    font-size: 1.2rem;
    height: 3rem;
    line-height: 2rem;
  }
}
.intro-wrap .quick-link li a i {
  background-image: url("../images/intro/arrow00.png");
  width: 1.2rem;
  height: 1.2rem;
}
.intro-wrap .quick-link li:hover {
  transform: translateY(-2rem);
  background-image: url("../images/intro/ico-leaf_lg.png");
  background-repeat: no-repeat;
  background-position: -2rem -2rem;
}
@media (max-width: 768px) {
  .intro-wrap .quick-link li:hover {
    transform: none;
  }
}
.intro-wrap .quick-link li:hover a {
  background-color: #fff;
}
.intro-wrap .quick-link li:nth-child(1) {
  background-color: rgba(35, 132, 67, 0.8);
}
.intro-wrap .quick-link li:nth-child(1):hover {
  background-color: rgb(35, 132, 67);
}
.intro-wrap .quick-link li:nth-child(1):hover a {
  color: #64940e;
}
.intro-wrap .quick-link li:nth-child(1):hover a i {
  background-image: url("../images/intro/arrow02.png");
}
.intro-wrap .quick-link li:nth-child(2) {
  background-color: rgba(8, 104, 172, 0.8);
}
.intro-wrap .quick-link li:nth-child(2):hover {
  background-color: rgb(8, 104, 172);
}
.intro-wrap .quick-link li:nth-child(2):hover a {
  color: #0868ac;
}
.intro-wrap .quick-link li:nth-child(2):hover a i {
  background-image: url("../images/intro/arrow03.png");
}
.intro-wrap .quick-link li:nth-child(3) {
  background-color: rgba(200, 85, 62, 0.8);
}
.intro-wrap .quick-link li:nth-child(3):hover {
  background-color: rgb(200, 85, 62);
}
.intro-wrap .quick-link li:nth-child(3):hover a {
  color: #c8553e;
}
.intro-wrap .quick-link li:nth-child(3):hover a i {
  background-image: url("../images/intro/arrow01.png");
}
.intro-wrap .quick-link li:nth-child(4) {
  background-color: rgba(53, 100, 94, 0.8);
}
.intro-wrap .quick-link li:nth-child(4):hover {
  background-color: rgb(53, 100, 94);
}
.intro-wrap .quick-link li:nth-child(4):hover a {
  color: #35645e;
}
.intro-wrap .quick-link li:nth-child(4):hover a i {
  background-image: url("../images/intro/arrow04.png");
}
.intro-wrap .quick-link li:nth-child(5) {
  background-color: rgba(42, 49, 106, 0.8);
}
.intro-wrap .quick-link li:nth-child(5):hover {
  background-color: rgba(42, 49, 106, 0.8);
}
.intro-wrap .quick-link li:nth-child(5):hover a {
  color: #2a316a;
}
.intro-wrap .quick-link li:nth-child(5):hover a i {
  background-image: url("../images/intro/arrow05.png");
}

@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
  text-indent: -9999px;
  border-radius: 0;
}

.flex {
  display: flex;
}
.flex.gap-8 {
  gap: 0.8rem;
}
.flex.gap-20 {
  gap: 2rem;
}
.flex.gap-16 {
  gap: 1.6rem;
}
.flex.flex-1 > * {
  flex: 1;
}

.flex-item-cetner {
  align-items: center;
}

.flex-space-between {
  justify-content: space-between;
}

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

.flex-end {
  justify-content: flex-end;
}

.flex-start {
  align-items: flex-start;
}

.no-data {
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  align-content: stretch;
  justify-content: center;
  height: 100%;
  text-align: center;
  font-size: 1.5rem;
  color: #555555;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.vct {
  vertical-align: top !important;
}

.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}

.col-lg-1 {
  width: 8.3333333333%;
}

.col-lg-2 {
  width: 16.6666666667%;
}

.col-lg-3 {
  width: 25%;
}

.col-lg-4 {
  width: 33.3333333333%;
}

.col-lg-5 {
  width: 41.6666666667%;
}

.col-lg-6 {
  width: 50%;
}

.col-lg-7 {
  width: 58.3333333333%;
}

.col-lg-8 {
  width: 66.6666666667%;
}

.col-lg-9 {
  width: 75%;
}

.col-lg-10 {
  width: 83.3333333333%;
}

.col-lg-11 {
  width: 91.6666666667%;
}

.col-lg-12 {
  width: 100%;
}

.col-md-1 {
  width: 8.3333333333%;
}

.col-md-2 {
  width: 16.6666666667%;
}

.col-md-3 {
  width: 25%;
}

.col-md-4 {
  width: 33.3333333333%;
}

.col-md-5 {
  width: 41.6666666667%;
}

.col-md-6 {
  width: 50%;
}

.col-md-7 {
  width: 58.3333333333%;
}

.col-md-8 {
  width: 66.6666666667%;
}

.col-md-9 {
  width: 75%;
}

.col-md-10 {
  width: 83.3333333333%;
}

.col-md-11 {
  width: 91.6666666667%;
}

.col-md-12 {
  width: 100%;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
/*# sourceMappingURL=styles.css.map */