@charset "utf-8";

/* sub01 */

/*차트 상세정보 s*/
.datamap {
  position: relative;
}
.datamap .graph_area {
  height: 600px;
  overflow: hidden;
}
.datamap .graph_area > div#chart {
  height: 600px;
}
.datamap .graph_area > div#chart2 {
  height: 600px;
}
.datamap .graph_area .keyword {
  padding: 4px;
  background: #ffffff;
  box-sizing: border-box;
  text-align: center;
  font-size: 0;
}
.datamap .graph_area .keyword li {
  display: inline-block;
  position: relative;
  padding-left: 18px;
  margin-right: 8px;
  font-size: 14px;
}
.datamap .graph_area .keyword li:nth-child(1) {
  color: #018580;
}
.datamap .graph_area .keyword li:nth-child(2) {
  color: #4476c6;
}
.datamap .graph_area .keyword li:nth-child(3) {
  color: #9756d5;
}
.datamap .graph_area .keyword li:nth-child(4) {
  color: #665ee4;
}
.datamap .graph_area .keyword li:before {
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  content: "";
}
.datamap .graph_area .keyword li:nth-child(1):before {
  background: #59c7bf;
}
.datamap .graph_area .keyword li:nth-child(2):before {
  background: #80adf5;
}
.datamap .graph_area .keyword li:nth-child(3):before {
  background: #a367dc;
}
.datamap .graph_area .keyword li:nth-child(4):before {
  background: #665ee4;
}
.datamap .detail_area {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  min-width: 280px;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  z-index: 999;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.datamap .detail_area .tit {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.datamap .detail_area .tit h4 {
  margin: 0;
}
.datamap .detail_area .tit .btn_close {
  display: block;
  position: absolute;
  top: 10px;
  right: 0px;
  width: 40px;
  height: 0;
  padding-top: 40px;
  overflow: hidden;
  background: url("/images/damin/common/common_ico.png") no-repeat center -180px;
  transform: rotate(45deg);
}
.datamap .detail_area .con {
  padding: 12px;
}
.datamap .detail_area .con h5 {
  margin: 0;
  padding: 0;
  background: none;
}
.datamap .detail_area .con .basic_table {
  min-width: auto;
}
.datamap .btn_prev {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 8px;
  font-size: 14px;
  background: #555;
  color: #ffffff;
}
@media all and (min-width: 768px) {
  .datamap .graph_area .keyword {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  .datamap .detail_area {
    max-width: 400px;
  }
}
.loading {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}
.loading img {
  position: absolute;
  top: 30px;
  left: calc(50% - 51px);
  animation: aniImg 3s ease-in-out infinite;
}
@keyframes aniImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading span {
  display: block;
  position: absolute;
  top: 170px;
  width: 100%;
  text-align: center;
}
.datamap .loading img {
  top: 180px;
}
.datamap .loading span {
  top: 300px;
}
/*검색*/
.datamap_sch {
  border: 3px solid #12345f;
}
.datamap_sch form {
  font-size: 0;
}
.datamap_sch input {
  display: inline-block;
  height: 40px;
  font-size: 14px;
  box-sizing: border-box;
}
.datamap_sch .form_txt {
  width: calc(100% - 50px);
  padding: 0 8px;
}
.datamap_sch .form_sm {
  float: right;
  width: 50px;
  background: #12345f;
  color: #ffffff;
}
.datamap .graph_area {
  margin-top: 10px;
  border: 1px solid #e4e4e4;
  box-sizing: border-box;
}
.datamap .detail_area {
  top: 56px;
}
.datamap .btn_prev {
  top: auto;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
@media all and (min-width: 768px) {
  .datamap_sch {
    border-width: 4px;
  }
  .datamap_sch input {
    height: 48px;
    font-size: 16px;
  }
  .datamap_sch .form_txt {
    width: calc(100% - 120px);
    padding: 0 20px;
  }
  .datamap_sch .form_sm {
    width: 120px;
  }
  .datamap .detail_area {
    top: 66px;
  }
  .datamap .btn_prev {
    bottom: 0;
  }
}
@media all and (min-width: 1024px) {
  .datamap_sch .form_txt {
    width: calc(100% - 200px);
  }
  .datamap_sch .form_sm {
    width: 200px;
  }
}
/*차트 상세정보 e*/

/*데이터*/
.data_list {
  margin-top: 20px;
}
.data_list .info_box {
  padding: 20px 20px 0;
}
.data_list .info_box li {
  position: relative;
  width: 260px;
  height: 88px;
  padding-left: 100px;
  margin: 0 auto 20px;
  box-sizing: border-box;
}
.data_list .info_box li:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 88px;
  height: 88px;
  background: url("/images/sub/sub04/data_img01.png") no-repeat center #ffffff;
  border-radius: 100%;
  content: "";
}
.data_list .info_box li:nth-child(2):after {
  background-image: url("/images/sub/sub04/data_img02.png");
}
.data_list .info_box li:nth-child(3):after {
  background-image: url("/images/sub/sub04/data_img03.png");
}
.data_list .info_box li span {
  display: inline-block;
  padding: 2px 10px;
  margin-top: 20px;
  border-radius: 20px;
  background: #12345f;
  color: #ffffff;
}
.data_list .info_box li strong {
  display: block;
  font-size: 24px;
  color: #212121;
}
.data_list .info_box li em {
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  vertical-align: baseline;
}

/*맞춤-주제별*/
.data_icon {
  margin: 20px 0;
}
.data_icon ul:after {
  display: block;
  clear: both;
  content: "";
}
.data_icon li {
  float: left;
  width: 50%;
}
.data_icon li a {
  display: block;
  padding: 8px;
  text-align: center;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.data_icon li.on a {
  background: #293b53;
  border-color: #c8d5e3;
  color: #ffffff;
  font-weight: 500;
}
.data_icon li a:hover,
.data_icon li a:focus {
  background: #12345f;
  color: #ffffff;
}

/*맞춤-생애주기별*/
.life_icon {
  margin: 20px 0;
}
.life_icon ul:after {
  display: block;
  clear: both;
  content: "";
}
.life_icon li {
  float: left;
  width: 50%;
}
.life_icon li a {
  display: block;
  padding: 8px;
  text-align: center;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.life_icon li.on a {
  background: #293b53;
  border-color: #c8d5e3;
  color: #ffffff;
  font-weight: 500;
}
.life_icon li a:hover,
.life_icon li a:focus {
  background: #12345f;
  color: #ffffff;
}

.gong_jedo {
  padding: 8px 0;
  background: #f1f5f9;
}
.gong_jedo > div {
  margin: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #ffffff;
}

/*맞춤-도정목표*/
.vision_icon {
  margin: 20px 0;
}
.vision_icon li a {
  display: block;
  padding: 8px;
  text-align: center;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.vision_icon li.on a {
  background-color: #293b53;
  border-color: #c8d5e3;
  color: #ffffff;
  font-weight: 500;
}

/*맞춤-시군별*/
.city_icon {
  margin: 20px 0;
}
.city_icon ul:after {
  display: block;
  clear: both;
  content: "";
}
.city_icon li {
  float: left;
  width: 25%;
}
.city_icon li a {
  display: block;
  padding: 8px;
  text-align: center;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.city_icon li.on a {
  background: #ffffff;
  border-color: #c8d5e3;
  color: #293b53;
  font-weight: 500;
}
.city_icon li a:hover,
.city_icon li a:focus {
  background: #12345f;
  color: #ffffff;
}

/* sub03 */
/*데이터시각화*/
.bbs_search_box {
  padding: 20px;
  margin-bottom: 20px;
  background: #f1f5f9;
}
.bbs_search_box select {
  height: 32px;
}
.bbs_search_box input[type="submit"] {
  cursor: pointer;
  height: 32px;
  padding: 0 8px;
  background: #12345f;
  color: #ffffff;
  vertical-align: middle;
  font-size: 16px;
}
.new_btn {
  margin: 20px 0;
  text-align: right;
}
.new_btn button {
  padding: 5px 35px 5px 15px;
  background: url("/images/damin/common/new_win.png") no-repeat right 15px
    center #12345f;
  color: #ffffff;
  font-size: 16px;
  border-radius: 20px;
}
.new_btn button:hover,
.bbs_search_box .new_btn button:focus {
  background-color: #293b53;
}

/*공간데이터 지도*/
.map_icon li {
  margin: 0 0 20px;
}
.map_icon li a {
  display: block;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: url("/images/damin/content/map01.png") no-repeat center top
    #f8fafc;
  padding-top: 240px;
  overflow: hidden;
}
.map_icon li a:hover,
.map_icon li a:focus {
  border-color: #c8d5e3;
}
.map_icon li.li02 a {
  background-image: url("/images/damin/content/map02.png");
}
.map_icon li.li03 a {
  background-image: url("/images/damin/content/map03.png");
}
.map_icon li.li04 a {
  background-image: url("/images/damin/content/map04.png");
}
.map_icon li.li05 a {
  background-image: url("/images/damin/content/map05.png");
}
.map_icon li.li06 a {
  background-image: url("/images/damin/content/map06.png");
}
.map_icon li.li07 a {
  background-image: url("/images/damin/content/map07.png");
}
.map_icon li.li09 a {
  background-image: url(/sppartners/images/commerce_btn.png);
}
.map_icon li a span {
  display: block;
  background: #ffffff;
  padding: 20px 0;
  text-align: center;
}
.map_icon li a strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
}
.map_icon li a em {
  display: inline-block;
  padding: 10px 42px 10px 24px;
  margin: 10px auto 0;
  font-style: normal;
  color: #12345f;
  background: url("/images/damin/common/new_win.png") no-repeat top 16px right
    22px #f1f5f9;
  border-radius: 20px;
}
.map_icon li a:hover em,
.map_icon li a:focus em {
  background: url("/images/damin/common/new_win_w.png") no-repeat top 16px right
    22px #293b53;
  color: #ffffff;
  transition: 0.3s;
}

.map_icon li.btn2 {
  position: relative;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #f8fafc no-repeat;
  padding-top: 187px;
  overflow: hidden;
}
.map_icon li.btn2:hover,
.map_icon li.btn2:focus {
  border-color: #c8d5e3;
}
.map_icon li.btn2 span {
  display: block;
  background: #ffffff;
  padding: 20px 0;
  text-align: center;
}
.map_icon li.btn2 strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
}
.map_icon li.btn2 a {
  background: none;
  display: block;
  border: none;
  border-radius: 0;
  padding: 0;
}
.map_icon li.btn2 a:last-child em {
  background-image: url("/images/damin/common/btn_down.png");
}
.map_icon li.btn2 a:last-child:hover em,
.map_icon li.btn2 a:last-child:focus em {
  background-image: url("/images/common/btn_down.png");
}

/* .map_icon li.li06 {
  background-image: url("/images/damin/content/map06.png");
  background-position: center top;
  background-size: 260px;
} */
.map_icon li.li08 {
  background-image: url("/images/damin/content/map08.png");
  background-position: center -20px;
}
.map_icon li.li08:before {
  display: block;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 94px;
  height: 28px;
  content: "";
  background: url("/images/damin/content/map08_top.png") no-repeat;
}

/*셀프분석*/
.self .basic_step li strong {
  padding: 16px 0;
  font-weight: 500;
}
.self .basic_step li span {
  height: 120px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}
.self .basic_step li:last-child span {
  border-color: #c8d5e3;
}
.self .basic_dl dt {
  color: #475569;
}
.self .basic_dl dd {
  position: relative;
  padding: 8px;
  background: #f1f5f9;
}
.self .basic_dl dd img {
  width: 100%;
  border: 1px solid #e2e8f0;
}
.self .basic_dl dd a {
  display: block;
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: auto;
  padding: 4px 8px;
  background: #12345f;
  color: #ffffff;
  font-size: 14px;
}

.self_box {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
}
.self_box:before {
  display: block;
  width: 240px;
  height: 240px;
  content: "";
  background: url("/images/damin/content/self01.png") no-repeat 0 0 / contain;
  margin: 0 auto 20px;
}
.self_box p {
  font-size: 18px;
}
.self_box h4 {
  margin: 0 0 12px 0;
  padding: 0;
  background: none;
  font-weight: 500;
}
.self_box h4 span {
  color: #12345f;
}
.self_box ul {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
.self_box li {
  margin-bottom: 20px;
}
.self_box li strong {
  display: block;
  font-size: 18px;
  color: #12345f;
  font-weight: 500;
}
.self_box li a {
  display: block;
  width: 130px;
  background: #f1f5f9;
  border-radius: 50px;
  margin: 5px 0;
  padding: 8px 20px;
  border: 1px solid #e2e8f0;
  color: #12345f;
}
.self_box li a:hover,
.self_box li a:focus {
  background: #ffffff;
  border-color: #c8d5e3;
}
.self_box li a span {
  display: block;
  padding-right: 20px;
  background: url("/images/damin/common/btn_go.png") no-repeat center right;
}

.self .basic_box2 > div {
  border-bottom: 1px dashed #e4e4e4;
}
.self .basic_box2 .logo_img img {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.self .basic_box2 .dd_none {
  background: none;
  padding: 0;
}

/*한눈에보는충남*/
.cn_stat ul:after {
  display: block;
  clear: both;
  content: "";
}
.cn_stat li {
  position: relative;
  float: left;
  width: 48%;
  margin: 1%;
}
.cn_stat li a {
  display: block;
  height: 260px;
  padding: 160px 0 30px;
  border: 1px solid #e2e8f0;
  text-align: center;
  border-radius: 10px;
}
.cn_stat li a:before {
  display: block;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  background: url("/images/damin/content/cnstat_icon.png") no-repeat #f1f5f9;
  border-radius: 100%;
  content: "";
}
.cn_stat li a strong,
.cn_stat li a span,
.cn_stat li a em {
  display: block;
}
.cn_stat li a strong {
  font-size: 20px;
  font-weight: 500;
  color: #111827;
}
.cn_stat li a em {
  font-size: 14px;
  font-style: normal;
  color: #666;
}
.cn_stat li a:hover,
.cn_stat li a:focus {
  border-color: #c8d5e3;
}
.cn_stat li a:hover strong,
.cn_stat li a:focus strong {
  color: #293b53;
}
@media all and (max-width: 450px) {
  .cn_stat li {
    float: none;
    width: 100%;
    margin: 10px auto;
  }
}
/*icon*/
.cn_stat li.li1 a:before {
  background-position: 0 0;
}
.cn_stat li.li2 a:before {
  background-position: -110px 0;
}
.cn_stat li.li3 a:before {
  background-position: -220px 0;
}
.cn_stat li.li4 a:before {
  background-position: -330px 0;
}
.cn_stat li.li5 a:before {
  background-position: 0 -110px;
}
.cn_stat li.li6 a:before {
  background-position: -110px -110px;
}
.cn_stat li.li7 a:before {
  background-position: -220px -110px;
}
.cn_stat li.li8 a:before {
  background-position: -330px -110px;
}
.cn_stat li.li9 a:before {
  background-position: 0 -220px;
}
.cn_stat li.li10 a:before {
  background-position: -110px -220px;
}
.cn_stat li.li11 a:before {
  background-position: -220px -220px;
}
.cn_stat li.li12 a:before {
  background-position: -330px -220px;
}
.cn_stat li.li13 a:before {
  background-position: 0 -330px;
}
.cn_stat li.li14 a:before {
  background-position: -110px -330px;
}
.cn_stat li.li15 a:before {
  background-position: -220px -330px;
}
.cn_stat li.li16 a:before {
  background-position: -330px -330px;
}
.cn_stat li.li17 a:before {
  background-position: 0 -440px;
}
.cn_stat li.li18 a:before {
  background-position: -110px -440px;
}
.cn_stat li.li19 a:before {
  background-position: -220px -440px;
}
.cn_stat li.li20 a:before {
  background-position: -330px -440px;
}
.cn_stat li.li21 a:before {
  background-position: 0 -550px;
}
.cn_stat li.li22 a:before {
  background-position: -110px -550px;
}
.cn_stat li.li23 a:before {
  background-position: -220px -550px;
}
.cn_stat li.li24 a:before {
  background-position: -330px -550px;
}
/*icon*/

.notice_box div {
  padding-top: 300px;
  background: url("/images/damin/content/guide04.png") no-repeat top 30px
    center / 240px;
}
.notice_box h4 {
  padding: 0;
  margin: 0;
  background: none;
  font-weight: 500;
}

/* sub05 */
/*소개*/
.int .tit_box img {
  width: 100%;
}
.int .tit_box .text {
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.2);
}
.int .tit_box .text h4 {
  margin: 0;
  padding: 0;
  background: none;
  color: #12345f;
  font-weight: 400;
}
.int .tit_box .text .tit {
  margin: 20px 0 40px;
  font-size: 18px;
}
.int .tit_box .text .tit strong {
  color: #293b53;
}
.int .tit_box .text p {
  margin-top: 20px;
}
.int .tit_box .text p br {
  display: none;
}
.int .tit_box .text p em {
  display: inline-block;
  position: relative;
  font-weight: 500;
  font-style: normal;
  color: #12345f;
}
.int .tit_box .text p em:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 11px;
  content: "";
  background: rgba(148, 163, 184, 0.1);
}
.int .con_box {
  margin-top: 60px;
  text-align: center;
}
.int .con_box p {
  font-size: 18px;
}
.int .con_box h5 {
  margin: 20px 0 40px;
  padding: 0;
  background: none;
  color: #12345f;
  font-weight: 500;
}
.int .con_box li {
  position: relative;
  padding-top: 240px;
  margin-bottom: 20px;
}
.int .con_box li:before {
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  width: 210px;
  height: 210px;
  content: "";
  transform: translateX(-50%);
  border-radius: 100%;
  background: url("/images/damin/content/int_icon.png") no-repeat #f1f5f9;
}
.int .con_box li:nth-child(2):before {
  background-position: 0 -210px;
}
.int .con_box li:nth-child(3):before {
  background-position: 0 -420px;
}
.int .con_box li strong {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #293b53;
}

/*활용가이드*/
.guide div {
  position: relative;
  padding: 260px 20px 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  border: 1px solid #91b1df;
}
.guide div:before {
  display: block;
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 240px;
  background: url("/images/damin/content/guide01.png") no-repeat center /
    contain;
}
.guide div.box02:before {
  background-image: url("/images/damin/content/guide02.png");
}
.guide div.box03:before {
  background-image: url("/images/damin/content/guide03.png");
}
.guide div.box04:before {
  background-image: url("/images/damin/content/guide04.png");
}
.guide div h4 {
  padding: 0;
  color: #12345f;
  font-weight: 400;
  background: none;
}
.guide div h4 br {
  display: none;
}

/* sub06 */
/*로그인*/
.login {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
}
.login:before {
  display: block;
  width: 240px;
  height: 240px;
  content: "";
  background: url("/images/damin/content/login01.png") no-repeat 0 0 / contain;
  margin: 0 auto 20px;
}
.login h5 {
  margin: 0 0 12px 0;
  padding: 0;
  background: none;
  font-weight: 500;
}
.login h5 span {
  color: #12345f;
}
.login ul {
  margin: 0 0 20px 0;
}
.login .login_form form li {
  margin-bottom: 12px;
}
.login .login_form form li label {
  display: inline-block;
  width: 100px;
}
.login .login_form form li input {
  width: calc(100% - 105px);
  padding: 2px 4px;
  border-bottom: 1px solid #cbd5e1;
  font-size: 15px;
}
.login .login_form form input[type="submit"] {
  display: block;
  margin: 0 auto;
  padding: 4px 12px;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  background: #12345f;
  border-radius: 5px;
  cursor: pointer;
}
.login .login_form .login_link {
  margin: 12px 0;
}
.login .login_form .login_link:after {
  display: block;
  clear: both;
  content: "";
}
.login .login_form .login_link li {
  float: left;
  position: relative;
  padding-left: 10px;
  margin-left: 10px;
  font-size: 14px;
}
.login .login_form .login_link li:after {
  display: block;
  position: absolute;
  left: 0;
  top: 5px;
  width: 1px;
  height: 8px;
  background: #e2e8f0;
  content: "";
}
.login .login_form .login_link li:first-child {
  margin: 0;
  padding: 0;
}
.login .login_form .login_link li:first-child:after {
  display: none;
}
.login .sns_login {
  margin-top: 40px;
}
.login .sns_login .sns_btn {
  margin-top: 12px;
  text-align: center;
  font-size: 0;
}
.login .sns_login .sns_btn a {
  display: inline-block;
  width: 50px;
  height: 0;
  padding-top: 50px;
  margin: 4px 4px;
  border-radius: 100%;
  background: url("/images/damin/content/login02.png") no-repeat;
  overflow: hidden;
  font-size: 14px;
}
.login .sns_login .sns_btn a.kko {
  background-position: -60px 0;
}
.login .sns_login .sns_btn a.ggle {
  background-position: -120px 0;
}
.login .sns_login .sns_btn a.fb {
  background-position: -180px 0;
}
.login .sns_login .sns_btn a.twt {
  background-position: -240px 0;
}
.login li.find_id {
  max-width: 400px;
  padding: 8px;
  margin: 12px auto;
  background: #f1f5f9;
  text-align: center;
  font-size: 18px;
}

/*회원가입*/
.reser_step {
  margin: 30px 0 0 0;
}
.reser_step ol {
  border: 1px solid #e2e8f0;
  box-shadow: 4px 4px 0 #f1f5f9;
  overflow: hidden;
  border-radius: 5px;
}
.reser_step li {
  padding: 15px;
  text-align: center;
  border-top: 1px solid #e2e8f0;
  box-sizing: border-box;
  position: relative;
}
.reser_step li:first-child {
  border: none;
}
.reser_step li.on {
  font-weight: bold;
  background: #12345f;
  color: #ffffff;
}
.reser_step li * {
  vertical-align: middle;
}
.reser_step li em {
  font-style: normal;
  font-size: 13px;
  display: block;
}
.reser_step li span {
  font-weight: 500;
  font-size: 12px;
  margin: 0 10px 0 0;
  background: #f1f5f9;
  padding: 0 7px;
  color: #12345f;
}
.reser_step li strong {
  font-size: 16px;
}
.reser_step li.on strong {
  font-weight: 500;
}

.join_box li {
  position: relative;
  margin-bottom: 20px;
  padding: 12px 0;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  text-align: center;
}
.join_box li:before {
  display: block;
  width: 94px;
  height: 105px;
  content: "";
  margin: 20px auto;
}
.join_box li:nth-child(1):before {
  background: url("/images/damin/content/join00.png");
}
.join_box li:nth-child(2):before {
  background: url("/images/damin/content/join01.png");
}
.join_box li:nth-child(3):before {
  background: url("/images/damin/content/join02.png");
}
.join_box li:nth-child(4):before {
  background: url("/images/damin/content/join03.png");
}
.join_box li strong {
  display: block;
  font-size: 24px;
  font-weight: 500;
}
.join_box li span {
  display: block;
  margin: 20px 0;
  font-size: 14px;
}
.join_box li:not(:nth-child(2)) span {
  margin-bottom: 40px;
}
.join_box li span i {
  display: block;
  font-size: 14px;
  font-style: normal;
}
.join_box li a {
  display: block;
  width: 130px;
  padding: 10px 20px;
  margin: 20px auto;
  background: #f1f5f9;
  color: #12345f;
  border-radius: 50px;
  border: 1px solid #e2e8f0;
}
.join_box li a:hover,
.join_box li a:focus {
  background: #ffffff;
  border-color: #c8d5e3;
}

.agree_box {
  margin-bottom: 40px;
}
.agree_box .ag_txt {
  max-height: 300px;
  padding: 0 12px;
  overflow-y: auto;
  border: 1px dashed #e2e8f0;
  background: #f8fafc;
}
.agree_box .ag_txt h6,
.agree_box .ag_txt .basic_p {
  margin-left: 0;
}
.agree_box .txt_box {
  margin-bottom: 20px;
}
.agree_box input {
  vertical-align: middle;
}
.agree_box .ag_all {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}

.verify {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
}
.verify:before {
  display: block;
  width: 240px;
  height: 240px;
  content: "";
  background: url("/images/damin/content/join04.png") no-repeat 0 0 / contain;
  margin: 0 auto 20px;
}
.verify h5 {
  margin: 0 0 12px 0;
  padding: 0;
  background: none;
  font-weight: 500;
}
.verify ul {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

/*사이트맵*/
.sitemap > div {
  margin-bottom: 20px;
  border-top: 2px solid #12345f;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.sitemap h4 {
  padding: 0;
  background: none;
  text-align: center;
}
.sitemap h4 a {
  color: #12345f;
}
.sitemap div div {
  padding: 20px 12px;
  background: #ffffff;
}
.sitemap div div li {
  padding: 0 0 0 10px;
  margin: 0 0 12px;
  background: url("/images/common/h6.gif") 0 6px no-repeat;
}
.sitemap div div li a {
  color: #293b53;
  font-size: 18px;
  font-weight: 600;
}
.sitemap div div li ul {
  padding: 12px;
  margin: 8px 0 0;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
}
.sitemap div div li li {
  display: inline-block;
  padding: 0 0 0 8px;
  margin: 0 15px 5px 0;
  background: url("/images/common/li02.gif") no-repeat 0 11px;
}
.sitemap div div li li a {
  color: #475569;
  font-size: 16px;
  font-weight: 400;
}

/*개인정보처리방침*/
.privacy .priv_icon:after {
  display: block;
  clear: both;
  content: "";
}
.privacy .priv_icon li {
  position: relative;
  float: left;
  width: 50%;
  background: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e4e4e4;
}
.privacy .priv_icon li span {
  display: block;
  margin: 20px auto;
  padding: 90px 0 0;
  font-size: 14px;
  text-align: center;
}
.privacy .priv_icon li span:after {
  display: block;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  content: "";
  background: url("/images/damin/content/priv_icon.png") no-repeat;
}
.privacy .priv_icon li:nth-child(1) span:after {
  background-position: -160px 0;
}
.privacy .priv_icon li:nth-child(2) span:after {
  background-position: 0 0;
}
.privacy .priv_icon li:nth-child(3) span:after {
  background-position: -80px 0;
}
.privacy .priv_icon li:nth-child(4) span:after {
  background-position: -320px 0;
}
.privacy .priv_icon li:nth-child(5) span:after {
  background-position: -240px 0;
}
.privacy .priv_icon li:nth-child(6) span:after {
  background-position: 0 -160px;
}
.privacy .priv_list li {
  position: relative;
  padding: 0;
  margin: 8px 4px;
  background: none;
}
.privacy .priv_list li span {
  vertical-align: middle;
  padding-left: 6px;
}
.privacy i {
  display: inline-block;
  width: 36px;
  height: 0;
  padding-top: 36px;
  overflow: hidden;
  background: url("/images/damin/content/priv_icon.png") no-repeat 0 0 /180px;
  vertical-align: middle;
}
.privacy i.pr01 {
  background-position: 0 0;
}
.privacy i.pr02 {
  background-position: -36px 0;
}
.privacy i.pr03 {
  background-position: -72px 0;
}
.privacy i.pr04 {
  background-position: -108px 0;
}
.privacy i.pr05 {
  background-position: -144px 0;
}
.privacy i.pr06 {
  background-position: 0 -36px;
}
.privacy i.pr07 {
  background-position: -36px -36px;
}
.privacy i.pr08 {
  background-position: -72px -36px;
}
.privacy i.pr09 {
  background-position: -108px -36px;
}
.privacy i.pr10 {
  background-position: -144px -36px;
}
.privacy i.pr11 {
  background-position: 0 -72px;
}
.privacy i.pr12 {
  background-position: -36px -72px;
}
.privacy i.pr13 {
  background-position: -72px -72px;
}
.privacy i.pr14 {
  background-position: -108px -72px;
}
.privacy i.pr15 {
  background-position: -144px -72px;
}
.privacy .basic_ul > li {
  background: none;
}

/* Tablet */
@media all and (min-width: 768px) {
  .data_list .info_box ul {
    font-size: 0;
    text-align: center;
  }
  .data_list .info_box li {
    display: inline-block;
    width: auto;
    margin: 0 40px 20px;
    text-align: left;
    font-size: 16px;
  }

  .data_icon li {
    width: 25%;
  }
  .life_icon li {
    position: relative;
    width: calc(25% - 20px);
    margin: 10px;
  }
  .life_icon li a {
    padding: 120px 0 20px;
    border-radius: 10px;
  }
  .life_icon li a:before {
    display: block;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 92px;
    content: "";
    background: url("/images/damin/content/life_icon.png") no-repeat;
  }
  .life_icon li.li1 a:before {
    background-position: center 0;
  }
  .life_icon li.li2 a:before {
    background-position: center -93px;
  }
  .life_icon li.li3 a:before {
    background-position: center -184px;
  }
  .life_icon li.li4 a:before {
    background-position: center -276px;
  }
  .life_icon li.li5 a:before {
    background-position: center -368px;
  }
  .life_icon li.li6 a:before {
    background-position: center -460px;
  }
  .life_icon li.li7 a:before {
    background-position: center -552px;
  }
  .life_icon li.on a {
    background-color: #ffffff;
    color: #12345f;
  }

  .vision_icon ul:after {
    display: block;
    clear: both;
    content: "";
  }
  .vision_icon li {
    float: left;
    width: 50%;
  }

  .city_icon li {
    position: relative;
    width: 12.5%;
  }
  .city_icon li a {
    padding-top: 60px;
  }
  .city_icon li a:before {
    display: block;
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    height: 40px;
    content: "";
    background: url("/images/damin/content/city_icon.png") no-repeat;
  }
  .city_icon li.li1 a:before {
    background-position: center 0;
  }
  .city_icon li.li2 a:before {
    background-position: center -40px;
  }
  .city_icon li.li3 a:before {
    background-position: center -80px;
  }
  .city_icon li.li4 a:before {
    background-position: center -120px;
  }
  .city_icon li.li5 a:before {
    background-position: center -160px;
  }
  .city_icon li.li6 a:before {
    background-position: center -200px;
  }
  .city_icon li.li7 a:before {
    background-position: center -240px;
  }
  .city_icon li.li8 a:before {
    background-position: center -280px;
  }
  .city_icon li.li9 a:before {
    background-position: center -320px;
  }
  .city_icon li.li10 a:before {
    background-position: center -360px;
  }
  .city_icon li.li11 a:before {
    background-position: center -400px;
  }
  .city_icon li.li12 a:before {
    background-position: center -440px;
  }
  .city_icon li.li13 a:before {
    background-position: center -480px;
  }
  .city_icon li.li14 a:before {
    background-position: center -520px;
  }
  .city_icon li.li15 a:before {
    background-position: center -560px;
  }

  .map_icon ul:after {
    display: block;
    clear: both;
    content: "";
  }
  .map_icon li {
    float: left;
    width: calc((100% - 120px) / 3);
    margin: 20px;
  }

  .self:after {
    display: block;
    clear: both;
    content: "";
  }
  .self .basic_dl {
    float: left;
    width: 48%;
    margin: 0 1% 40px;
  }
  .self .basic_dl dd {
    padding: 12px;
  }
  .self .basic_dl dd a {
    bottom: 12px;
    left: 12px;
    font-size: 16px;
  }

  .self_box li {
    position: relative;
    padding-right: 150px;
  }
  .self_box li a {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .self .basic_box2 .logo_img {
    float: left;
  }
  .self .basic_box2 dl {
    float: right;
    width: calc(100% - 330px);
  }

  .cn_stat li {
    width: calc((100% / 3) - 2%);
  }

  .int .tit_box {
    position: relative;
  }
  .int .tit_box .img {
    width: 80%;
  }
  .int .tit_box .text {
    position: absolute;
    width: 60%;
    right: 0;
    bottom: -60px;
  }
  .int .tit_box .text h4 {
    font-size: 32px;
  }
  .int .tit_box .text .tit {
    font-size: 20px;
  }
  .int .con_box {
    margin-top: 120px;
  }
  .int .con_box p {
    font-size: 20px;
  }
  .int .con_box h5 {
    font-size: 28px;
  }
  .int .con_box ul:after {
    display: block;
    clear: both;
    content: "";
  }
  .int .con_box li {
    float: left;
    width: calc(100% / 3);
  }
  .int .con_box li strong {
    padding: 12px 0;
  }
  .int .con_box li:first-child strong {
    padding: 0;
  }

  .login .login_form form:after {
    display: block;
    clear: both;
    content: "";
  }
  .login .login_form form ul {
    float: left;
    margin-bottom: 0;
    width: calc(100% - 150px);
    max-width: 400px;
  }
  .login .login_form form input[type="submit"] {
    float: left;
    width: 132px;
    padding: 20px 0;
    margin-left: 30px;
  }
  .login .sns_login {
    margin-top: 60px;
  }
  .login .sns_login:after {
    display: block;
    clear: both;
    content: "";
  }
  .login .sns_login .title {
    float: left;
    width: calc(100% - 290px);
    max-width: 290px;
  }
  .login .sns_login .sns_btn {
    float: left;
    margin: 30px 0 0 0;
  }

  .reser_step li {
    float: left;
    width: 33.33333333333333%;
    border: none;
    position: relative;
    overflow: hidden;
  }
  .reser_step li:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    transform: translate(0, -50%);
  }
  .reser_step .col2 li {
    width: 50%;
  }
  .reser_step .col3 li {
    width: 33.333%;
  }
  .reser_step .col4 li {
    width: 25%;
  }
  .reser_step .col5 li {
    width: 20%;
  }
  .reser_step li:first-child:before {
    display: none;
  }
  .join_box ul:after {
    display: block;
    clear: both;
    content: "";
  }
  .join_box li {
    float: left;
    width: calc((100% - 25px) / 2);
    height: 360px;
    margin: 0 12px 20px 0;
  }
  .join_box li:last-child {
    margin-right: 0;
  }

  .sitemap > div:after {
    display: block;
    clear: both;
    content: "";
  }
  .sitemap > div h4 {
    float: left;
    width: 250px;
  }
  .sitemap div div {
    float: right;
    width: calc(100% - 250px);
    min-height: 140px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .reser_step .col5 li span {
    margin: 0;
  }
  .reser_step .col5 li strong {
    display: block;
  }
}

/*운영지침*/
.guide02 .basic_ul > li {
  background: none;
}
.guide02 .basic_box2 dl {
  margin-bottom: 16px;
}
.guide02 .basic_step .col5 .num {
  height: 20px;
  margin-right: 8px;
  padding: 0 3px;
  background: #12345f;
  color: #ffffff;
  border-radius: 100%;
  font-size: 16px;
  line-height: 30px;
}

/*개인정보*/
.privacy .priv_icon li {
  width: calc(100% / 3);
}
.privacy .priv_list:after {
  display: block;
  clear: both;
  content: "";
}
.privacy .priv_list li {
  float: left;
  width: 48%;
  margin: 1%;
}

/* Desktop */
@media all and (min-width: 1023px) {
  .data_icon li {
    position: relative;
    width: 12.5%;
  }
  .data_icon li a {
    padding: 80px 0 20px;
  }
  .data_icon li a:before {
    display: block;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 52px;
    content: "";
    background: url("/images/damin/content/data_icon.png") no-repeat;
  }
  .data_icon li.li1 a:before {
    background-position: center 0;
  }
  .data_icon li.li2 a:before {
    background-position: center -52px;
  }
  .data_icon li.li3 a:before {
    background-position: center -104px;
  }
  .data_icon li.li4 a:before {
    background-position: center -156px;
  }
  .data_icon li.li5 a:before {
    background-position: center -208px;
  }
  .data_icon li.li6 a:before {
    background-position: center -260px;
  }
  .data_icon li.li7 a:before {
    background-position: center -312px;
  }
  .data_icon li.li8 a:before {
    background-position: center -364px;
  }
  .data_icon li.li9 a:before {
    background-position: center -416px;
  }
  .data_icon li.li10 a:before {
    background-position: center -468px;
  }
  .data_icon li.li11 a:before {
    background-position: center -520px;
  }
  .data_icon li.li12 a:before {
    background-position: center -572px;
  }
  .data_icon li.li13 a:before {
    background-position: center -624px;
  }
  .data_icon li.li14 a:before {
    background-position: center -676px;
  }
  .data_icon li.li15 a:before {
    background-position: center -728px;
  }
  .data_icon li.li16 a:before {
    background-position: center -781px;
  }
  .data_icon li.on a {
    background: #ffffff;
    color: #12345f;
  }
  .life_icon li {
    width: calc((100% / 7) - 20px);
  }
  .vision_icon li {
    width: calc((100% / 5) - 20px);
    margin: 0 10px;
  }
  .vision_icon li a {
    height: 180px;
    padding: 120px 0 0;
    border-radius: 50px 0 50px 0;
    background: url("/images/damin/content/vision_icon.png") no-repeat;
    box-sizing: border-box;
  }
  .vision_icon li.li1 a {
    background-position: center 0;
    background-color: #fff5e5;
    border-color: #fbe0b2;
  }
  .vision_icon li.li2 a {
    background-position: center -180px;
    background-color: #fff1e7;
    border-color: #f9cfb2;
  }
  .vision_icon li.li3 a {
    background-position: center -360px;
    background-color: #f1ffe4;
    border-color: #d4eabf;
  }
  .vision_icon li.li4 a {
    background-position: center -540px;
    background-color: #ebf8fe;
    border-color: #b2def2;
  }
  .vision_icon li.li5 a {
    background-position: center -720px;
    background-color: #fff1fc;
    border-color: #ead0e4;
  }
  .vision_icon li.on a {
    color: #111827;
    font-weight: 500;
    background-color: #ffffff;
    border: 4px solid #c8d5e3;
    font-size: 18px;
  }
  .vision_icon li a:hover,
  .vision_icon li a:focus {
    background-color: #293b53;
    color: #ffffff;
    font-weight: 500;
  }

  .gong_jedo {
    padding: 12px 0;
  }
  .gong_jedo:after {
    display: block;
    clear: both;
    content: "";
  }
  .gong_jedo > div {
    float: left;
    width: calc((100% / 3) - 24px);
    min-height: 185px;
    margin: 0 12px;
  }

  .self_box {
    position: relative;
    padding: 40px 40px 40px 360px;
    margin: 40px 0;
    min-height: 400px;
  }
  .self_box:before {
    position: absolute;
    left: 40px;
    top: 40px;
  }
  .self_box p {
    font-size: 20px;
  }
  .self_box h4 {
    margin: 0 0 20px;
    font-size: 36px;
  }
  .self_box li strong {
    margin-bottom: 6px;
    font-size: 20px;
  }

  .cn_stat li {
    width: 23%;
  }
  .notice_box div {
    padding: 60px 30px 30px 210px;
    background-position: left 30px top 30px;
    background-size: 150px;
  }

  .int .tit_box .text {
    width: 650px;
    padding: 30px;
  }
  .int .tit_box .text h4 {
    font-size: 48px;
  }
  .int .tit_box .text p br {
    display: inline-block;
  }
  .int .tit_box .text .tit {
    font-size: 24px;
  }
  .int .con_box {
    margin-top: 150px;
  }
  .int .con_box p {
    font-size: 24px;
  }
  .int .con_box h5 {
    font-size: 36px;
  }
  .int .con_box li strong {
    font-size: 20px;
  }

  .guide {
    padding: 20px;
  }
  .guide:after {
    display: block;
    clear: both;
    content: "";
  }
  .guide div {
    float: left;
    width: calc(50% - 40px);
    margin: 20px;
    height: 660px;
  }
  .guide div h4 {
    font-size: 28px;
  }
  .guide div a {
    font-size: 18px;
  }

  .login {
    position: relative;
    padding: 40px 40px 40px 360px;
    margin: 40px 0;
    min-height: 400px;
  }
  .login:before {
    position: absolute;
    left: 40px;
    top: 40px;
  }
  .login h5 {
    margin: 20px 0 12px;
    font-size: 28px;
  }
  .login .login_form {
    margin: 40px 0;
  }
  .login .sns_login {
    margin-top: 80px;
  }

  .join_box li {
    width: calc((100% - 60px) / 4);
    height: 430px;
    margin: 0 20px 40px 0;
    padding: 30px 0;
  }
  .join_box li:nth-child(2) {
    letter-spacing: -1px;
  }
  .join_box li:hover {
    border-color: #e2e8f0;
    box-shadow: 0 0 20px rgba(148, 163, 184, 0.1);
  }
  .join_box li span {
    margin: 40px 0 0;
  }
  /*
.join_box li:nth-child(1) span, .join_box li:nth-child(2) span{margin-bottom: 20px;}
*/
  .verify {
    position: relative;
    padding: 40px 40px 40px 360px;
    margin: 40px 0;
    min-height: 400px;
  }
  .verify:before {
    position: absolute;
    left: 40px;
    top: 40px;
  }
  .verify h5 {
    margin: 20px 0 12px;
    font-size: 28px;
  }

  .sitemap > div {
    background: url("/images/damin/common/menu_bg.png") left 10px bottom / 180px
      no-repeat #f8fafc;
  }
  .sitemap > div h4 {
    width: 300px;
  }
  .sitemap div div {
    width: calc(100% - 300px);
  }

  .guide02 .basic_step .col4 li:nth-child(3) span {
    height: 82px;
    line-height: 54px;
  }
  .guide02 .basic_box2 dl:after {
    display: block;
    clear: both;
    content: "";
  }
  .guide02 .basic_box2 dt,
  .guide02 .basic_box2 dd {
    float: left;
  }
  .guide02 .basic_box2 dd {
    margin-left: 10px;
    background: none;
  }
}

@media all and (min-width: 1400px) {
  .gong_jedo > div {
    min-height: 140px;
  }

  /* .map_icon li{width: calc((100% - 160px)/4);margin: 20px;} */
  .map_icon li {
    width: calc((100% - 120px) / 3);
  }
  .vision_icon li {
    width: calc((100% / 5) - 40px);
    margin: 0 20px;
  }
  .vision_icon li a {
    font-size: 16px;
    padding-top: 125px;
  }

  .city_icon li {
    width: calc(100% / 15);
  }

  .self .basic_dl {
    width: 23%;
  }
  .self_box {
    padding: 60px 80px 60px 480px;
  }
  .self_box:before {
    width: 300px;
    height: 300px;
    background-size: auto;
    left: 80px;
  }

  .int .tit_box .img {
    width: 960px;
  }
  .int .con_box ul {
    width: 1200px;
    margin: 0 auto;
  }

  .guide div {
    height: 470px;
  }
  .guide div.box01 {
    padding: 0 24px 0 290px;
  }
  .guide div.box02 {
    padding: 0 290px 0 24px;
  }
  .guide div.box03 {
    padding: 0 24px 0 290px;
  }
  .guide div.box04 {
    padding: 0 290px 0 24px;
  }
  .guide div:before {
    width: 300px;
    height: 300px;
    transform: none;
  }
  .guide div.box01:before {
    top: -40px;
    left: -40px;
  }
  .guide div.box02:before {
    top: -40px;
    left: auto;
    right: -40px;
  }
  .guide div.box03:before {
    top: auto;
    bottom: -40px;
    left: -40px;
  }
  .guide div.box04:before {
    top: auto;
    left: auto;
    bottom: -40px;
    right: -40px;
  }
  .guide div h4 {
    margin: 60px 0 40px;
  }
  .guide div h4 br {
    display: inline-block;
  }
  .guide div .basic_btn {
    text-align: left;
  }

  .login {
    padding: 60px 80px 60px 480px;
  }
  .login:before {
    width: 300px;
    height: 300px;
    background-size: auto;
    left: 80px;
  }

  .verify {
    padding: 60px 80px 60px 480px;
  }
  .verify:before {
    width: 300px;
    height: 300px;
    background-size: auto;
    left: 80px;
  }
  .verify .txt {
    font-size: 18px;
  }

  .privacy .priv_icon li {
    width: calc(100% / 6);
  }
  .privacy .priv_list li {
    width: 31.333333%;
  }
}

/* 충남의 주요지표 */
.zipyo {
  position: relative;
  margin-top: 30px;
}

.sch_zipyo {
  padding: 20px;
  margin-bottom: 20px;
  background: #f1f5f9;
}
.sch_zipyo select {
  height: 32px;
}
.sch_zipyo button {
  cursor: pointer;
  height: 32px;
  padding: 0 8px;
  background: #12345f;
  color: #ffffff;
  vertical-align: middle;
}

.status_box {
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 20px;
  background: #f8fafc;
  box-sizing: border-box;
  border: 1px solid #f1f5f9;
}
.status_box .title {
  position: relative;
  padding-bottom: 5px;
  border-bottom: 1px solid #12345f;
  min-height: 29px;
}
.status_box .title:after {
  display: block;
  clear: both;
  content: "";
}
.status_box .title h4 {
  width: 100%;
  height: 29px;
  margin: 0;
  padding-left: 0;
  background: none;
  font-size: 20px;
  color: #12345f;
}
.status_box .title h4 span {
  font-weight: 400;
  color: #475569;
}
.status_box .title p {
  float: right;
}
.status_box .title p span {
  float: left;
  min-width: 150px;
  text-align: right;
}
.status_box .title p span em {
  display: inline-block;
}
.status_box li {
  padding: 12px;
  margin-top: 20px;
  border: 1px solid #f1f5f9;
  background: #ffffff;
  font-size: 18px;
}
.status_box li sub {
  vertical-align: bottom;
}
.status_box li span {
  display: block;
  height: 28px;
}
.status_box li span em {
  float: right;
  margin-top: 3px;
}
.status_box span strong {
  color: #12345f;
  font-size: 20px;
}
.status_box span em {
  padding-left: 18px;
  font-style: normal;
}

.status_box2 {
  padding: 20px 20px 0;
  margin-bottom: 30px;
  border: 1px solid #f1f5f9;
}
.status_box2 li {
  padding-bottom: 20px;
  margin-bottom: 20px;
  font-size: 18px;
  border-bottom: 1px solid #f1f5f9;
}
.status_box2 li:last-child {
  margin-bottom: 0;
  border: none;
}
.status_box2 li span {
  display: block;
  text-align: right;
}
.status_box2 span strong {
  float: left;
  color: #12345f;
  font-size: 20px;
}
.status_box2 span em {
  display: inline-block;
  padding-left: 18px;
  margin-top: 3px;
  font-style: normal;
}
.status_box2 li sub {
  display: inline-block;
  margin: 5px 0 0 6px;
  letter-spacing: -1px;
}

.status_box2 .col1 span em {
  margin-left: 10px;
}

.zipyo .over_table {
  margin: 10px 0 20px;
}
.zipyo .over_table h6 {
  margin: 10px 0;
}
.zipyo .over_table h6:after {
  display: block;
  clear: both;
  content: "";
}
.zipyo .over_table h6 span {
  float: right;
  margin-top: 4px;
  font-size: 0.8em;
  font-weight: 400;
  color: #475569;
}
.img_map {
  width: 100%;
  height: calc(100% - 47px);
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
  overflow-x: auto;
}
.grp_area {
  width: 100%;
  height: 450px;
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
}

/* 지표 상태변경 */
span.g_down strong,
span.r_down strong {
  color: #d64545;
}
span.g_up strong,
span.r_up strong {
  color: #01837e;
}
span.r_up em,
span.g_up em {
  background: url("/images/sub/zipyo/new_up.png") no-repeat left 8px /12px;
}
span.r_down em,
span.g_down em {
  background: url("/images/sub/zipyo/new_down.png") no-repeat left 8px /12px;
}

/* 지도 시군 표시 */
.img_map > div {
  position: relative;
  width: 678px;
  margin: auto;
  overflow: hidden;
}
.img_map img {
  display: block;
  width: 640px;
  margin: 30px 0 0 20px;
}
.img_map dl {
  position: absolute;
  min-width: 85px;
}
.img_map dl dt {
  width: 50px;
  padding: 0 0 3px;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
  background: #12345f;
  border-radius: 20px;
  font-weight: 600;
}
.img_map dl dd {
  text-align: center;
}
/*태안*/
.img_map dl.map01 {
  top: 140px;
  left: 30px;
}
/*서산*/
.img_map dl.map02 {
  top: 140px;
  left: 130px;
}
/*당진*/
.img_map dl.map03 {
  top: 60px;
  left: 200px;
}
/*아산*/
.img_map dl.map04 {
  top: 120px;
  left: 330px;
}
/*천안*/
.img_map dl.map05 {
  top: 100px;
  left: 440px;
}
/*예산*/
.img_map dl.map06 {
  top: 190px;
  left: 250px;
}
/*홍성*/
.img_map dl.map07 {
  top: 250px;
  left: 170px;
}
/*보령*/
.img_map dl.map08 {
  top: 370px;
  left: 170px;
}
/*청양*/
.img_map dl.map09 {
  top: 310px;
  left: 280px;
}
/*공주*/
.img_map dl.map10 {
  top: 280px;
  left: 380px;
}
/*서천*/
.img_map dl.map11 {
  top: 490px;
  left: 220px;
}
/*부여*/
.img_map dl.map12 {
  top: 420px;
  left: 300px;
}
/*논산*/
.img_map dl.map13 {
  top: 450px;
  left: 410px;
}
/*금산*/
.img_map dl.map14 {
  top: 490px;
  left: 540px;
}
/*계룡*/
.img_map dl.map15 {
  top: 370px;
  left: 500px;
}
.img_map dl.map15:after {
  display: block;
  position: absolute;
  top: 53px;
  left: -15px;
  width: 6px;
  height: 6px;
  content: "";
  background: #12345f;
  border-radius: 100%;
}
.img_map dl.map15:before {
  display: block;
  position: absolute;
  top: 13px;
  left: -12.5px;
  width: 1px;
  height: 40px;
  content: "";
  background: #12345f;
}
.img_map dl.map15 dt:before {
  display: block;
  position: absolute;
  top: 13px;
  left: -12px;
  width: 30px;
  height: 1px;
  content: "";
  background: #12345f;
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}
.loading img {
  position: absolute;
  top: 30px;
  left: calc(50% - 51px);
  animation: aniImg 3s ease-in-out infinite;
}
@keyframes aniImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading span {
  display: block;
  position: absolute;
  top: 170px;
  width: 100%;
  text-align: center;
  color: #293b53;
}

/*데이터없음*/
.data_none {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 9999;
}
.data_none div {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 60px 20px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #c8d5e3;
  width: 80%;
}
.data_none .title {
  font-size: 24px;
  font-weight: 600;
  color: #293b53;
}

/*지표타이틀*/
.zipyo_tit p {
  padding: 0 0 0 32px;
  margin: 30px 0 20px;
  font-size: 28px;
  font-weight: 600;
  background: url(/images/common/h4.png) no-repeat 0 14px;
}

/* Tablet */
@media all and (min-width: 768px) {
  .sch_zipyo {
    margin: 10px 10px 30px;
  }

  .zipyo .over_table .scroll_guide {
    display: none;
  }

  .status_box {
    padding: 30px;
    margin: 0 10px 30px;
  }
  .status_box .title p {
    position: absolute;
    top: 5px;
    right: 0;
  }
  .status_box ul:after {
    display: block;
    clear: both;
    content: "";
  }
  .status_box li {
    float: left;
    width: calc((100% - 40px) / 2);
    height: 97px;
    padding: 20px 20px 0;
    margin: 20px 10px 0;
    box-sizing: border-box;
  }

  .status_box2 {
    padding: 20px 30px 0;
    margin: 0 10px 30px;
  }
  .status_box2 ul:after {
    display: block;
    clear: both;
    content: "";
  }
  .status_box2 li {
    float: left;
    width: calc((100% - 30px) / 2);
    padding: 0 30px 0 0;
    margin-right: 30px;
    border: none;
    border-right: 1px solid #f1f5f9;
    box-sizing: border-box;
  }
  .status_box2 .col3 li {
    width: calc((100% - 40px) / 3);
    padding: 0 20px 0 0;
    margin-right: 20px;
  }
  .status_box2 .col1 li {
    float: none;
    width: auto;
    margin-bottom: 20px;
  }
  .status_box2 li:last-child {
    margin-right: 0;
    padding-right: 0;
  }

  .loading img {
    top: 50px;
  }
  .data_none div {
    width: auto;
    top: 50px;
  }

  .zipyo_tit p {
    margin-bottom: 40px;
    font-size: 32px;
    background-position: 0 18px;
  }
}

/* Desktop */
@media all and (min-width: 1023px) {
  .zipyo:after {
    display: block;
    clear: both;
    content: "";
  }
  .status_box.left {
    width: 70%;
    float: left;
    margin-right: 20px;
  }
  .status_box.right {
    width: calc(30% - 50px);
    float: left;
  }

  .status_box li {
    width: 100%;
    padding: 20px 10px 0;
    letter-spacing: -1px;
  }
  .status_box .col4 li {
    width: calc(25% - 20px);
  }
  .status_box .col3 li {
    width: calc((100% / 3) - 21px);
  }
  .status_box .col2 li {
    width: calc(50% - 20px);
    height: 70px;
  }
  .status_box .col2 li span {
    width: 55%;
    float: right;
  }

  .status_box.right li {
    margin: 20px 0 0;
  }

  .status_box2 li span {
    width: 54%;
    float: right;
  }
  .status_box2 .col1 {
    width: 50%;
    margin: 0 auto;
  }
  .status_box2 .col3 li span {
    width: 70%;
  }

  .zipyo .col:after {
    display: block;
    clear: both;
    content: "";
  }
  .zipyo .col .over_table {
    width: calc(50% - 20px);
    height: 680px;
    margin: 0 10px 20px;
    float: left;
    overflow: hidden;
  }
  .grp_area {
    height: 450px;
  }
  .col .grp_area {
    height: calc(100% - 47px) !important;
  }
  .col .grp_area.h50 {
    height: calc(50% - 47px) !important;
  }
  .col .grp_area.h30 {
    height: calc(33.3% - 47px) !important;
  }
  .zipyo.half .col .over_table {
    height: 400px;
  }
}
@media all and (min-width: 1400px) {
  .status_box li {
    padding: 20px 20px 0;
    letter-spacing: normal;
  }
}

.zipyo_tit > em,
.status_box2 .col1 + em {
  display: none;
}