@import url("main.css");
#wrap {
  min-height: 100vh;
}
.info-desc {
  display: flex;
  gap: var(--krds-gap-4);
  color: var(--krds-color-light-gray-60);
}

.info-desc span {
  padding-right: var(--krds-gap-2);
}

.tab-conts-wrap {
  margin: var(--krds-pc-gap-layout-h2-h3) 0 var(--krds-gap-7);
}

.search-top-box .sch-filter-box .filter-form>div {
  max-width: none;
  width: auto;
}

.search-top-box .sch-filter-box .filter-form>div select {
  min-width: 130px;
}

.search-top-box .sch-filter-box .filter-form>div.set {
  max-width: fit-content;
}

.search-top-box .sch-filter-box .filter-form>div.set .sch-input {
  gap: var(--krds-gap-4);
}

.krds-btn.tertiary.fill {
  background-color: #fff;
}

#krds-footer .f-cnt .f-info {
  gap: var(--krds-gap-3);
}

#krds-footer .f-cnt .f-link {
  align-items: end;
}

#krds-footer .f-cnt .f-info .info-cmt {
  font-size: var(--krds-pc-font-size-body-small);
}

/*  상세 */
.detail-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--krds-gap-9);
}

.detail-top {
  display: flex;
  flex-direction: column;
  gap: var(--krds-gap-5);
  padding-bottom: var(--krds-padding-10);
  border-bottom: 1px solid #C6C6C6;
}

.detail-top .detail-tit {
  font-size: 2.5rem;
  font-weight: bold;
}

.detail-cont {
  color: var(--krds-color-light-gray-60);
  border-bottom: 1px solid #C6C6C6;
}

.detail-cont p {
  white-space: pre-line;
}

.detail-cont img {
  padding-bottom: var(--krds-padding-9);
}

.detail-cont .btn-area {
  padding: var(--krds-padding-9) 0;
}

.detail-btm {
  display: flex;
  justify-content: flex-end;
  gap: var(--krds-gap-5);
}

.search-list-top .sch-sort .tot-dis {
  color: var(--krds-color-light-gray-60);
}

.search-list-top .sch-sort .tot-dis span {
  padding-left: 5px;
}

.search-list-top .sch-sort li:not(:last-child)::after {
  display: none;
}

/* swiper */
.swiper.road {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  position: relative;
  padding: 0 40px 80px;
}
.swiper.road:before {
  content: "";
  display: inline-block;
  width: 45px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
/*.swiper.road {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  position: relative;
  padding: 0 40px 50px;
}*/

/*.swiper.road:before {
  content: "";
  display: inline-block;
  width: 45px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}*/

.swiper.road:after {
  content: "";
  display: inline-block;
  width: 45px;
  height: 100%;
/*  background-color: #fff;*/
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.road .swiper-wrapper {
  width: calc(100% - 80px);
}

.road .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.road .swiper-slide img {
  display: block;
  width: 100%;
}

.road .swiper-slide .bubble {
  width: 125px;
  height: 100px;
  background: url(../../../images/kma/ops/popover.svg) no-repeat center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 15px;
  margin-bottom: 26px;
}

.road .swiper-slide .bubble a {
  font-size: 14px;
  padding: 2px 0;
}

.road .swiper-slide .bubble a i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: 16px;
  background-image: url(../../../images/kma/ops/icon-arrow-right.svg);
  background-position: center center;
  background-repeat: no-repeat;
  vertical-align: sub;
}

.road .swiper-slide .bubble a:hover span {
  font-weight: 800;
  color: #246BEB;
}

.road .swiper-slide .bubble a span {
  display: inline-block;
  width: 25px;
  padding-left: 5px;
  text-align: right;
}

.road .swiper-slide.disabled{
  pointer-events: none;
  opacity: 0.5;
}

.circle-area {
  margin-left: 28px;
  position: relative;
}

.circle-area:before {
  content: '';
  display: inline-block;
  width: calc(100% + 28px);
  height: 1px;
  background-color: #003675;
  position: absolute;
  top: 10px;
}

.circle-area .circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1.2px solid #246BEB;
  background-color: #fff;
  position: relative;
}

.circle-area .circle-len {
  display: inline-block;
  position: relative;
  top:15px;
  left:38px;
  font-size:1.5rem;
  color:#555555;
}

.circle-area .circle:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #246BEB;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.circle-area p {
  margin-top: 5px;
  font-weight: 700;
  font-size: 14px;
  color: #222;
  position: absolute;
  top: -30px;
}

.circle-area p span {
  display: block;
  font-weight: 400;
  color: #444;
  font-size: 12px;
}

.road .swiper-button-prev:after,
.road .swiper-button-next:after {
  content: none;
}

.road .swiper-button-prev,
.road .swiper-button-next {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 40px;
  background: url(../../../images/kma/ops/swiper-arrow.svg) no-repeat center center #fff;
  position: absolute;
  top: 132px;
}

.road .swiper-button-prev {
  left: 0;
}

.road .swiper-button-next {
  transform: rotate(180deg);
  right: 0;
}

.road .swiper-pagination {
  /* bottom: -10px !important; */
}

.road .swiper-pagination-bullet-active {
  width: 20px;
  border-radius: 8px;
  background-color: #246BEB !important;
}

.road .swiper-pagination-bullet {
  opacity: 1;
  background-color: #8E8E8E;
}

.swiper-cmt {
  color: var(--krds-color-light-gray-40);
  font-size: 1.5rem;
  padding-top: 0.5rem;
}

.krds-modal .modal-dialog {
  width: 100rem;
}

.modal-conts .conts-area .sub-tit {
  font-size: 1.9rem;
  font-weight: bold;
}



.krds-input.datepicker {
  width: 200px;
}

.search-top-box p {
  font-weight: 600;
  font-size: 25px;
  margin-bottom:10px;
}

.search-top-box p br {
  display: none;
}

.search-top-box p span {
  color: #1D56BC;
}

.search-top-box .cmt {
  font-size: 15px;
  color: #555;
}

.chart {
  border: 1px solid #ddd;
  min-height: 400px;
  border-radius: 12px;
  margin: 30px 0;
}

.krds-table-wrap {
  padding-top: 30px;
  margin-bottom: 30px;
}

.krds-table-wrap .tbl.data thead th,
.krds-table-wrap .tbl.data tbody th,
.krds-table-wrap .tbl.data tbody td {
  text-align: center;
}

.krds-table-wrap h4 {
  font-size: 25px;
  padding-bottom: 30px;
}

.cont-cmt {
  color: #8e8e8e;
  font-size: 15px;
  text-align: right;
}

.accordion-body .datepicker {
  display: flex;
  align-items: center;
}

.accordion-body .datepicker span {
  padding: 0 5px;
}

.total-search-list .info-body a {
  width: 100%;
}

.total-search-list .info-body .in {
  justify-content: space-between;
}


@media all and (min-width:1280px) and (max-width:1599px) {
  .road .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
  }

  .road .swiper-slide {
    width: 14.28% !important;
  }
}

/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/
@media all and (min-width:1024px) and (max-width:1279px) {
  .road .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
  }

  .road .swiper-slide {
    width: 16.66% !important;
  }
}

/* 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
  .road .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
  }

  .road .swiper-slide {
    width: 20% !important;
  }
}

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) {
  .road .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
  }

  .road .swiper-slide {
    width: 33.33% !important;
  }
}

@media (max-width: 479px) {
  .road.swiper:after {
    display: none;
  }

  .road .swiper-wrapper {
    width: 100%;
    margin: 0;
    flex-direction: column;
  }

  .road .swiper-slide {
    width: 100% !important;
    flex-direction: row;
    justify-content: flex-start;
  }

  .road .swiper-slide .bubble {
    order: 2;
    width: 130px;
    height: 100px;
    background-image: url(../../../images/kma/ops/popover-ver.svg);
    background-position: center top -7px;
    padding: 15px 0;
    margin: 0;
    justify-content: flex-start;
  }

  .road .swiper-slide .bubble a {
    padding-left: 10px;
  }

  .road .swiper-button-prev,
  .road .swiper-button-next {
    display: none;
  }

  .circle-area {
    order: 1;
    margin-left: 6px;
    display: flex;
    padding: 10px 0;
  }

  .circle-area .circle-len {
    order: 2;
    position: absolute;
    top: 47px;
    left: 20px;
  }

  .circle-area:before {
    width: 1px;
    height: calc(100% + 28px);
    margin-left: 10px;
  }

  .circle-area p {
    margin: 0 10px;
    position: unset;
  }

  .road .swiper-pagination {
    display: none;
  }

  .swiper-cmt {
    padding-top: 4rem;

  }

  .modal-btn button {
    width: 100%;
  }

  .chart {
    min-height: 300px;
  }

  .search-top-box p br {
    display: inline-block;
  }

  .krds-table-wrap {
    padding-top: 0;
  }

  .cont-cmt {
    text-align: left;
  }

  .swiper.road {
    padding-bottom: 38px;
    padding-left:0px;
  }
  .swiper.road:before {
    display: none;
  }
}

@media (max-width: 1024px) {
  .krds-modal .modal-dialog {
    width: var(--krds-modal--mobile-width);

  }
}

@media (max-width: 824px) {
  .sch-form-wrap{
    padding:0;
    border-radius:0;
    background:#fff;
    margin-top:0;
  }
}

@media (max-width: 767px) {

  .detail-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--krds-gap-8);
  }

  .detail-top {
    padding-bottom: var(--krds-padding-9);
  }

  .detail-cont img {
    padding-bottom: var(--krds-padding-8);
  }

  .detail-cont .btn-area {
    padding: var(--krds-padding-8) 0;
  }

  .detail-btm .m-w100 {
    flex-grow: 1;
  }

  .tab-conts-wrap {
    margin: 0;
  }

  .tab-conts-wrap .search-list-top {
    padding-top: var(--krds-padding-9);
    gap: 0;
  }

  .search-list-top .sch-info {
    order: unset;
  }

  .search-list-top .sch-sort {
    order: unset;
    color: var(--krds-color-light-gray-60);
  }


  .search-list-top .sch-sort li:not(:last-child)::after {
    display: inline-block;
  }


  #krds-footer .f-cnt .f-info .info-addr strong {
    display: block;
  }

  #krds-footer .f-cnt .f-link {
    align-items: flex-start;
  }

  .krds-input.datepicker {
    width: 100%;
  }

  .acc-flag.no-data .acc-flag-set {
    width: auto;
    justify-content: flex-end;
  }

  .acc-flag.no-data .acc-flag-set span {
    font-size: 17px;
  }

  .f-link {
    display: none;
  }

  .modal-conts:focus {
    box-shadow: none;
  }

  .modal-conts .accordion-header:focus {
    box-shadow: none;
  }

  .pop-filter-top .filter-list {
    margin-bottom: 0px;
  }

  .krds-table-wrap h4 {
    padding-bottom: 20px;
  }

}

.modal-conts .krds-btn-tag:focus {box-shadow:none;}

.modal-conts .filter-list.option-select .accordion-item .accordion-body {
  margin-bottom: var(--krds-gap-5);
}

.link-mark a {width:52px; height:32px; display: inline-flex;}

.modal-conts .filter-list.option-select .accordion-body {gap: var(--krds-gap-5);}
.modal-conts .filter-list.option-select .accordion-body.flex02 {display: flex; flex-direction: row; align-items: center; }
.modal-conts .filter-list.option-select .accordion-body.flex02>div {flex : 1 0 auto;}
.modal-conts .filter-list.option-select .accordion-body.flex02 span {}

@media (max-width: 1600px) {
  section.krds-modal.main_pop {width:inherit !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  section.krds-modal.main_pop .modal-dialog { top:50% !important; left:50% !important; transform: translate(-50%, -50%);}
  section.krds-modal.main_pop .modal-content .modal-conts { outline:none;}
}

.mt0 {margin-top: 0 !important;}

.krds-breadcrumb-wrap:focus { box-shadow:none;}
.main-top:focus { box-shadow:none;}

.header-container {background-color:rgba(255, 255, 255, 0.9); backdrop-filter:blur(4px);}

/* 교통사고이력 검색창 셀렉트 포커스 수정 - 웹접근성 진흥원 요청*/
.search-top-box .sch-filter-box .filter-form .krds-form-select:focus {
  outline: 0.2rem solid var(--krds-light-color-border-inverse);
  outline-offset: 0;
  box-shadow: var(--krds-box-shadow-outline);
  transition: outline 0s, box-shadow 0s !important;
  border-width: 1px;
  border-color: var(--krds-form-select--color-border);
}
/* 공지사항 검색창 셀렉트 포커스 수정 - 웹접근성 진흥원 요청*/
.search-top-box .sch-form-wrap.flex-inline .krds-form-select:focus, .search-top-box .sch-form-wrap .krds-input:focus {
  outline: 0.2rem solid var(--krds-light-color-border-inverse);
  outline-offset: 0;
  box-shadow: var(--krds-box-shadow-outline);
  transition: outline 0s, box-shadow 0s !important;
  border-width: 1px;
  border-color: var(--krds-form-select--color-border);
}

.link-mark img {height:35px;}

#container .inner {padding-top:40px;}
#container .inner:focus {box-shadow:none;}
.sch-form-wrap > .sch-input {width: 100%; justify-content: space-between;}
.krds-btn.medium.tertiary.fill {position: absolute; right: 40px;}

.krds-btn.medium.mr102 {margin-right:102px;}

/*
#accRecordDetail .modal-conts:focus {box-shadow:none; outline: 0;}*/