/* 에러페이지 */
.e-wrap {
  position: absolute;
  text-align: center;
  color: #363636;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fa-exclamation-circle {
  color: #07469f;
  font-size: 40px;
  margin-bottom: 50px;
}

.e-sub-text {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 30px;
  color: #595959;
}

/* 메인 */
header {
  width: 100%;
  height: 110px;

}

header.bbtm {
/*   border-bottom: 1px solid #dbdbdb; */
}

.h-wrap {
  width: 1260px;
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
flex-direction: column;
justify-content: space-around;
  height:100px;
}

.h-left {
  display: flex;
  align-items: center;
}

.logo {
  width: 260px;
}

.logo>a>img {
  width: 100%;
}

.logo-text {
  color: #536289;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
}

.gnb {
  display: flex;
}

.gnb>li {
  position: relative;
  width: 150px;
  text-align: left;
  font-weight: 500;
    margin: 0px 10px;
}
.gnb>li:first-child {width: 70px;}
.gnb>li:nth-child(2) {width: 160px;}
.gnb>li:nth-child(3) {width: 150px;}
.gnb>li:nth-child(4) {width: 150px;}
.gnb>li:nth-child(5) {width: 150px;}
.gnb>li:nth-child(6) {width: 120px;}
.gnb>li>a {
  font-size: 20px;
  padding: 26px 0;
/*   display: inline-block; */
  position: relative;
  color: #000;
  z-index: 2;
}
.gnb>li:nth-child(2)>a {
 left:30px;
}
.gnb>li:nth-child(5)>a {
 left:20px;
}

.gnb>li:hover>a {
  color: #3678c3;
  font-weight: 500;
}

.gnb>li>a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 0;
  height: 2px;
  background-color: #3678c3;
  transition: all .5s;
}

.gnb>li>a::before {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 20px;
  width: 0;
  height: 2px;
  background-color: #3678c3;
  transition: all .5s;
}

.gnb>li>a:hover:after {
  width: 50%;
}

.gnb>li>a:hover::before {
  width: 50%;
}

/* depth 메뉴 */
.depth2 {
  position: absolute;
  z-index: 10;
  display: none;
  top: 70px;
/*   left: 70%; */
/*   transform: translateX(-50%); */
  width:120px;
}
/* .depth2:before { */
/* 	  content: ""; */
/*   position: absolute; */
/*   left: 0; */
/*   top: 0; */
/*   width: 2px; */
/*   height: 100%; */
/*   background: #ddd; */
/* } */
.gnb>li:first-child .depth2 {width:70px;}
.gnb>li:nth-child(2) .depth2 {width:160px;}
.gnb>li:nth-child(3) .depth2 {width:150px;}
.gnb>li:nth-child(4) .depth2 {width:150px}
.gnb>li:nth-child(5) .depth2 {width:150px;}
.gnb>li:nth-child(6) .depth2 {width:120px;}
.depth2>li {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0px
}

.depth2>li>a {
  display: inline-block;
  position: relative;
  color: #898989;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
}

.depth2>li:hover>a {
  color: #000;
  font-size: 14px;
}

.depth2>li>a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 1px;
  background-color: #000;
  transition: all .5s;
}

.depth2>li>a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -5px;
  width: 0;
  height: 1px;
  background-color: #000;
  transition: all .5s;
}

.depth2>li>a:hover:after {
  width: 50%;
}

.depth2>li>a:hover::before {
  width: 50%;
}

.gnb-bg {
  display: none;
  position: absolute;
  width: 100%;
  height: 250px;
  background-color: #f5f5f5;
  border-top: 1px solid #dcdee5;
  border-bottom: 1px solid #dcdee5;
  top: 110px;
  left: 0;
  z-index: 9;
}

.user-position {
  position: relative;
}

.user {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #111;
}

.user>span {
  font-size: 14px;
  position: relative;
}

.user:hover span {
  color: #357db5;
}

.user>span::before {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 1px;
  background-color: #3678c3;
  transition: all .5s;
}

.user>span::after {
  display: block;
  content: "";
  position: absolute;
  right: 50%;
  bottom: -5px;
  width: 0;
  height: 1px;
  background-color: #3678c3;
  transition: all .5s;
}

.user>span:hover:after {
  width: 50%;
}

.user>span:hover::before {
  width: 50%;
}

/* .icon-wrap>i {
  font-size: 18px;
} */



/* 메인 */
#main-container {
  width: 100%;
}

#main-container .center {
  width: 1260px;
  margin: 0 auto;
  padding-top: 20px;
}

#container {
  width: 1260px;
  margin: 30px auto 0;
}



.main-wrap {
  width: 1260px;
  position: relative;
}

.doctor {
  width: 300px;
  height: 420px;
  background: url(/resources/images/main/main01.jpg) no-repeat;
  color: #fff;
  margin: 0 20px 20px 0;
}

.doctor p {
  padding: 30px 0px 5px 30px;
  font-size: 16px;
  box-sizing: border-box;
}

.doctor strong {
  margin-left: 30px;
  font-size: 24px;
  font-weight: bold;
}

.department {
  width: 300px;
  height: 200px;
  background: url(/resources/images/main/main04.jpg) no-repeat;
}

.department h3 {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  padding: 30px 0 0 30px;
}

.slide {
  width: 940px;
  height: 460px;
  color: #fff;
  font-weight: 600;
}

.center {
  position: relative;
}

.center2 {
  position: relative;
}

.view {
  width: 100%;
  height: 460px;
  padding: 30px 0;
  box-sizing: border-box;
}

.view2 {
  width: 100%;
  height: 460px;
  padding: 30px 0;
  box-sizing: border-box;
}

.slide-box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.slide-box:first-child {
  display: block;
}

.slide-box2 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.slide-box2:first-child {
  display: block;
}

.slide-text {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
}

.slide-text h2 {
  padding: 0px 0px 25px 80px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
}

.slide-text p {
  padding: 0px 0px 0px 80px;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.2;
}

.v-btn {
  position: absolute;
  left: 80px;
  top: 70%;
}

.v-btn2 {
  position: absolute;
  left: 80px;
  top: 84%;
}

.v-btn2 li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-indent: -9999px;
  margin: 0 5px;
  float: left;
}

.v-btn li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-indent: -9999px;
  margin: 0 5px;
  float: left;
}

.v-btn li a {
  display: block;
  height: 100%;
}

.v-btn2 li a {
  display: block;
  height: 100%;
}

.v-btn li.on {
  background-color: #fff;
}

.v-btn2 li.on {
  background-color: #fff;
}

.v-blue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%);
}

.v-blue li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #e1e1e1;
  text-indent: -9999px;
  margin: 0 5px;
  float: left;
}

.v-blue li a {
  display: block;
  height: 100%;
}

.v-blue li.on {
  background-color: #357db5;
}

.m-s-tit {
  box-sizing: border-box;
  margin-bottom: 30px;
  color: #8c97a7;
}

.m-s-tit h2 {
  font-size: 28px;
  color: #fff;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 55px;
}

.m-s-tit h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 26px;
  font-weight: 500;
}

.m-s-tit p {
  font-size: 18px;
  color: #a1aab7;
  margin-bottom: 100px;
  line-height: 1.3;
}

.cicle {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #a7adbe;
  margin-right: 5px;
}

.cont2 {
  width: 300px;
  height: 460px;
  background-color: #36619d;
  padding: 36px 38px;
  box-sizing: border-box;
  border-radius: 15px;
}

.cont3 {
  width: 300px;
  height: 320px;
  background-color: #6b57bd;
  color: #fff;
  padding: 36px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15px;
}

/* 그래프 */
.graphWrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0px auto 0;
  border-bottom: 1px solid #dddddd;
}

.graphWrap .graph {
  height: 100%;
  background: url(/resources/images/main/bg-border.png) 100% 100% no-repeat;
}

.graphWrap .graph:first-child {
  height: 100%;
  background: url(/resources/images/main/bg-border2.png) 100% 100% no-repeat;
}

.graphWrap .graph>div {
  position: absolute;
  bottom: 0;
  width: 25px;
}

.graphWrap .graph>div#item1 {
  left: 10px;
  background: #35c4b8;
}

.graphWrap .graph>div#item1 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item2 {
  left: 65px;
  background: #359ab5;
}

.graphWrap .graph>div#item2 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item3 {
  left: 115px;
  background: #35c4b8;
}

.graphWrap .graph>div#item3 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item4 {
  left: 170px;
  background: #359ab5;
}

.graphWrap .graph>div#item4 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item11 {
  left: 10px;
  background: #35c4b8;
}

.graphWrap .graph>div#item11 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item12 {
  left: 65px;
  background: #359ab5;
}

.graphWrap .graph>div#item12 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item13 {
  left: 115px;
  background: #35c4b8;
}

.graphWrap .graph>div#item13 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item14 {
  left: 170px;
  background: #359ab5;
}

.graphWrap .graph>div#item14 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item15 {
  left: 10px;
  background: #35c4b8;
}

.graphWrap .graph>div#item15 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item16 {
  left: 65px;
  background: #359ab5;
}

.graphWrap .graph>div#item16 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item17 {
  left: 115px;
  background: #35c4b8;
}

.graphWrap .graph>div#item17 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item18 {
  left: 170px;
  background: #359ab5;
}

.graphWrap .graph>div#item18 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph>div#item5 {
  left: 47px;
  background: #6b57bd;
}

.graphWrap .graph>div#item5 span {
  position: absolute;
  left: -5px;
  top: -45px;
  color: #6b57bd;
}

.graphWrap .graph>div#item6 {
  right: 47px;
  background: #b589e1;
}

.graphWrap .graph>div#item6 span {
  position: absolute;
  left: -5px;
  top: -45px;
  color: #b589e1;
}

.graphWrap .graph>div#item7 {
  left: 47px;
  background: #6b57bd;
}

.graphWrap .graph>div#item7 span {
  position: absolute;
  left: -8px;
  top: -45px;
  color: #6b57bd;
}

.graphWrap .graph>div#item8 {
  right: 47px;
  background: #b589e1;
}

.graphWrap .graph>div#item8 span {
  position: absolute;
  left: -8px;
  top: -45px;
}

.graphWrap .graph>div#item9 {
  left: 47px;
  background: #6b57bd;
}

.graphWrap .graph>div#item9 span {
  position: absolute;
  left: -8px;
  top: -45px;
  color: #6b57bd;
}

.graphWrap .graph>div#item10 {
  right: 47px;
  background: #b589e1;
}

.graphWrap .graph>div#item10 span {
  position: absolute;
  left: -8px;
  top: -45px;
}

/* 애니메이션 */
.p-100 {
  height: 100px;
  animation: p-100 2s;
}

.p-90 {
  height: 90px;
  animation: p-90 2s;
}

.p-80 {
  height: 80px;
  animation: p-80 2s;
}

.p-70 {
  height: 70px;
  animation: p-70 2s;
}

.p-60 {
  height: 60px;
  animation: p-60 2s;
}

.p-50 {
  height: 50px;
  animation: p-50 2s;
}

.p-49 {
  height: 49px;
  animation: p-49 2s;
}

.p-48 {
  height: 48px;
  animation: p-48 2s;
}

.p-47 {
  height: 47px;
  animation: p-47 2s;
}

.p-40 {
  height: 40px;
  animation: p-40 2s;
}

.p-39 {
  height: 39px;
  animation: p-40 2s;
}

.p-35 {
  height: 35px;
  animation: p-40 2s;
}

.p-32 {
  height: 32px;
  animation: p-40 2s;
}

.p-30 {
  height: 30px;
  animation: p-40 2s;
}

@keyframes p-100 {
  from {
    height: 0px
  }

  to {
    height: 100px
  }
}

@keyframes p-90 {
  from {
    height: 0px
  }

  to {
    height: 90px
  }
}

@keyframes p-80 {
  from {
    height: 0px
  }

  to {
    height: 80px
  }
}

@keyframes p-70 {
  from {
    height: 0px
  }

  to {
    height: 70px
  }
}

@keyframes p-60 {
  from {
    height: 0px
  }

  to {
    height: 60px
  }
}

@keyframes p-50 {
  from {
    height: 0px
  }

  to {
    height: 50px
  }
}

@keyframes p-49 {
  from {
    height: 0px
  }

  to {
    height: 49px
  }
}

@keyframes p-48 {
  from {
    height: 0px
  }

  to {
    height: 48px
  }
}

@keyframes p-47 {
  from {
    height: 0px
  }

  to {
    height: 47px
  }
}

@keyframes p-40 {
  from {
    height: 0px
  }

  to {
    height: 40px
  }
}

@keyframes p39 {
  from {
    height: 0px
  }

  to {
    height: 39px
  }
}

@keyframes p-35 {
  from {
    height: 0px
  }

  to {
    height: 35px
  }
}

@keyframes p-32 {
  from {
    height: 0px
  }

  to {
    height: 32px
  }
}

@keyframes p-30 {
  from {
    height: 0px
  }

  to {
    height: 30px
  }
}

.year {
  width: 200px;
  margin: 17px auto 0;
}

.year li {
  width: 40px;
  text-align: center;
  color: #000;
  font-weight: 500;
  font-size: 14px;
}

.year1 {
  width: 120px;
}

.cont4 {
  width: 300px;
  height: 320px;
  background-color: #37a8c7;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15px;
  box-sizing: border-box;
}

.cont4 h3 {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0;
  width: 220px;
}

.cont4 .btn-w {
  margin-top: 21px;
}

.cont4 img {
  width: 90px;
  margin: 0 auto;
}

.cont5 {
  width: 619px;
  height: 320px;
  background-color: #35c4b8;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.cont5 img {
  width: 177px;
  margin: 0 auto;
}

.cont5 .p-img {
  position: absolute;
  right: 29px;
  bottom: 0px;
}

.cont4.cont4-1 {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  padding: 35px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15px;
  box-sizing: border-box;
  position: relative;
}

.bot-arrow {
  position: relative;
  margin-right: 30px;
}

.bot-arrow img {
  width: 126px;
}

.bot-arrow>span {
  color: #000;
  font-size: 16px;
  display: block;
  margin-top: 15px;
}

.top-arrow {
  position: relative;
}

.top-arrow img {
  width: 126px;
}

.top-arrow>span {
  color: #000;
  font-size: 16px;
  display: block;
  margin-top: 15px;
}

.c1-slide {
  height: 176px;
}

.bot-count {
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #4898d6;
  font-size: 20px;
  font-weight: 500;
}

.top-count {
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f35b7c;
  font-size: 20px;
  font-weight: 500;
}

.count_num {
  width: 40px;
  text-align: center;
}

.num7>p {
  font-size: 40px;
  color: #043984;
  font-weight: bold;
}

.item-text2 {
  font-size: 40px;
  color: #043984;
  font-weight: bold;
}

.item-text3 {
  font-size: 35px;
  color: #5699d2;

}

.item-text4 {
  font-size: 20px;
  color: #5699d2;
}

.cont4.cont4-2 {
  background-color: #f8f8f8;
  border: 1px solid #e1e1e1;
  position: relative;
  padding: 35px 40px 20px;
}

.cont4.cont4-3 {
  background-color: #ffffff;
  border: 1px solid #e1e1e1;
  position: relative;
  padding: 35px 40px 20px;
}

.cont4.cont4-3 img {
  width: 160px;
  text-align: center;
}

.cont4.cont4-4 {
  background-color: #f8f8f8;
  border: 1px solid #e1e1e1;
  position: relative;
  padding: 35px 40px 20px;
}

.cont4 h3 {
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin-bottom: 33px;
}

.btn-w {
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 16px 0;
  box-sizing: border-box;
}

.btn-w.btn-black {
  border: 1px solid #898989;
  background-color: #fff;
  border-radius: 30px;
  padding: 10.5px 0;
  box-sizing: border-box;
}

.item-text {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #043984;
}

.num10-wrap .percent {
  position: absolute;
  top: 11%;
  left: 70%;
  transform: translate(-50%, -50%);
  color: #043984;
}

.num10-wrap span {
  position: absolute;
  top: 11%;
  left: 34%;
  transform: translate(-50%, -50%);
  color: #043984;
}

.btn-w span {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin-right: 33px;
}

.btn-w.btn-black span {
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin-right: 0;
}

.img-w {
  width: 18px;
}

.btn-w img {
  width: 100%;
}

.btn-w.btn-w-b {
  border: 1px solid #898989;
  border-radius: 30px;
  padding: 10px 0;
  margin: 0 0 0 160px;
  box-sizing: border-box;
}

.btn-w.btn-w-b span {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  margin-right: 10px;
}

.btn-w.btn-w-b .img-wrap {
  width: 10px;
  color: #333;
}

.btn-w img {
  width: 100%;
}


.cont6 {
  width: 619px;
  height: 320px;
  background-color: #35c4b8;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: url(/resources/images/main/map_bg.jpg)no-repeat 100%;
}

.c6-list {
  margin-top: 63px;
}

.c6-list li {
  width: 209px;
  font-weight: 600;
  font-weight: 20px;
  border-bottom: 1px solid #737578;
  padding-bottom: 11px;
}

.c6-list li span {
  margin-left: 16px;
}

.cont6>.m-s-tit {
  color: #000;
}

.cont6>.m-s-tit h3 {
  color: #000 !important;
  font-weight: 700;
}

.cont7 {
  width: 619px;
  height: 320px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.cont7>.m-s-tit {
  color: #000;
}

.cont7>.m-s-tit h3 {
  color: #000;
  font-weight: 700;
}

.cont7>.m-s-tit p {
  color: #898989;
  font-weight: bold;
}

.cont7 .c7-list {
  margin-top: 58px;
}

.cont7 .c7-list li {
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.cont7 .c7-list li:last-child {
  border-bottom: 0;
  box-sizing: border-box;
  margin-bottom: 0;
  padding: 0;
}

.cont7 .c7-list li>p {
  font-weight: 600;
  font-size: 20px;
  color: #000;
  margin-bottom: 15px;
}

.cont7 .c7-list li>span {
  font-weight: 400;
  font-size: 16px;
  color: #898989;
}

.cont8 {
  width: 100%;
  height: 320px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  padding: 36px 40px;
  border-radius: 15px;
  box-sizing: border-box;
}

.cont8>.m-s-tit {
  color: #000;
}

.cont8>.m-s-tit h3 {
  color: #000;
  font-weight: 700;
}

.cont8>ul {
  margin: 70px 27px 0;
}

.cont8>ul li p {
  margin-top: 27px;
}

.cont9 ul li {
  width: 400px;
  border: 1px solid #e1e1e1;
  border-radius: 15px;
  padding: 38px 0;
  box-sizing: border-box;
}

.cont9 ul li:last-child {
  padding: 26px 0;
}


/* 푸터 */
footer {
  width: 100%;
  background-color: #2c3650;
  padding: 65px 0 55px;
  box-sizing: border-box;
  position: relative;
  bottom: 0;
}

footer>.center {
  width: 1260px;
  margin: 0 auto;
}

footer h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5;
  margin-bottom: 35px;
  color: #fff;
}

footer address {
  font-size: 14px;
  line-height: 1.5;
  color: #a5a7b0;
}

footer .site-box {
  position: relative;
  cursor: pointer;
  color: #fff;
}

.site-box {
  position: relative;
  cursor: pointer;
  width: 260px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 17px 30px;
  box-sizing: border-box;
}

.site-box>ul {
  position: absolute;
  width: 260px;
  /* top: -260px; */
  bottom: 60px;
  left: 0px;
  display: none;
  border: 1px solid #e1e1e1;
  border-radius: 15px;
  overflow: hidden;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
}

.site-box ul li {
  height: 30px;
  display: flex;
  align-items: center;
}

.site-box ul li a {
  display: flex;
  align-items: center;
  width: 200px;
  color: #000;
  font-size: 16px;
  box-sizing: border-box;
  font-weight: 400;
}

.site-box ul li:hover a {
  color: #306ac9;
}

.site-text li::after a {
  content: "";
  position: absolute;
  left: 30px;
  bottom: 35px;
  width: 0;
  height: 2px;
  background-color: #3678c3;
  transition: all .5s;
}

site-text li::before a {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 35px;
  width: 0;
  height: 2px;
  background-color: #3678c3;
  transition: all .5s;
}

.site-text li a:hover:after {
  width: 50%;
}

.site-text li a:hover::before {
  width: 50%;
}

.nav {
  border: 1px solid #dcdee5;
  height: 60px;
}

.nav .center {
  width: 1260px;
  margin: 0 auto;
  border-left: 1px solid #dcdee5;
}

.home {
  width: 50px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-right: 1px solid #dcdee5;
}

.nav-box {
  cursor: pointer;
  height: 60px;
  width: 200px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.5;
  color: #101010;
  display: flex;
}

.nav-box.nav-box-left {
  color: #aaa;
  font-weight: 400;
}

.nav-tit {
  border-right: 1px solid #dcdee5;
  padding: 0 20px;
  box-sizing: border-box;
}

.nav-box>ul {
  position: absolute;
  top: 30px;
  display: none;
}

.nav-box ul li a {
  display: flex;
  align-items: center;
  width: 200px;
  height: 35px;
  padding: 0 10px;
  box-sizing: border-box;
  background-color: #3f3f3f;
}

.h-site-box {
  position: relative;
  cursor: pointer;
  width: 230px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.5;
  box-sizing: border-box;
  z-index: 1;
}

.h-site-box>ul {
  position: absolute;
  top: 39px;
  left: -21px;
  border: 1px solid #dcdee5;
  box-sizing: border-box;
  border-top: none;
  display: none;
}

.h-site-box ul li {
  border-top: 1px solid #dcdee5;
  width: 229.5px;
}

.h-site-box ul li:first-child {
  border-top: none;
}

.h-site-box ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px;
  background-color: #fff;
}

.url {
  font-size: 13px;
  color: #898989;
  width: 500px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align:right;
  height: 15px;
  padding: 0 5px;
}

.urlcopy {
  width: 80px;
  height: 30px;
  border: 1px solid #828282;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  margin-left: 10px;
  box-sizing:border-box;
}

.h-center {
  margin-bottom: 200px;
}

.h-center .cont1 {
  background-color: #f8f8f8;
  border: 1px solid #e1e1e1;
  border-radius: 15px;
  padding: 40px 38px;
  box-sizing: border-box;
  margin-bottom: 60px;
}

.h-center .cont1>img {
  margin-right: 70px;
}

.h-center .cont1>.txt {
  font-size: 18px;
  color: #7d7d7d;
  line-height: 1.5;
}

.h-center .cont2 {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #e1e1e1;
  border-radius: 0px;
  padding-bottom: 60px;
  box-sizing: border-box;
  text-align: center;
  background-color: transparent;
  margin-bottom: 60px;

}

.h-center .cont2 .txt .s-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  margin-top: 32px;
}

.h-center .h-info {
  height: auto;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: transparent;
  margin-bottom: 131px;
  border-bottom: 1px solid #d9d9d9;
}

/* 
.heal-down {
  display: none;
  width: 630px;
  float: left;
} */

.h-info section {
  width: 100%;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: 60px;
}

.h-info.h-info-2 section {
  width: 50%;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: 60px;
}

.h-info.heal-down-wrap section>img {
  width: 200px;
  height: 260px;
}

.h-info.heal-down-wrap2 section>img {
  width: 200px;
  height: 260px;
  border: 1px solid #e1e1e1;
  box-sizing: border-box;
}

.h-info section>.txt {
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.h-info section>.txt>div>h3 {
  font-size: 20px;
  margin-bottom: 23px;
}

.h-info section>.txt>div>p {
  color: #164c97;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 20px;
}

.h-info section>.txt>div>span {
  color: #7d7d7d;
  font-size: 16px;
  line-height: 1.4;
}

.h-info section>.txt .btn-w {
  width: 140px;
  border-radius: 30px;
  border: 1px solid #c2c2c2;
  font-size: 16px;
  margin-top: 40px;
  padding: 10.5px 0;
  box-sizing: border-box;
}

.h-info section>.txt .btn-w span {
  font-size: 16px;
  color: #000;
}

.h-info section>.txt .img-wrap {
  background: url(/resources/images/h_info/icon_down.png) no-repeat;
  padding: 8px;
}

.h-info section>.txt:hover .btn-w {
  width: 140px;
  border-radius: 30px;
  border: 1px solid #3678c3;
  font-size: 16px;
  margin-top: 40px;
  padding: 10.5px 0;
  box-sizing: border-box;
}

.h-info section>.txt:hover .btn-w span {
  font-size: 16px;
  color: #3678c3;
}

.h-info section>.txt:hover .img-wrap {
  background: url(/resources/images/h_info/icon_down_b.png) no-repeat;
  padding: 8px;
}

.h-info>.btn-w {
  width: 160px;
  margin: 0px auto 60px;
  border: 1px solid #898989;
  padding: 15px 0;
}

.h-info .btn-w span {
  color: #000;
}

.h-info .btn-w .img-wrap {
  background: url(/resources/images/h_info/plus.png) no-repeat;
  padding: 8px;
}

.main-popup {
  padding: 0;
  background-color: #fff;
}

.main-popup>.btn-wrap {
  background-color: #fff;
  margin: 0;
  padding: 20px;
}

.main-popup>.btn-wrap>.pop-close {
  width: 80px;
  height: 30px;
  background-color: #7d7d7d;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
}

.main-popup .pop-bg {
  background: url(/resources/images/main/bg6.png) 50% 50% no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
}

.main-popup .pop-text {
    padding: 40px;
    box-sizing: border-box;
    height: 100%;
}

.main-popup .pop-text h1 {
  font-size: 28px;
  margin-bottom: 40px;
  line-height: 1.3;
  font-weight: 500;
}

.main-popup .pop-text p {
  font-size: 20px;
  margin-bottom: 40px;
  line-height: 1.3;
}

.main-popup .pop-text ul li {
  font-size: 16px;
  margin-bottom: 10px;
}

.main-popup .m-pop-btn {
  width: 140px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #07469f;
  color: #fff;
}

.circle.main-circle li::before {
  background-color: #357db5;
  margin: 0px 5px 0 0;
}

/* 공지사항 */
.category {
  width: 750px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.category li {
  /* width: 80px; */
  border: 1px solid #c2c2c2;
  border-radius: 30px;
  margin: 5px 10px 5px 0;
  padding: 13px 20px;
  box-sizing: border-box;
  text-align: center;
}

.category li.on {
  /* width: 80px; */
  border: 0;
  border-radius: 30px;
  margin: 5px 10px 5px 0;
  padding: 13px 20px;
  box-sizing: border-box;
  text-align: center;
  background-color: #3678c3;
}

.category li.on a {
  color: #fff;
}

.search {
  width: 280px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #c2c2c2;
  border-radius: 30px;
  overflow: hidden;
}
.search.re-search{ width: 270px;}
.search input {
  width: 250px;
  border: none;
  font-size: 13px;
}

.search input:focus {
  border: none;
}

.h-right {
  position: relative;
   width: 40px;
}

.search-w {
  display: none;
  position: absolute;
  top: 100%;
  right: -5px;
  transform: translateY(-50%);
}

.search-wrap>input {
  padding: 0 45px 0 15px;
}

.search-wrap>i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.notice-list {
  border-top: 1px solid #9d9d9d;
  border-bottom: 1px solid #9d9d9d;
}

.n-category {
  min-width: 80px;
  height: 40px;
  border: 1px solid #c2c2c2;
  border-radius: 20px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  margin-right: 20px;
  padding: 0 10px 0;
  box-sizing: border-box;
}

.notice-list li {
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e1e1e1;
  cursor: pointer;
}

.notice-list li.top-fixed {
  background-color: #f2f3f6;
}

.notice-list li>span {
  color: #7d7d7d;
  font-size: 16px;
}

.notice-list li>.n-l-top>span {
  font-size: 18px;
  font-weight: 400;
}

.notice-list li>.n-l-top>p {
  font-size: 20px;
  font-weight: 500;
  max-width: 450px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height:1.3;
}
.notice-list.notice-list2 li>.n-l-top>p {
  max-width: 880px;
}

.notice-list.notice-list3 li>.n-l-top>p {
  max-width: 1000px;
}
.edu-tbl-list {
  max-width: 700px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height:1.3;
}
.fa-volume-high {
  color: #3678c3;
  font-size: 20px;
  margin-right: 14px;
}

.n-new {
  background-color: #ff7e6d;
  width: 60px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  color: #fff;
  font-weight: bold;
  font-size: 14px !important;
  margin-left: 10px;
  border-radius: 15px;
}

.paiging li {
  margin-right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

.paiging li a {
  font-size: 16px;
  color: #898989;
}

/* 공지사항 등록 - 게시판 */
.tbl-wrap.write .n-write td,
.tbl-wrap.write .n-write th {
  height: 80px;
  color: #000;
}

.tbl-wrap.write .n-write th {
  width: 200px;
  font-size: 20px;
}

.tbl-wrap.write .n-write td {
  font-size: 16px
}

.n-write tr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.file_box {
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  width: 620px;
}

.file_panel {
  position: relative;
}

.inp_file {
  position: absolute;
  width: 730px;
  height: 50px;
  opacity: 0;
}

.inp_txt {
  position: absolute;
}

.file_txturl {
  border: 1px solid #ccc;
  background-color: #fff;
  width: 620px;
  border-radius: 5px;
  box-sizing: border-box;
  height: 70px;
  max-height: 70px;
  overflow-y: auto;
  padding: 10px;
  margin-top: 10px;
}

.file_txturl li {
  margin-bottom: 10px;
}

.bootstrap-tagsinput {
  width: 100%;
}

.bootstrap-tagsinput input {
  width: 300px !important;
}

.tag-label {
  background-color: #a3a3a3;
  display: inline-block;
  padding: .2em .6em .3em;
  font-size: 90%;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

/* 공지사항 팝업 - 카테고리관리 */
.cate-list {
  height: 400px;
  max-height: 400px;
  overflow-y: auto;
}

.sort-box {
  border: 1px solid #e5e5e5;
}

.sort-box>div {
  box-sizing: border-box;
}

.add-cate {
  border: 1px solid #e5e5e5;
  height: 60px;
  padding: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 20px;
}

/* 공지사항 상세 */
/* .h-center .n-cont1 {
  background-color: #f8f8f8;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  padding: 40px 38px;
  box-sizing: border-box;
  margin-bottom: 60px;
} */
.n-d-top>p {
  background: #fff;
  border: 1px solid #357db5;
  border-radius: 30px;
  padding: 7px 20px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 500;
  color: #357db5;
  font-size: 16px;
  margin-bottom: 20px;
}

.n-d-top>h2 {
  font-size: 28px;
  margin-bottom: 24px;
  font-weight: 600;
}

.n-d-top>span {
  color: #7d7d7d;
  font-size: 16px;
}

.n-d-mid {
  min-height: 480px;
  padding: 0 30px;
}

.n-d-mid>p {
  color: #898989;
  font-size: 16px;
  line-height: 1.5;
}

.n-d-list>div {
  border-bottom: 1px solid #d7d7d7;
  padding: 35px 0;
  font-size: 16px;
  box-sizing: border-box;
}

.n-d-list>div:first-child {
  border-top: 1px solid #d7d7d7;
}

.n-d-list .f-down {
  padding-bottom: 2px;
  border-bottom: 1px solid #898989;
  color: #898989;
}

.n-d-list>div>div {
  padding: 0 30px;
}

.n-d-list>div>div>p {
  width: 140px;
}

.n-d-list li>div>a {
  font-size: 16px;
}

.btn-w.b-gray {
  width: 160px;
  border: 1px solid #898989;
  padding: 15px 0;
}

/* 네트워크 권역 공지사항 */
.tbl-wrap.notice-wrap td,
.tbl-wrap.notice-wrap th {
  color: #333;
  padding: 10px 0;
}

.tbl-wrap.notice-wrap tr,
.tbl-wrap.notice-wrap td {
  color: #333;
}

.n-tbl-td {
  padding: 0px 10px;
}

.n-tbl-td .n-tbl-txt {
  max-width: 580px;
}

.n-lnb {
  width: 230px;
  min-width: 230px;
  min-height: 285px;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  padding: 20px 20px;
  box-sizing: border-box;
}

.n-lnb li {
  padding: 5px 0;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  box-sizing: border-box;
}


.n-lnb li a {
  width: 155px;
  font-size: 18px;
  color: #7d7d7d;
}

.n-lnb li a>i {
  font-size: 18px;
  color: #7d7d7d;
  margin-right: 10px;
}

.n-lnb li:hover a {
  color: #3678c3;
}

.n-lnb li:hover a>i {
  color: #3678c3;
}

.n-lnb li.active a {
  color: #3678c3;
  font-weight: bold;
}

.n-lnb li.active a>i {
  color: #3678c3;
}

.n-btn {
  width: 100px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #c2c2c2;
  border-radius: 30px;
  text-align: center;
}

.new {
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: rgb(255 49 49 / 96%);
  color: #fff;
  margin-left: 10px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: bold;
}

.comment {
  margin-left: 5px;
  color: #3678c3;
  font-weight: bold;
}

.region {
  width: 60px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  border: 1px solid #c2c2c2;
  border-radius: 15px;
  margin-right: 10px;

}

/* 댓글 */

.notice-board .user-info {
  position: relative;
  margin-bottom: 15px;
  padding-top: 8px
}

.notice-board .user-info .name {
  color: #6C7293;
  font-weight: bold;
  cursor: pointer
}

.notice-board .user-info .date {
  margin-left: 10px;
  color: #A9ACC2
}

.notice-board .user-info .edit-box>button {
  color: #707070;
  margin-left: 10px;
}


.notice-board .user-info .edit-box,
.notice-board .user-info .save-box {
  display: none;
  position: absolute;
  top: 0;
  right: 0
}

.notice-board .user-info .edit-box.on,
.notice-board .user-info .save-box.on {
  display: block
}

.comt-area .edit-box {
  width: 100px;
  background-color: #a1a1a1;
  height: 82px;
  border-radius: 5px;
  text-align: center;
  margin-left: 10px;
}

.comt-area2 .edit-box {
  width: 100px;
  background-color: #a1a1a1;
  height: 82px;
  border-radius: 5px;
  text-align: center;
  margin-left: 10px;
}

.btn-request {
  color: #fff;
  font-weight: bold;
  line-height: 82px;
  width: 100%;
}

.notice-board .comt-write .user-info .name {
  cursor: default
}

.notice-board .comt-area textarea {
  width: 950px;
}

.notice-board .comt-area textarea.focus {
  border: 1px solid #357db5;
}

.notice-board .comt-list {
  margin-top: 30px
}

.notice-board .comt-list li {
  width: 1060px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d7d7d7;
}

.notice-board .comt-desc .txt {
  width: 800px;
  line-height: 1.2rem;
  word-break: break-all;
  overflow-wrap: break-word;
}

.notice-board .comt-area2 textarea {
  width: 700px;
}

.notice-board .comt-area2 textarea.focus {
  border: 1px solid #357db5;
}

.notice-board .comt-list2 li {
  width: 830px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d7d7d7;
}

.notice-board .comt-desc2 .txt {
  width: 700px;
  line-height: 1.2rem;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* 네트워크 */
.category.m-category li {
  width: 68px;
  margin-right: 5px;
}

.category.m-category li.on {
  width: 68px;
  margin-right: 5px;
}

.map-wrap {
  background-color: #f8f8f8;
  border: 1px solid #e1e1e1;
  border-radius: 15px;
  padding: 30px 20px;
  justify-content: space-evenly;
  box-sizing: border-box;
}

.map-box select {
  border: 1px solid #ccc;
  box-sizing: border-box;
  height: 40px;
  margin-right: 10px;
}

.map-left {
  width: 30%;
  border-top: 2px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* min-height: 728px; */
  min-height: 660px;
}

.map-left>.map-l-cont>div {
  /* padding: 50px 0; */
  border-bottom: 1px solid #d7d7d7;
  height: 175px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.map-sub-tit {
  font-size: 20px;
  color: #07469f;
  font-weight: bold;
}

.sub-txt {
  font-size: 16px;
  color: #000;
  line-height: 1.5;
}

.mt-box {
  border: 1px solid #e1e1e1;
  border-radius: 15px 15px 0 0;
}

.mb-box {
  border: 1px solid #e1e1e1;
  border-radius: 0 0 15px 15px;
  padding: 0 50px 75px;
  box-sizing: border-box;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.swiper-slide img {
  display: block;
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
}

.c6-list {
  position: absolute;
  left: 25%;
  bottom: 5%;
  transform: translate(-50%, -50%);
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border: 1px solid #e1e1e1;
  background-color: #fff;
  border-radius: 15px;
  margin: 0px 10px 0 0;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #357db5;
}

/* 건강정보 바로알기 */
.circle.h-circle li:hover::before {
  background-color: #357db5;
}

.circle.h-circle li {
  height: 14px;
  font-weight: 500;
}

.circle.h-circle li a {
  font-size: 20px;
  color: #7d7d7d;
}

.circle.h-circle li:hover a {
  border-bottom: 1px solid #357db5;
  color: #357db5;
  padding: 3px;
  box-sizing: border-box;
}

#h-info2 {
  position: relative;

}

#h-info2 .cont1 {
  width: 500px;
  height: 560px;
  padding: 60px;
}

#slide-card {
  width: 610px;
  height: 480px;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

#swiper2 {
  width: 380px;
  height: 480px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#swiper2>.swiper-wrapper>.swiper-slide {
  width: 380px !important;
  height: 380px;
}

#swiper2>.swiper-slide.swiper-slide-active {
  width: 380px !important;
}

#swiper2>.swiper-wrapper>.swiper-slide img {
  width: 100%;
}

#swiper2>.swiper-pagination {
  text-align: center;
  font-size: 20px;
}

.swiper-pagination-total {
  color: #7d7d7d;
}

.swiper-button-prev {
  color: #000;
  left: 0% !important;
}

.swiper-button-next {
  color: #000;
  right: 0 !important;
}

.pop-notice-wrap li {
  color: rgb(235, 64, 64);
  font-size: 15px;
  font-weight: bold;
  margin: 5px 0;
}

.pop-notice-wrap li:first-child {
  margin: 20px 0 15px;
}

.pop-notice-wrap li:last-child {
  margin: 15px 0 20px;
}

.pop-file-text li {
  margin: 10px 0;
  font-size: 15px;
}

.pop-file-text li>span {
  display: inline-block;
  width: 185px;
  font-weight: 500;
}

.pop-file-text li>input {
  width: 250px;
  background: #fff;
  min-height: 30px;
  font-size: 14px;
}

.pop-file-text li:last-child>input {
  width: 120px;
  text-indent: 0px;
}

.news-wrap2 li>details {
  margin-bottom: 20px;
}

.news-wrap2 .card {
  margin: 20px 0 30px 20px;
}

.news-wrap2 .card li {
  margin-bottom: 10px;
}

.news-wrap2 .card li.active {
  color: #306ac9;
  border-color: #306ac9;
}

/* 연구자료 검색 */
.rm-wrap {
  border: 1px solid #e1e1e1;
  padding: 60px 0;
  box-sizing: border-box;
  border-radius: 20px;
  margin-bottom: 40px;
}

.rm-wrap2 {
  margin-bottom: 460px;
}

.rm-wrap .rm-left {
  width: 220px;
  height: 260px;
  border-right: 1px solid #ebebeb;
}

.rm-wrap .rm-left>p {
  font-size: 32px;
  font-weight: bold;
  margin-top: 30px;
}

.rm-wrap .rm-right {
  padding: 0 60px 0 0;
  margin-top: 44px;
}

.rm-wrap .rm-right:first {
  margin-top: 0;
}

.rm-wrap .rm-right>p {
  font-size: 16px;
  color: #7d7d7d;
  margin: 20px 0 0 185px;
}

.rm-wrap .rm-right .rm-text {
  font-size: 16px;
  color: #7d7d7d;
  margin: 20px 0 0 120px !important;
}

.sear-box>p {
  font-size: 20px;
  font-weight: bold;
  margin-right: 40px;
}

.search-wrap2 {
  position: relative;
}

.search-wrap2>input {
  width: 720px;
  height: 60px;
  border-radius: 5px;
  box-sizing: border-box;
}

.search-wrap2 .poin2 {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 30px;

}

/* 연구연계 사이트 */
.research-wrap {
  margin-bottom: 520px;
}

.re-box {
  width: 360px;
  height: 330px;
  background: url(/resources/images/h_info/h01.png) no-repeat;
}

.re-box2 {
  width: 360px;
  height: 330px;
  background: url(/resources/images/h_info/h02.png) no-repeat;
}

.re-box3 {
  width: 360px;
  height: 330px;
  background: url(/resources/images/h_info/h03.png) no-repeat;
}

.re-box4 {
  width: 360px;
  height: 330px;
  background: url(/resources/images/h_info/h04.png) no-repeat;
  margin-right: 90px;
}

.re-box5 {
  width: 360px;
  height: 330px;
  background: url(/resources/images/h_info/h05.png) no-repeat;
}

.re-top {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.re-top:hover {
  transform: scale(1.05);
  transition: .5s;
}

.re-top h3 {
  font-size: 30px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 10px;
}

.re-top span {
  color: #fff;
  opacity: 0.5;
  text-align: center;
  line-height: 1.3;
}

.re-bot {
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.re-bot h4 {
  font-size: 22px;
  color: #000;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 10px;
}

.re-bot span {
  color: #7d7d7d;
}

/* 전략 및 전략 체계 */
.sta-wrap {
  padding-bottom: 100px;
}

.sta-wrap>div {
  border: 1px solid #e1e1e1;
  border-radius: 15px;
  padding: 54px 170px;
}

.sta-wrap .sta-box {
  border: 1px solid #e1e1e1;
  border-radius: 15px;
  padding: 54px 170px;
  margin-bottom: 20px;
}

.sta-wrap .sta-box .sta-txt {
  margin-left: 170px;
}

.sta-wrap .sta-box .sta-txt>h4 {
  font-size: 24px;
  font-weight: bold;
  color: #3678c3;
  margin-bottom: 19px;
}

.sta-wrap .sta-box .sta-txt>p {
  font-size: 24px;
  color: #000;
}

/* 조직 및 주요 업무 */
.task-wrap {
  background: url(/resources/images/h_info/border.png) 50% 50% no-repeat;
  margin-bottom: 500px;
  height: 410px;
}

.t-t-list {
  width: 480px;
  margin: 0 auto;
}

.t-t-list2 {
  width: 480px;
  margin: 65px auto 0;
  padding-left: 40px;
}

.leader {
  width: 220px;
  height: 80px;
  background-color: #043984;
  border-radius: 15px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  line-height: 80px;
}

.dcd {
  width: 220px;
  height: 80px;
  background-color: #3678c3;
  border-radius: 15px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  line-height: 80px;
}


.t-list {
  width: 1160px;
  margin: 120px auto;
}

.t-list>li {
  width: 220px;
  height: 319px;
  background-color: #f8f8f8;
  border: 1px solid #e1e1e1;
  border-radius: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.t-list .t-list-t {
  font-size: 20px;
  padding: 30px 0;
  font-weight: bold;
}

.t-list .t-list-b {
  font-size: 20px;
  background-color: #fff;
  height: 100%;
  padding: 30px 0 30px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.t-list>li .list-b-text>li {
  margin-bottom: 5px;
  line-height: 1.3;
  color: #7d7d7d;
}

.circle.list-b-text li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0px 10px 0 0;
}

/* 미션/비전  */
/* 탭 */
.vision-tabs .tab-pane { display: none; }
.vision-tabs .tab-pane.active { display: block; }

/* 탭 메뉴 */
.vision-tabs .tab-menu { display: flex; list-style: none; padding: 0; margin-bottom: 40px; }
.vision-tabs .tab-menu li {width: 619px;height: 59px;border: 1px solid #e1e1e1;border-radius: 20px;font-size: 18px;font-weight: 500;color: #7d7d7d;text-align: center;line-height: 59px;cursor: pointer;}
.vision-tabs .tab-menu li.active {background-color: #3678c3;color: #fff;}
.vision-tabs .tab-menu li.active > a {
  background-color: #3678c3;
  color: #fff !important;
  border-radius: 20px;
}
.vm>h3 {
  font-size: 32px;
  font-weight: bold;
  color: #3678c3;
  margin-bottom: 53px;
  text-align: center;
}

.vm>h2 {
  font-size: 32px;
  font-weight: bold;
  color: #000;
  margin-bottom: 91px;
  text-align: center;
}

.v-wrap {
  width: 100%;
  border: 1px solid #e1e1e1;
  border-radius: 15px;
  padding: 80px 0;
  box-sizing: border-box;
}

.v-box {
  width: 420px;
  text-align: center;
  border-right: 1px solid #e1e1e1;
}

.v-box:last-child {
  border-right: 0;
}

.v-box .v-text h4 {
  font-size: 24px;
  font-weight: bold;
  margin: 75px 0 30px;
}

.v-box .v-text p {
  font-size: 16px;
  color: #7d7d7d;
  line-height: 1.5;
  font-weight: 400;
}

.vm-text {
  padding: 62px 60px;
  box-sizing: border-box;
  margin-bottom: 100px;
  border-bottom: 1px solid #ccc;
}

.vm-text h2 {
  font-weight: bold;
  font-size: 32px;
  margin-bottom: 40px;
}

.vm-text p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 40px;
}

.vm-text ul li {
  font-size: 16px;
  color: #767676;
  margin-bottom: 10px;
}

.vm-logo {
  margin-bottom: 402px;
}

.vm-logo>h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 40px;
  border-top: 1px solid #cccccc;
  padding-top: 79px;
  box-sizing: border-box;
}

.vm-logo>p {
  font-size: 18px;
  margin-bottom: 30px;
}

.vm-logo>ul li {
  color: #7d7d7d;
  margin-bottom: 15px;
}

.vm-symbol {
  margin-top: 99px;
}

.vm-symbol>div>div>h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.vm-symbol>div>div>span {
  font-size: 16px;
  color: #7d7d7d;
  margin-bottom: 30px;
}

.btn-pop-logo-dw {
  background-color: #3678c3;
  color: #fff;
  width: 200px;
  height: 50px;
  font-size: 18px;
  border-radius: 50px;
  margin: 30px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-dw-btn {
  background-color: #3678c3;
  color: #fff;
  width: 150px;
  height: 40px;
  font-size: 18px;
  border-radius: 50px;
  margin: 30px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sy-wrap {
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 100px 0;
  text-align: center;
  position: relative;
}

.vm-color {
  position: absolute;
  right: 40px;
  bottom: 40px;
}

.sy-wrap .vm-blue {
  margin-bottom: 16px;
}

.sy-wrap .vm-blue>ul>li {
  color: #043984;
  font-size: 16px;
  margin-right: 10px;
}

.sy-wrap .vm-blue .blue-bar {
  width: 60px;
  height: 14px;
  background-color: #043984;
  border-radius: 7px;
  margin-right: 20px;
}

.sy-wrap .vm-red>ul>li {
  color: #ca1f28;
  font-size: 16px;
  margin-right: 10px;
}

.sy-wrap .vm-red .red-bar {
  width: 60px;
  height: 14px;
  background-color: #ca1f28;
  border-radius: 7px;
  margin-right: 20px;
}

.vm-l-wrap {
  margin: 60px 0 0 0;
}

.vm-l-wrap>div>p {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}

.vm-l-box {
  width: 610px;
  height: 200px;
  border: 1px solid #e1e1e1;
  box-sizing: border-box;
  border-radius: 20px;
}


/* 연혁 */
.his-wrap {
  margin-bottom: 500px;
}

.circle2 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #357db5;
  margin: 0 90px;
}

.line {
  width: 1px;
  background-color: #e1e1e1;
  height: 370px;
  text-align: center;
}

.line2 {
  height: 100px;
}

.line3 {
  height: 490px;
}

.line4 {
  height: 490px;
}

.his-left {
  width: 45%;
}

.his-left h2 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 176px;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  top: -20px;
}

.his-left .his-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.his-left .his-list li {
  margin-bottom: 18px;
}

.his-left .his-list li>p {
  font-size: 16px;
  color: #7e7e7e;
}

.his-left .his-list li>h4 {
  font-size: 16px;
  margin-left: 40px;
  font-weight: bold;
}

.his-mid {
  width: 10%;
}

.his-right {
  width: 45%;
}

.his-right h2 {
  font-size: 48px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  top: -20px;
}

.his-right .his-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 50px;
}

.his-right .his-list li {
  margin-bottom: 18px;
}

.his-right .his-list li>p {
  font-size: 16px;
  color: #7e7e7e;
  margin-left: 40px;
}

.his-right .his-list li>h4 {
  font-size: 16px;
  font-weight: bold;
}

/* 지역 네트워크 */
.tab-area.lo-tab-area {
  width: 1260px;
}

.lo-tab {
  margin-bottom: 40px;
}

.lo-tab-list>a {
  display: block;
  width: 619px;
  height: 59px;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #7d7d7d;
  text-align: center;
  line-height: 59px;
  cursor: pointer;
}

.lo-tab-list>a.active {
  background-color: #07469f;
  color: #fff;
}

/* 심혈관질환 통계 */
.s-nav li.active>a {
  color: #043984;
}

/* 고혈압 */
.st-cont1>.s-title {
  font-size: 28px;
}

.circle.st-c1-c {
  margin-bottom: 64px;
}

.circle.st-c1-c li {
  margin-bottom: 16px;
}

.circle.st-c1-c li:last-child {
  align-items: flex-start;
}

.circle.st-c1-c li.cir-cent::before {
  margin: 7px 16px 0 0;
}

.lnb {
  position: relative;
}

.lnb>.s-nav>li>a {
  display: block;
  font-size: 15px;
}

.lnb>.s-nav>li:hover>a {
  color: #357db5;
}

/* (-) 이미지 */
.lnb>.s-nav>li.on>a {
  color: #357db5;
}

.lnb>.s-nav>li .s-depth2 {
  display: none;
}

.lnb>.s-nav>li>.s-depth2>li>a {
  display: block;
  padding: 5px 3px;
  font-size: 18px;
}

.lnb>.s-nav>li>.s-depth2>li:hover>a {
  color: #357db5;

}

.lnb>.s-nav>li>s-depth2>li.on>a {
  color: #357db5;
}

/* 2Depth에서 3Depth 없는 경우. */
.lnb>.s-nav>li>.s-depth2>li>a:only-child {
  background: none;
}

.lnb>.s-nav>li>.s-depth2 li .s-depth3 {
  display: none;

}

.lnb>.s-nav>li>.s-depth2 li .s-depth3 li a {
  display: block;
  padding: 5px 3px;
  font-size: 18px;

}

.s-nav {
  width: 200px;
  height: 330px;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  padding: 30px;
  box-sizing: border-box;
  margin-right: 60px;
}

.s-nav>li {
  margin-bottom: 20px;
}

.s-nav li a {
  font-size: 13px;
  color: #7d7d7d;
  font-weight: 500;
  margin-left: 5px;
}

.s-depth2 li>a {
  margin-bottom: 0px;
}

.s-nav li.on>a {
  color: #357db5;
}

.s-depth2 li.on>a {
  color: #357db5;
}

.s-depth2.circle li {
  margin-bottom: 0;
}

.s-depth2.circle li::before {
  margin: 0px 5px 0 7px;
}

.s-depth3.circle li {
  margin-bottom: 0;
}

.s-depth3.circle li a {
  margin-bottom: 0;
}

.gr-s-wrap {
  width: 1000px;
  height: 440px;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  padding: 40px 38px;
  box-sizing: border-box;
}

/* Tab Area */
.tab-area {
  width: 1000px;
}

.tab-area .btn-area {
  border-bottom: 1px solid #357db5;
}

.tab-area .btn-area a {
  display: inline-block;
  width: 160px;
  height: 50px;
  line-height: 50px;
  background-color: #ebebeb;
  border: 1px solid #e1e1e1;
  border-radius: 20px 20px 0 0;
  border-bottom: none;
  text-align: center;
  color: #7d7d7d;
  font-size: 18px;
  font-weight: bold;
  margin-right: 4px;
  box-sizing: border-box;
}

.tab-area .btn-area.btn-area2 a {
  width: 150px;
  height: 50px;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-area.st-tab .btn-area a {
  margin-right: 0;
}

.tab-area .btn-area a.active {
  background-color: #fff;
  color: #357db5;
  font-weight: bold;
  border: 1px solid #357db5;
  border-radius: 20px 20px 0 0;
  border-bottom: none;
  box-sizing: border-box;
}

.st-cont2 {
  margin-top: 80px;
}

.st-table thead>tr>th {
  font-size: 16px;
  color: #000;
}

.st-table tbody>tr>td:nth-child(1) {
  color: #000;
}

/* Notice Area */
.tab-area ul li .pointer {
  font-size: 16px;
}

.tab1-area {
  margin: 80px 0;
}

.tab1-area>ul li {
  padding: 8px 5px;
}

.tab1-area ul li a {
  font-weight: bold;
  font-size: 16px;
}

.tab1-area ul li span {
  font-size: 14px;
  color: gray;
  float: right;
  margin-right: 3px;
}

.tab1-area.card-area ul li span {
  font-size: 18px;
  color: gray;
  float: none;
  margin-right: 3px;
}

.tab2-area.card-area ul li span {
  font-size: 18px;
  color: gray;
  float: none;
  margin-right: 3px;
}

.tab2-area {
  margin: 80px 0;
}

.tab2-area>ul li {
  padding: 8px 5px;
}

.tab2-area ul li a {
  font-weight: bold;
  font-size: 16px;
}

.tab4-area {
  margin: 80px 0;
}

.tab5-area {
  margin: 80px 0;
}

.tab6-area {
  margin: 80px 0;
}

.tab7-area {
  margin: 80px 0;
}

.tab8-area {
  margin: 80px 0;
}

.tab-area.ta2 {
  width: 1260px;
}

.tab-area .btn-area.ba2 {
  border-bottom: none;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.tab-area.ta2 .btn-area.ba2 a {
  display: inline-block;
  width: 65px;
  min-width: 65px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 30px;
  text-align: center;
  color: #000;
  font-size: 14px;
  box-sizing: border-box;
  margin-right: 5px;
  font-weight: normal;
  margin-bottom: 10px;
}

.tab-area.ta2 .btn-area.ba2 a.active {
  background-color: #357db5;
  color: #fff;
  font-weight: bold;
  border: 1px solid #357db5;
  border-radius: 30PX;
  box-sizing: border-box;
}

.tab-area1-1 .btn-area.ba2 {
  border-bottom: none;
  display: flex;
  justify-content: flex-start;
}

.tab-area1-1.ta2 .btn-area.ba2 a {
  display: inline-block;
  width: 65px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 30px;
  text-align: center;
  color: #000;
  font-size: 14px;
  box-sizing: border-box;
  margin-right: 5px;
  font-weight: normal;
}

.tab-area1-1.ta2 .btn-area.ba2 a.active {
  background-color: #357db5;
  color: #fff;
  font-weight: bold;
  border: 1px solid #357db5;
  border-radius: 30PX;
  box-sizing: border-box;
}

/* 심근경색증 */
.my-list-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}


.myocar-list {
  width: 150px;
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-right: 20px;

}

.myocar-list li:nth-child(1) {
  margin-top: 25px;
}

.gr-wrap .myocar-list>li {
  width: 80px;
  font-size: 16px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
}

.myocar-list2 {
  width: 137px;
  height: 556px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.myocar-list2 li:nth-child(1) {
  margin-top: 30px;
}

.myocar-list2 li {
  font-size: 16px;
  height: 40px;
}

.color-fill9 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 355px;
  background-color: #f35b7c;
  clip-path: inset(100% 0 0 0);
  animation: fill 1s forwards;
}

.graphWrap.graphWrap2 .graph2.graph-h>div {
  height: 40px;
}

.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item1 {
  bottom: 508px;
  background-color: #e93f28;
  background: url(/resources/images/dis/icon01-1.png) no-repeat;
}


.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item1 p {
  position: absolute;
  top: 10px;
  /* right: -100px; */
  right: -20px;
  color: #e93f28;
}

.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item2 {
  bottom: 388px;
  background-color: #f69a56;
  background: url(/resources/images/dis/icon02-2.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item2 p {
  position: absolute;
  top: 10px;
  right: -30px;
  color: #f69a56;
}

.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item3 {
  bottom: 268px;
  background-color: #49c8bd;
  background: url(/resources/images/dis/icon03-3.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item3 p {
  position: absolute;
  top: 10px;
  right: -30px;
  color: #49c8bd;
}

.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item4 {
  bottom: 148px;
  background-color: #b8d856;
  background: url(/resources/images/dis/icon04-4.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item4 p {
  position: absolute;
  top: 10px;
  right: -30px;
  color: #b8d856;
}

.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item5 {
  bottom: 25px;
  background-color: #5caeed;
  background: url(/resources/images/dis/icon05-5.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-h>div#pw-item5 p {
  position: absolute;
  top: 10px;
  right: -30px;
  color: #5caeed;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div {
  height: 40px;
}


.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item1 {
  bottom: 508px;
  background-color: #e93f28;
  background: url(/resources/images/dis/i01.jpg) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item1 p {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #e93f28;
}

.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item2 {
  bottom: 388px;
  background-color: #f69a56;
  background: url(/resources/images/dis/i02.jpg) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item2 p {
  position: absolute;
  top: 10px;
  right: 225px;
  color: #f69a56;
}

.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item3 {
  bottom: 268px;
  background-color: #49c8bd;
  background: url(/resources/images/dis/i03.jpg) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item3 p {
  position: absolute;
  top: 10px;
  right: 160px;
  color: #49c8bd;
}

.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item4 {
  bottom: 148px;
  background-color: #b8d856;
  background: url(/resources/images/dis/i04.jpg) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item4 p {
  position: absolute;
  top: 10px;
  right: 40px;
  color: #b8d856;
}

.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item5 {
  bottom: 25px;
  background-color: #5caeed;
  background: url(/resources/images/dis/i05.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-i>div#pw-item5 p {
  position: absolute;
  top: 10px;
  right: 220px;
  color: #5caeed;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item1 {
  bottom: 508px;
  background-color: #e93f28;
  background: url(/resources/images/dis/icon01-1.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item1 p {
  position: absolute;
  top: 10px;
  right: 3px;
  color: #e93f28;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item2 {
  bottom: 388px;
  background-color: #f69a56;
  background: url(/resources/images/dis/icon-012.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item2 p {
  position: absolute;
  top: 10px;
  right: -20px;
  color: #f69a56;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item3 {
  bottom: 268px;
  background-color: #49c8bd;
  background: url(/resources/images/dis/icon-013.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item3 p {
  position: absolute;
  top: 10px;
  right: -30px;
  color: #49c8bd;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item4 {
  bottom: 148px;
  left: -135px;
  background-color: #b8d856;
  background: url(/resources/images/dis/icon-014.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item4 p {
  position: absolute;
  top: 10px;
  right: -40px;
  color: #b8d856;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item5 {
  bottom: 25px;
  background-color: #5caeed;
  background: url(/resources/images/dis/icon-015.png) no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-hemo>div#pw-item5 p {
  position: absolute;
  top: 10px;
  right: -20px;
  color: #5caeed;
}

.graphWrap.my-grap-wrap {
  position: relative;
  width: 400px;
  height: 310px;
  margin: 0px auto 0;
  border-bottom: 1px solid #dddddd;
}


.graphWrap .graph.my-grap {
  width: 400px;
  height: 100%;
  background: url(/resources/images/dis/line2.png) 100% 100% no-repeat;
}

.graphWrap .graph.my-grap>div {
  border-radius: 50px 50px 0 0;
  color: #359ab5;
}

.graphWrap .graph.my-grap>div#item11 {
  left: 25px;
  background: #49c8bd;
}

.graphWrap .graph.my-grap>div#item11 span {
  position: absolute;
  left: -8px;
  top: -20px;

}

.graphWrap .graph.my-grap>div#item12 {
  left: 80px;
  background: #359ab5;
}

.graphWrap .graph.my-grap>div#item12 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.my-grap>div#item13 {
  left: 135px;
  background: #49c8bd;
}

.graphWrap .graph.my-grap>div#item13 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.my-grap>div#item14 {
  left: 187px;
  background: #359ab5;
}

.graphWrap .graph.my-grap>div#item14 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

/* 뇌졸중 */
.gr-wrap.stroke-list-wrap {
  padding: 30px 50px;
}

.stroke-list {
  height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
  margin-right: 40px;
}

.stroke-list li {
  width: 65px;
  font-size: 16px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.slw-short2 .stroke-list.sl-short {
  height: 690px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
  margin-right: 40px;
  padding: 10px 0px;
}

.slw-short2 .stroke-list.sl-short li {
  width: 65px;
  font-size: 16px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.gr-wrap.gr-wrap3.db-chart {
  width: 480px;
  height: 780px;
  padding: 24px 38px 0;
  box-sizing: border-box;
}

.d-chart-span {
  height: 270px;
  display: flex;
  align-items: flex-end;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item1 {
  bottom: 649px;
  background: #5caeed;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item1 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item2 {
  bottom: 609px;
  background: #306ac9;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item2 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item3 {
  bottom: 569px;
  background: #5caeed;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item3 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item4 {
  bottom: 529px;
  background: #306ac9;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item4 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item5 {
  bottom: 489px;
  background: #5caeed;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item5 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item6 {
  bottom: 449px;
  background: #306ac9;

}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item6 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item7 {
  bottom: 409px;
  background: #5caeed;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item7 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item8 {
  bottom: 369px;
  background: #306ac9;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item8 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item9 {
  bottom: 329px;
  background: #5caeed;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item9 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item10 {
  bottom: 289px;
  background: #306ac9;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item10 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item11 {
  bottom: 249px;
  background: #5caeed;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item11 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item12 {
  bottom: 209px;
  background: #306ac9;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item12 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item13 {
  bottom: 169px;
  background: #5caeed;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item13 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item14 {
  bottom: 129px;
  background: #306ac9;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item14 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item15 {
  bottom: 89px;
  background: #5caeed;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item15 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item16 {
  bottom: 49px;
  background: #306ac9;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item16 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item17 {
  bottom: 9px;
  background: #5caeed;
}

.graphWrap.graphWrap2 .graph2.slws-grp2>div#pw-item17 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.color-fill8 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 660px;
  background-color: #f35b7c;
  clip-path: inset(100% 0 0 0);
  animation: fill 1s forwards;
}

.bot-count.b-count2.bc8 {
  top: 41%;
  left: 56%;
}

.graphWrap.graphWrap2 .graph2.slws-grp {
  width: 290px;
  height: 320px;
  border-left: 1px solid #e1e1e1;
  background: url(/resources/images/dis/line.png) 100% 100% no-repeat;
}

.gr-wrap.stroke-list-wrap.slw-short>div {
  height: 350px;
}

.graphWrap.graphWrap2 .graph2.slws-grp2 {
  width: 290px;
  height: 690px;
  border-left: 1px solid #e1e1e1;
  background: url(/resources/images/dis/line.png) 100% 100% no-repeat;
}

.gr-wrap.stroke-list-wrap.slw-short2>div {
  height: 690px;
}

.stroke-list.sl-short {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
  margin-right: 40px;
}

.stroke-list.sl-short li {
  width: 65px;
  font-size: 16px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 심혈관질환 통계2 */

.s-nav.st-nav {
  width: 320px;
  height: 570px;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  padding: 30px;
  box-sizing: border-box;
  margin-right: 60px;
}

.s-nav.st-nav li .s-nv-top {
  display: flex;
}


.s-nav.st-nav li .s-nv-top .plusminus {
  background: url(/resources/images/h_info/plus2.png) no-repeat;
  padding-left: 20px;
}


/* .st-nav li.on .s-nv-top .plusminus {
  background: url(/resources/images/h_info/minus2.png) no-repeat;
  padding-left: 20px;
} */

.st-nav li.on>a {
  color: #043984;
}

.st-depth2 {
  display: none;
}

.st-nav .st-depth2>li {
  background: url(/resources/images/h_info/plus2.png) no-repeat;
  padding-left: 20px;
  margin-left: 20px;
}

/* .st-nav .st-depth2>li.on {
  background: url(/resources/images/h_info/minus2.png) no-repeat;
  padding-left: 20px;
  color: #043984;
} */

.st-nav .st-depth2>li>div {
  margin-bottom: 10px;
}

.st-nav .st-depth2>li>div>a {
  font-size: 18px;
}

.st-depth3 {
  display: none;
}

.st-nav .st-depth3>li {
  background: url(/resources/images/h_info/plus2.png) no-repeat;
  margin: 15px 0;
  padding: 0 0 0px 0;
}

/* .st-nav .st-depth3>li.on {
  background: url(/resources/images/h_info/minus2.png) no-repeat;
} */


.st-nav .st-depth3>li>div {
  margin-left: 20px;
  padding-bottom: 2px;
}

.st-depth3 li a {
  font-size: 16px;
}

.st-depth4 {
  display: none;
}

.st-depth3 .st-depth4 li {
  margin: 10px 0 0 30px;
  margin-bottom: 10px;
}

.st-depth4.circle li::before {
  margin-right: 0;
}

.st-depth4 li a {
  font-weight: 400;
}


.st-cont2 {
  width: 880px;
}

.st-cont2 table tr {
  font-size: 16px;
}

.st-cont2 table tr>td {
  font-size: 16px;
}

/* 지도 채우기 */
.krmap {
  position: relative;
  width: 238px;
  /* 이미지의 실제 크기에 맞게 조정 */
  height: 343px;
  /* 이미지의 실제 크기에 맞게 조정 */
  background: url(/resources/images/dis/i01.png);
  overflow: hidden;
}

.gray-map,
.transparent-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.color-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f35b7c;
  clip-path: inset(100% 0 0 0);
  animation: fill 1s forwards;
}

@keyframes fill {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  100% {
    clip-path: inset(48% 0 0 0);
  }
}

.color-fill6 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 272px;
  background-color: #b2d152;
  clip-path: inset(100% 0 0 0);
  animation: fill 1s forwards;
}

.col-green2 {
  color: #b2d152;
}

@keyframes fill6 {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

.color-fill7 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background-color: #f35b7c;
  clip-path: inset(100% 0 0 0);
  animation: fill 1s forwards;
}

.col-g-green2 {
  color: #90af34;
}

@keyframes fill7 {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

.bot-count.b-count2.bc7 {
  top: 30%;
}

.color-fill10 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 380px;
  background-color: #5caeed;
  /* background-color: #b2d152;  이게 sts?*/
  clip-path: inset(100% 0 0 0);
  animation: fill 1s forwards;
}

@keyframes fill10 {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

/* 사람 채우기 */
.s-peo {
  position: relative;
  width: 156px;
  /* 이미지의 실제 크기에 맞게 조정 */
  height: 246px;
  /* 이미지의 실제 크기에 맞게 조정 */
  background: url(/resources/images/dis/peo1.png) no-repeat;
  overflow: hidden;
}

.transparent-people {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.color-fill2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 310px;
  background-color: #4898d6;
  clip-path: inset(100% 0 0 0);
  animation: fill 1s forwards;
  overflow: hidden;

}

@keyframes fill2 {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

.s-peo2 {
  position: relative;
  width: 170px;
  /* 이미지의 실제 크기에 맞게 조정 */
  height: 246px;
  /* 이미지의 실제 크기에 맞게 조정 */
  background: url(/resources/images/dis/peo6.png) no-repeat;
  overflow: hidden;
}

.transparent-people2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.color-fill3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 310px;
  background-color: #f35b7c;
  clip-path: inset(100% 0 0 0);
  animation: fill 2s forwards;
  overflow: hidden;
}

@keyframes fill3 {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

.gr-s-br {
  border-right: 1px solid #e1e1e1;
  padding: 0 30px 0 0;
  margin: 0 30px 0 0;
}

.bot-count.b-count2 {
  position: absolute;
  top: 35%;
  left: 53%;
  transform: translate(-50%, -50%);
  color: #f35b7c;
  font-size: 30px;
  font-weight: 500;
  z-index: 3;
}

.b-count3 {
  color: #4898d6;
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 37px;
}

.b-count4 {
  color: #f35b7c;
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 37px;
}

.bot-count.b-count2 .count_num {
  width: 100%;
}


.gr-wrap {
  width: 1000px;
  height: 540px;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  padding: 55px;
  box-sizing: border-box;
}

.gr-wrap.gr-wrap-my {
  height: 542px;
}

.gr-wrap.gr-wrap-my>ul>li {
  margin-bottom: 10px;
}



.graphWrap.graphWrap2 {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px auto 0;
  border-bottom: 0;
  overflow: hidden;
}

.graphWrap.gr-hemo {
  width: 300px;
  overflow: hidden;
}

.graphWrap.graphWrap2 .graph2 {
  width: 800px;
  height: 420px;
  border-left: 1px solid #e1e1e1;
  background: url(/resources/images/dis/line.png) 100% 100% no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-h {
  width: 300px;
  height: 570px;
  border-left: 1px solid #e1e1e1;
  background: url(/resources/images/dis/line4.png) 100% 100% no-repeat;
}

.graphWrap.graphWrap2 .graph2.graph-hemo {
  width: 300px;
  height: 570px;
  border-left: 1px solid #e1e1e1;
  background: url(/resources/images/dis/line4.png) 100% 100% no-repeat;
}

.graphWrap.graphWrap2 .graph2>div {
  height: 25px;
  border-radius: 0 50px 50px 0;
  position: absolute;
}

.graphWrap.graphWrap2 .graph2>div p {
  position: absolute;
  top: 2px;
  right: -45px;
  color: #6b57bd;
}

.gr-wrap>ul>li {
  width: 60px;
  text-align: right;
  margin-bottom: 26px;
}

.gr-wrap.gr-wrap4>ul {
  margin-top: 40px;
}

.gr-wrap.gr-wrap4>ul>li {
  width: 400px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #7d7d7d;
  text-align: left;
  display: flex;
  align-items: baseline;
}

.gr-wrap.gr-wrap4>ul>li::before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  background-color: #e93f28;
  border-radius: 50%;
  margin: 2px 5px 0 0;
}

.gr-wrap.gr-wrap4>ul>li:nth-child(2):before {
  background-color: #f69a56;
}

.gr-wrap.gr-wrap4>ul>li:nth-child(3):before {
  background-color: #49c8bd;
}

.gr-wrap.gr-wrap4>ul>li.c-green:nth-child(2):before {
  background-color: #7aa55d;
}

.gr-wrap.gr-wrap4>ul>li:nth-child(3)>span {
  width: 110px;
}

.gr-wrap.gr-wrap4>ul>li>p {
  width: 280px;
  line-height: 1.3;
}

/* 애니메이션 */
.pw-110 {
  width: 110%;
  animation: pw-110 2s;
}

.pw-100 {
  width: 100%;
  animation: pw-100 2s;
}

.pw-92 {
  width: 92%;
  animation: pw-92 2s;
}

.pw-91 {
  width: 91%;
  animation: pw-91 2s;
}

.pw-90 {
  width: 90%;
  animation: pw-90 2s;
}

.pw-84 {
  width: 84%;
  animation: pw-84 2s;
}

.pw-80 {
  width: 80%;
  animation: pw-80 2s;
}

.pw-78 {
  width: 78%;
  animation: pw-78 2s;
}

.pw-75 {
  width: 75%;
  animation: pw-75 2s;
}

.pw-70 {
  width: 70%;
  animation: pw-70 2s;
}

.pw-60 {
  width: 60%;
  animation: pw-60 2s;
}

.pw-65 {
  width: 65%;
  animation: pw-65 2s;
}

.pw-55 {
  width: 55%;
  animation: pw-55 2s;
}

.pw-50 {
  width: 50%;
  animation: pw-50 2s;
}

.pw-40 {
  width: 40%;
  animation: pw-40 2s;
}

.pw-35 {
  width: 35%;
  animation: pw-35 2s;
}

.pw-31 {
  width: 31%;
  animation: pw-31 2s;
}

.pw-30 {
  width: 30%;
  animation: pw-30 2s;
}

.pw-23 {
  width: 23%;
  animation: pw-23 2s;
}

.pw-22 {
  width: 22%;
  animation: pw-22 2s;
}

.pw-20 {
  width: 20%;
  animation: pw-20 2s;
}

.pw-16 {
  width: 16%;
  animation: pw-16 2s;
}

.pw-13 {
  width: 13%;
  animation: pw-13 2s;
}

.pw-12 {
  width: 12%;
  animation: pw-12 2s;
}

.pw-10 {
  width: 10%;
  animation: pw-10 2s;
}

.pw-7 {
  width: 7%;
  animation: pw-7 2s;
}

.pw-6 {
  width: 6%;
  animation: pw-6 2s;
}

.pw-5 {
  width: 5%;
  animation: pw-5 2s;
}

.pw-4-3 {
  width: 4.3%;
  animation: pw-4-3 2s;
}

.pw-4-2 {
  width: 4.2%;
  animation: pw-4-2 2s;
}

.pw-4-1 {
  width: 4.1%;
  animation: pw-4-1 2s;
}

.pw-4 {
  width: 4%;
  animation: pw-4 2s;
}

.pw-3-9 {
  width: 3.9%;
  animation: pw-3-9 2s;
}

.pw-3-8 {
  width: 3.8%;
  animation: pw-3-8 2s;
}

.pw-3-7 {
  width: 3.7%;
  animation: pw-3-7 2s;
}

.pw-3-6 {
  width: 3.6%;
  animation: pw-3-6 2s;
}

.pw-3-5 {
  width: 3.5%;
  animation: pw-3-5 2s;
}

.pw-3-4 {
  width: 3.4%;
  animation: pw-3-4 2s;
}

.pw-3-3 {
  width: 3.3%;
  animation: pw-3-3 2s;
}

.pw-3-2 {
  width: 3.2%;
  animation: pw-3-2 2s;
}

.pw-3-1 {
  width: 3.1%;
  animation: pw-3-1 2s;
}

.pw-3 {
  width: 3%;
  animation: pw-3 2s;
}

.pw-2-9 {
  width: 2.9%;
  animation: pw-2-9 2s;
}

.pw-2-8 {
  width: 2.8%;
  animation: pw-2-8 2s;
}

.pw-2 {
  width: 2%;
  animation: pw-2 2s;
}

.pw-1-5 {
  width: 1.5%;
  animation: pw-1-5 2s;
}

.pw-1 {
  width: 1%;
  animation: pw-1 2s;
}

@keyframes pw-110 {
  from {
    width: 0%
  }

  to {
    width: 110%;

  }
}

@keyframes pw-100 {
  from {
    width: 0%
  }

  to {
    width: 100%;

  }
}

@keyframes pw-92 {
  from {
    width: 0%
  }

  to {
    width: 92%
  }
}

@keyframes pw-91 {
  from {
    width: 0%
  }

  to {
    width: 91%
  }
}

@keyframes pw-90 {
  from {
    width: 0%
  }

  to {
    width: 90%
  }
}

@keyframes pw-84 {
  from {
    width: 0%
  }

  to {
    width: 84%
  }
}

@keyframes pw-80 {
  from {
    width: 0%
  }

  to {
    width: 80%
  }
}

@keyframes pw-78 {
  from {
    width: 0%
  }

  to {
    width: 78%
  }
}

@keyframes pw-75 {
  from {
    width: 0%
  }

  to {
    width: 75%
  }
}

@keyframes pw-70 {
  from {
    width: 0%
  }

  to {
    width: 70%
  }
}

@keyframes pw-65 {
  from {
    width: 0%
  }

  to {
    width: 65%
  }
}

@keyframes pw-60 {
  from {
    width: 0%
  }

  to {
    width: 60%
  }
}

@keyframes pw-55 {
  from {
    width: 0%
  }

  to {
    width: 55%
  }
}

@keyframes pw-50 {
  from {
    width: 0%
  }

  to {
    width: 50%
  }
}


@keyframes pw-40 {
  from {
    width: 0%
  }

  to {
    width: 40%
  }
}

@keyframes pw-35 {
  from {
    width: 0%
  }

  to {
    width: 35%
  }
}

@keyframes pw-31 {
  from {
    width: 0%
  }

  to {
    width: 31%
  }
}

@keyframes pw-30 {
  from {
    width: 0%
  }

  to {
    width: 30%
  }
}

@keyframes pw-23 {
  from {
    width: 0%
  }

  to {
    width: 23%
  }
}

@keyframes pw-22 {
  from {
    width: 0%
  }

  to {
    width: 22%
  }
}

@keyframes pw-20 {
  from {
    width: 0%
  }

  to {
    width: 20%
  }
}

@keyframes pw-16 {
  from {
    width: 0%
  }

  to {
    width: 16%
  }
}

@keyframes pw-13 {
  from {
    width: 0%
  }

  to {
    width: 13%
  }
}

@keyframes pw-12 {
  from {
    width: 0%
  }

  to {
    width: 12%
  }
}

@keyframes pw-10 {
  from {
    width: 0%
  }

  to {
    width: 10%
  }
}


@keyframes pw-7 {
  from {
    width: 0%
  }

  to {
    width: 7%
  }
}

@keyframes pw-6 {
  from {
    width: 0%
  }

  to {
    width: 6%
  }
}

@keyframes pw-5 {
  from {
    width: 0%
  }

  to {
    width: 5%
  }
}

@keyframes pw-4-3 {
  from {
    width: 0%
  }

  to {
    width: 4.3%
  }
}

@keyframes pw-4-2 {
  from {
    width: 0%
  }

  to {
    width: 4.2%
  }
}

@keyframes pw-4-1 {
  from {
    width: 0%
  }

  to {
    width: 4.1%
  }
}

@keyframes pw-4 {
  from {
    width: 0%
  }

  to {
    width: 4%
  }
}

@keyframes pw-3-9 {
  from {
    width: 0%
  }

  to {
    width: 3.9%
  }
}

@keyframes pw-3-8 {
  from {
    width: 0%
  }

  to {
    width: 3.8%
  }
}

@keyframes pw-3-7 {
  from {
    width: 0%
  }

  to {
    width: 3.7%
  }
}

@keyframes pw-3-6 {
  from {
    width: 0%
  }

  to {
    width: 3.6%
  }
}

@keyframes pw-3-5 {
  from {
    width: 0%
  }

  to {
    width: 3.5%
  }
}

@keyframes pw-3-4 {
  from {
    width: 0%
  }

  to {
    width: 3.4%
  }
}

@keyframes pw-3-3 {
  from {
    width: 0%
  }

  to {
    width: 3.3%
  }
}

@keyframes pw-3-2 {
  from {
    width: 0%
  }

  to {
    width: 3.2%
  }
}

@keyframes pw-3-1 {
  from {
    width: 0%
  }

  to {
    width: 3.1%
  }
}

@keyframes pw-3 {
  from {
    width: 0%
  }

  to {
    width: 3%
  }
}

@keyframes pw-2-9 {
  from {
    width: 0%
  }

  to {
    width: 2.9%
  }
}

@keyframes pw-2-8 {
  from {
    width: 0%
  }

  to {
    width: 2.8%
  }
}

@keyframes pw-2-1 {
  from {
    width: 0%
  }

  to {
    width: 2.1%
  }
}

@keyframes pw-2 {
  from {
    width: 0%
  }

  to {
    width: 2%
  }
}

@keyframes pw-1-5 {
  from {
    width: 0%
  }

  to {
    width: 1.5%
  }
}

@keyframes pw-1 {
  from {
    width: 0%
  }

  to {
    width: 1%
  }
}

.graphWrap.graphWrap2 .graph2.stroke-grp>div#pw-item1 {
  bottom: 379px;
  background: #c4a1e7;
}

.graphWrap.graphWrap2 .graph2>div#pw-item1 {
  bottom: 379px;
  background: #c4a1e7;
}

.graphWrap.graphWrap2 .graph2>div#pw-item1 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2>div#pw-item2 {
  bottom: 338px;
  background: #6b57bd;
}

.graphWrap.graphWrap2 .graph2>div#pw-item2 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2>div#pw-item3 {
  bottom: 298px;
  background: #c4a1e7;
}

.graphWrap.graphWrap2 .graph2>div#pw-item3 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2>div#pw-item4 {
  bottom: 258px;
  background: #6b57bd;
}

.graphWrap.graphWrap2 .graph2>div#pw-item4 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2>div#pw-item5 {
  bottom: 213px;
  background: #c4a1e7;
}

.graphWrap.graphWrap2 .graph2>div#pw-item5 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2>div#pw-item6 {
  bottom: 175px;
  background: #6b57bd;

}

.graphWrap.graphWrap2 .graph2>div#pw-item6 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2>div#pw-item7 {
  bottom: 138px;
  background: #c4a1e7;
}

.graphWrap.graphWrap2 .graph2>div#pw-item7 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2>div#pw-item8 {
  bottom: 101px;
  background: #6b57bd;
}

.graphWrap.graphWrap2 .graph2>div#pw-item8 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2>div#pw-item9 {
  bottom: 58px;
  background: #c4a1e7;
}

.graphWrap.graphWrap2 .graph2>div#pw-item9 span {
  position: absolute;
  top: 0;
  left: -80px;
}

.graphWrap.graphWrap2 .graph2>div#pw-item10 {
  bottom: 18px;
  background: #6b57bd;
}

.graphWrap.graphWrap2 .graph2>div#pw-item10 span {
  position: absolute;
  top: 0;
  left: -80px;
}

#arrow-wrap .arrow-top {
  position: absolute;
  bottom: 0;
  width: 25px;
}

#arrow-wrap .arrow-top::after {
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  border: 25px solid transparent;
  border-top-width: 0;
  border-bottom-color: #6b57bd;
  left: 50%;
  top: -23px;
  transform: translateX(-50%);
}

#arrow-wrap .arrow-top2::after {
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  border: 25px solid transparent;
  border-top-width: 0;
  border-bottom-color: #b589e1;
  left: 50%;
  top: -23px;
  transform: translateX(-50%);
}




/* 애니메이션 */
.ph-100 {
  height: 100%;
  animation: ph-100 2s;
}

.ph-90 {
  height: 90%;
  animation: ph-90 2s;
}

.ph-80 {
  height: 80%;
  animation: ph-80 2s;
}

.ph-78 {
  height: 78%;
  animation: ph-78 2s;
}

.ph-70 {
  height: 70%;
  animation: ph-70 2s;
}

.ph-67 {
  height: 67%;
  animation: ph-67 2s;
}

.ph-66 {
  height: 66%;
  animation: ph-66 2s;
}

.ph-64 {
  height: 64%;
  animation: ph-64 2s;
}

.ph-62 {
  height: 62%;
  animation: ph-62 2s;
}

.ph-60 {
  height: 60%;
  animation: ph-60 2s;
}

.ph-50 {
  height: 50%;
  animation: ph-50 2s;
}

.ph-40 {
  height: 40%;
  animation: ph-40 2s;
}

.ph-35 {
  height: 35%;
  animation: ph-35 2s;
}

.ph-34 {
  height: 34%;
  animation: ph-34 2s;
}

.ph-33 {
  height: 33%;
  animation: ph-33 2s;
}

.ph-32 {
  height: 32%;
  animation: ph-32 2s;
}

.ph-30 {
  height: 30%;
  animation: ph-30 2s;
}

.ph-28 {
  height: 28%;
  animation: ph-28 2s;
}

.ph-27-6 {
  height: 27.6%;
  animation: ph-27-6 2s;
}

.ph-27-5 {
  height: 27.5%;
  animation: ph-27-5 2s;
}

.ph-27 {
  height: 27%;
  animation: ph-27 2s;
}

.ph-26 {
  height: 26%;
  animation: ph-26 2s;
}

.ph-25 {
  height: 25%;
  animation: ph-25 2s;
}

.ph-21 {
  height: 21%;
  animation: ph-21 2s;
}

.ph-20 {
  height: 20%;
  animation: ph-20 2s;
}

.ph-19 {
  height: 19%;
  animation: ph-19 2s;
}

.ph-18 {
  height: 18%;
  animation: ph-18 2s;
}

.ph-17 {
  height: 17%;
  animation: ph-17 2s;
}

.ph-16 {
  height: 16%;
  animation: ph-16 2s;
}

.ph-15 {
  height: 15%;
  animation: ph-15 2s;
}

.ph-14 {
  height: 14%;
  animation: ph-14 2s;
}

.ph-13 {
  height: 13%;
  animation: ph-13 2s;
}

.ph-12 {
  height: 12%;
  animation: ph-12 2s;
}

.ph-11 {
  height: 11%;
  animation: ph-11 2s;
}

.ph-10 {
  height: 10%;
  animation: ph-10 2s;
}

.ph-9 {
  height: 9%;
  animation: ph-9 2s;
}

.ph-8 {
  height: 8%;
  animation: ph-8 2s;
}

.ph-7 {
  height: 7%;
  animation: ph-7 2s;
}

.ph-6 {
  height: 6%;
  animation: ph-6 2s;
}

.ph-5 {
  height: 5%;
  animation: ph-5 2s;
}

.ph-4 {
  height: 4%;
  animation: ph-4 2s;
}

.ph-3-5 {
  height: 3.5%;
  animation: ph-3-5 2s;
}

.ph-3 {
  height: 3%;
  animation: ph-3 2s;
}

.ph-2 {
  height: 2%;
  animation: ph-2 2s;
}

.ph-1 {
  height: 1%;
  animation: ph-11s;
}

@keyframes ph-100 {
  from {
    height: 0%
  }

  to {
    height: 100%;

  }
}

@keyframes ph-90 {
  from {
    height: 0%
  }

  to {
    height: 90%
  }
}

@keyframes ph-80 {
  from {
    height: 0%
  }

  to {
    height: 80%
  }
}

@keyframes ph-78 {
  from {
    height: 0%
  }

  to {
    height: 78%
  }
}

@keyframes ph-70 {
  from {
    height: 0%
  }

  to {
    height: 70%
  }
}

@keyframes ph-67 {
  from {
    height: 0%;
  }

  to {
    height: 67%
  }
}

@keyframes ph-66 {
  from {
    height: 0%;
  }

  to {
    height: 66%
  }
}

@keyframes ph-64 {
  from {
    height: 0%;
  }

  to {
    height: 64%
  }
}

@keyframes ph-62 {
  from {
    height: 0%;
  }

  to {
    height: 62%
  }
}

@keyframes ph-60 {
  from {
    height: 0%;
  }

  to {
    height: 60%
  }
}

@keyframes ph-50 {
  from {
    height: 0%
  }

  to {
    height: 50%
  }
}


@keyframes ph-40 {
  from {
    height: 0%
  }

  to {
    height: 40%
  }
}

@keyframes ph-35 {
  from {
    height: 0%
  }

  to {
    height: 35%
  }
}

@keyframes ph-34 {
  from {
    height: 0%
  }

  to {
    height: 34%
  }
}

@keyframes ph-33 {
  from {
    height: 0%
  }

  to {
    height: 33%
  }
}

@keyframes ph-32 {
  from {
    height: 0%
  }

  to {
    height: 32%
  }
}

@keyframes ph-30 {
  from {
    height: 0%
  }

  to {
    height: 30%
  }
}

@keyframes ph-28 {
  from {
    height: 0%
  }

  to {
    height: 28%
  }
}

@keyframes ph-27-6 {
  from {
    height: 0%
  }

  to {
    height: 27.6%
  }
}

@keyframes ph-27-5 {
  from {
    height: 0%
  }

  to {
    height: 27.5%
  }
}

@keyframes ph-27 {
  from {
    height: 0%
  }

  to {
    height: 27%
  }
}

@keyframes ph-26 {
  from {
    height: 0%
  }

  to {
    height: 26%
  }
}

@keyframes ph-25 {
  from {
    height: 0%
  }

  to {
    height: 25%
  }
}

@keyframes ph-21 {
  from {
    height: 0%
  }

  to {
    height: 21%
  }
}

@keyframes ph-20 {
  from {
    height: 0%
  }

  to {
    height: 20%
  }
}

@keyframes ph-19 {
  from {
    height: 0%
  }

  to {
    height: 19%
  }
}

@keyframes ph-18 {
  from {
    height: 0%
  }

  to {
    height: 18%
  }
}

@keyframes ph-17 {
  from {
    height: 0%
  }

  to {
    height: 17%
  }
}

@keyframes ph-16 {
  from {
    height: 0%
  }

  to {
    height: 16%
  }
}

@keyframes ph-15 {
  from {
    height: 0%
  }

  to {
    height: 15%
  }
}

@keyframes ph-14 {
  from {
    height: 0%
  }

  to {
    height: 14%
  }
}

@keyframes ph-13 {
  from {
    height: 0%
  }

  to {
    height: 13%
  }
}

@keyframes ph-12 {
  from {
    height: 0%
  }

  to {
    height: 12%
  }
}

@keyframes ph-11 {
  from {
    height: 0%
  }

  to {
    height: 11%
  }
}

@keyframes ph-10 {
  from {
    height: 0%
  }

  to {
    height: 10%
  }
}

@keyframes ph-9 {
  from {
    height: 0%
  }

  to {
    height: 9%
  }
}

@keyframes ph-8 {
  from {
    height: 0%
  }

  to {
    height: 8%
  }
}

@keyframes ph-7 {
  from {
    height: 0%
  }

  to {
    height: 7%
  }
}

@keyframes ph-6 {
  from {
    height: 0%
  }

  to {
    height: 6%
  }
}

@keyframes ph-5 {
  from {
    height: 0%
  }

  to {
    height: 5%
  }
}

@keyframes ph-4 {
  from {
    height: 0%
  }

  to {
    height: 4%
  }
}


@keyframes ph-3-5 {
  from {
    height: 0%
  }

  to {
    height: 3.5%
  }
}

@keyframes ph-3 {
  from {
    height: 0%
  }

  to {
    height: 3%
  }
}

@keyframes ph-2 {
  from {
    height: 0%
  }

  to {
    height: 2%
  }
}

@keyframes ph-1 {
  from {
    height: 0%
  }

  to {
    height: 1%
  }
}

.graphWrap.graphWrap3 {
  position: relative;
  width: 925px;
  height: 360px;
  margin: 0px auto 0;
  border-bottom: 1px solid #dddddd;
}


.graphWrap .graph.graph3 {
  width: 923px;
  height: 100%;
  background: url(/resources/images/dis/line2.png) 100% 100% no-repeat;
}

.graphWrap .graph.graph3>div {
  border-radius: 50px 50px 0 0;
  color: #359ab5;
}

.graphWrap .graph.graph3>div#item11 {
  left: 25px;
  background: #49c8bd;
}

.graphWrap .graph.graph3>div#item11 span {
  position: absolute;
  left: -8px;
  top: -20px;

}

.graphWrap .graph.graph3>div#item12 {
  left: 80px;
  background: #359ab5;
}

.graphWrap .graph.graph3>div#item12 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item13 {
  left: 135px;
  background: #49c8bd;
}

.graphWrap .graph.graph3>div#item13 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item14 {
  left: 187px;
  background: #359ab5;
}

.graphWrap .graph.graph3>div#item14 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item15 {
  left: 240px;
  background: #49c8bd;
}

.graphWrap .graph.graph3>div#item15 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item16 {
  left: 293px;
  background: #359ab5;
}

.graphWrap .graph.graph3>div#item16 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item17 {
  left: 345px;
  background: #49c8bd;
}

.graphWrap .graph.graph3>div#item17 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item18 {
  left: 398px;
  background: #359ab5;
}

.graphWrap .graph.graph3>div#item18 span {
  position: absolute;
  left: 0px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item19 {
  left: 452px;
  background: #49c8bd;
}

.graphWrap .graph.graph3>div#item19 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item20 {
  left: 505px;
  background: #359ab5;
}

.graphWrap .graph.graph3>div#item20 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item21 {
  left: 557px;
  background: #49c8bd;
}

.graphWrap .graph.graph3>div#item21 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item22 {
  left: 610px;
  background: #359ab5;
}

.graphWrap .graph.graph3>div#item22 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item23 {
  left: 663px;
  background: #49c8bd;
}

.graphWrap .graph.graph3>div#item23 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item24 {
  left: 716px;
  background: #359ab5;
}

.graphWrap .graph.graph3>div#item24 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item25 {
  left: 769px;
  background: #49c8bd;
}

.graphWrap .graph.graph3>div#item25 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item26 {
  left: 821px;
  background: #359ab5;
}

.graphWrap .graph.graph3>div#item26 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.graphWrap .graph.graph3>div#item27 {
  left: 873px;
  background: #49c8bd;
}

.graphWrap .graph.graph3>div#item27 span {
  position: absolute;
  left: -8px;
  top: -20px;
}

.gr2 {
  margin: 80px 0 637px;
}

.gr3 {
  margin: 80px 0;
}

.gr-wrap.gr-wrap2 {
  padding: 40px 38px;
}

.gr3-wrap {
  padding: 0 25px;
  box-sizing: border-box;
}

.gr3-wrap li {
  width: 25px;
  text-align: center;
}

.gr-wrap.gr-wrap3 {
  width: 480px;
  height: 440px;
  padding: 24px 38px 0;
  box-sizing: border-box;
}

.gr-wrap.gr-wrap4 {
  width: 480px;
  height: 690px;
  padding: 24px 38px 0;
  box-sizing: border-box;
}

.gr-wrap.gr-wrap4 {
  width: 480px;
  height: 690px;
  padding: 24px 38px 0;
  box-sizing: border-box;
}

.gr-wrap.gr-wrap4.myocar {
  padding: 24px 23px 0;
}

.gr4-wrap {
  display: flex;
  justify-content: space-between;
  padding: 0 25px;
  font-weight: bold;
  box-sizing: border-box;
}

.graphWrap .graph.graph4>div {
  width: 44px;
}

.graphWrap.graphWrap4 {
  position: relative;
  width: 400px;
  height: 272px;
  margin: 0px auto 0;
  border-bottom: 1px solid #dddddd;
}

.graphWrap .graph.graph4 {
  width: 398px;
  height: 100%;
  background: url(/resources/images/dis/line3.png) 50% 50% no-repeat;
}

.graphWrap .graph.graph4>div {
  border-radius: 10px 10px 0 0;
  color: #306ac9;
}

.graphWrap .graph.graph4>div#item28 {
  left: 26px;
  background: #5caeed;
}

.graphWrap .graph.graph4>div#item28 span {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}

.graphWrap .graph.graph4>div#item29 {
  left: 128px;
  background: #306ac9;
}

.graphWrap .graph.graph4>div#item29 span {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}

.graphWrap .graph.graph4>div#item30 {
  left: 231px;
  background: #5caeed;
}

.graphWrap .graph.graph4>div#item30 span {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}

.graphWrap .graph.graph4>div#item31 {
  left: 333px;
  background: #306ac9;
}

.graphWrap .graph.graph4>div#item31 span {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}


.graphWrap .graph.graph5>div {
  border-radius: 10px 10px 0 0;
  color: #3e7832;
}

.graphWrap .graph.graph5>div#item32 {
  left: 26px;
  background: #b8d856;
}

.graphWrap .graph.graph5>div#item32 span {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}

.graphWrap .graph.graph5>div#item33 {
  left: 128px;
  background: #6bb95b;
}

.graphWrap .graph.graph5>div#item33 span {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}

.graphWrap .graph.graph5>div#item34 {
  left: 231px;
  background: #b8d856;
}

.graphWrap .graph.graph5>div#item34 span {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}

.graphWrap .graph.graph5>div#item35 {
  left: 333px;
  background: #6bb95b;
}

.graphWrap .graph.graph5>div#item35 span {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}


.graphWrap .graph.graph6>div {
  border-radius: 10px 10px 0 0;
  color: #8a553c;
}

.graphWrap .graph.graph6>div#item36 {
  left: 26px;
  background: #f69a56;
}

.graphWrap .graph.graph6>div#item36 span {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}

.graphWrap .graph.graph6>div#item37 {
  left: 128px;
  background: #f26522;
}

.graphWrap .graph.graph6>div#item37 span {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}

.graphWrap .graph.graph6>div#item38 {
  left: 231px;
  background: #f69a56;
}

.graphWrap .graph.graph6>div#item38 span {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}

.graphWrap .graph.graph6>div#item39 {
  left: 333px;
  background: #f26522;
}

.graphWrap .graph.graph6>div#item39 span {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}


.s-peo3 {
  position: relative;
  width: 72px;
  /* 이미지의 실제 크기에 맞게 조정 */
  height: 201px;
  /* 이미지의 실제 크기에 맞게 조정 */
  background: url(/resources/images/dis/peo7.png) no-repeat;
}

.transparent-people3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.color-fill4 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 43px;
  background-color: #4898d6;
  clip-path: inset(100% 0 0 0);
  animation: fill 2s forwards;
}

@keyframes fill4 {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

.s-peo4 {
  position: relative;
  width: 105px;
  /* 이미지의 실제 크기에 맞게 조정 */
  height: 201px;
  /* 이미지의 실제 크기에 맞게 조정 */
  background: url(/resources/images/dis/peo8.png) no-repeat;
  /* overflow: hidden; */
}

.transparent-people4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.color-fill5 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 33px;
  background-color: #f35b7c;
  clip-path: inset(100% 0 0 0);
  animation: fill 3s forwards;
  overflow: hidden;
}

@keyframes fill5 {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

/* .gr-box {
  position: relative;
  width: 140px;
  height: 80px;
  border: 1px solid #4898d6;
  border-radius: 20px;
}

.gr-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 23px solid #4898d6;
  border-top-color: #fff;
  border-bottom: 0;
  margin-left: -23px;
  margin-bottom: -23px;

  border-radius: 20px;
} */

.gr-box {
  position: relative;
  width: 140px;
  height: 80px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #4898d6;
  box-sizing: border-box;
}

.gr-box:after,
.gr-box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.gr-box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 11px;
  margin-left: -11px;
}

.gr-box:before {
  border-color: rgba(72, 152, 214, 0);
  border-top-color: #4898d6;
  border-width: 12px;
  margin-left: -12px;
}

.gr-box2 {
  position: relative;
  width: 140px;
  height: 80px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #f35b7c;
  box-sizing: border-box;
}

.gr-box2:after,
.gr-box2:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.gr-box2:before {
  border-color: rgba(72, 152, 214, 0);
  border-top-color: #f35b7c;
  border-width: 12px;
  margin-left: -12px;
}

.gr-box2:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 11px;
  margin-left: -11px;
}

/* 네트워크 */
/* 네트워크 */
#containers {
  background-color: #eaf2f5;
}

.n-center {
  width: 1260px;
  margin: 0 auto;
  padding: 30px 0 0;
}

.dg-map-in {
  position: relative;
}
.net-pin img[data-target] {
  position: relative;
  z-index: 3;
}
.net-pin img[data-target].active-pin {
  z-index: 9999;
}
/* 서울 핀 */
.seoul-pin > img:nth-child(1) {
  position: absolute;
  top: 140px;
  left: 246px;
}

/* 경기 핀 */
.gyeonggi-pin > img:nth-child(1) {
  position: absolute;
  top: 121px;
  left: 265px;
}
.gyeonggi-pin > img:nth-child(2) {
  position: absolute;
  top: 122px;
  left: 226px;
}
.gyeonggi-pin > img:nth-child(3) {
  position: absolute;
  top: 170px;
  left: 265px;
}

/* 인천 핀 */
.incheon-pin > img:nth-child(1) {
  position: absolute;
  top: 154px;
  left: 220px;
}
.incheon-pin > img:nth-child(2) {
  position: absolute;
  top: 154px;
  left: 207px;
}

/* 강원 핀 */
.gangwon-pin > img:nth-child(1) {
  position: absolute;
  top: 90px;
  left: 344px;
}

/* 충청도 */
.chungnam-pin > img:nth-child(1) {
  position: absolute;
  top: 318px;
  left: 299px;
}
.chungnam-pin > img:nth-child(2) {
  position: absolute;
  top: 246px;
  left: 268px;
}
.chungnam-pin > img:nth-child(3) {
  position: absolute;
  top: 310px;
  left: 290px;
}

.chungbuk-pin > img:nth-child(1) {
  position: absolute;
  top: 284px;
  left: 283px;
}
.chungbuk-pin > img:nth-child(2) {
  position: absolute;
  top: 290px;
  left: 319px;
}

/* 경상도 */
.gyeongbuk-pin > img:nth-child(1) {
  position: absolute;
  bottom: 412px;
  right: 168px;
}
.gyeongbuk-pin > img:nth-child(2) {
  position: absolute;
  bottom: 390px;
  right: 250px;
}
.gyeongbuk-pin > img:nth-child(3) {
  position: absolute;
  bottom: 439px;
  right: 241px;
}

.gyeongnam-pin > img:nth-child(1) {
  position: absolute;
  bottom: 345px;
  right: 167px;
}
.gyeongnam-pin > img:nth-child(2) {
  position: absolute;
  bottom: 308px;
  right: 239px;
}
.gyeongnam-pin > img:nth-child(3) {
  position: absolute;
  bottom: 296px;
  right: 198px;
}
.gyeongnam-pin > img:nth-child(4) {
  position: absolute;
  bottom: 348px;
  right: 153px;
}
.gyeongnam-pin > img:nth-child(5) {
  position: absolute;
  bottom: 290px;
  right: 298px;
}

/* 전라도 */
.jeonnam-pin > img:nth-child(1) {
  position: absolute;
  bottom: 261px;
  left: 308px;
}
.jeonnam-pin > img:nth-child(2) {
  position: absolute;
  bottom: 291px;
  left: 237px;
}

.jeonbuk-pin > img:nth-child(1) {
  position: absolute;
  bottom: 395px;
  left: 245px;
}

/* 제주 핀 */
.jeju-pin > img:nth-child(1) {
  position: absolute;
  bottom: 115px;
  left: 193px;
}

.net-right > .s-title {
  font-size: 32px;
}

.net-wrap {
  width: 460px;
  height: 520px;
  border: 1px solid #b6b7be;
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
  position: absolute;
}

.net-top {
  background-color: #e1c5e1;
  font-size: 28px;
  font-weight: bold;
  padding: 35px 0 35px 50px;
  box-sizing: border-box;
}

.net-bot {
  padding: 40px;
  box-sizing: border-box;
}

.net-bot > div {
  width: 375px;
}

.net-bot > div > h4 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.net-bot > div > ul > li {
  margin-bottom: 15px;
  color: #898989;
  font-size: 18px;
}

#pin-tooltip {
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    font-family: 'Pretendard', sans-serif;
}
.net-pin img[data-target] {
  transition: transform 0.2s ease-in-out, filter 0.2s ease;
  cursor: pointer;
}

.net-pin img[data-target]:hover {
  transform: scale(1.3);
  z-index: 99999 !important;
  filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.3));
}

/* 현재 선택되어 활성화된 핀은 확대된 상태 유지 */
.net-pin img[data-target].active-pin {
  transform: scale(1.2);
  z-index: 9999;
}

/* .net-right { */
/*   position: relative; */
/* } */

/* .net-right>.s-title { */
/*   font-size: 32px; */
/* } */

/* .net-wrap { */
/*   width: 460px; */
/*   height: 640px; */
/*   border: 1px solid #b6b7be; */
/*   border-radius: 20px; */
/*   overflow: hidden; */
/*   background-color: #fff; */
/*   position: absolute; */
/* } */

/* .net-top { */
/*   background-color: #e1c5e1; */
/*   font-size: 28px; */
/*   font-weight: bold; */
/*   padding: 35px 0 35px 50px; */
/*   box-sizing: border-box; */
/* } */

/* .net-bot { */
/*   margin: 30px 0 0px 40px; */
/*   box-sizing: border-box; */
/* } */

/* .net-bot>div { */
/*   width: 375px; */
/* } */

/* .net-bot>div>h4 { */
/*   font-size: 20px; */
/*   font-weight: bold; */
/*   margin-bottom: 20px; */

/* } */

/* .net-bot>div>ul>li { */
/*   margin-bottom: 15px; */
/*   color: #898989; */
/*   font-size: 18px; */

/* } */

#jeju-t>.net-top {
  background-color: rgb(255, 204, 204);
}

#gyeonggi-t>.net-top {
  background-color: rgb(180, 210, 238);
}

#seoul-t>.net-top {
  background-color: rgb(227, 228, 248);
}

#incheon-t>.net-top {
  background-color: rgb(139, 180, 223);
}

#chungnam-t>.net-top {
  background-color: rgb(247, 244, 227);
}

#daejeon-t>.net-top {
  background-color: rgb(251, 187, 119);
}

#jeonbuk-t>.net-top {
  background-color: rgb(227, 228, 248);
}

#jeonnam-t>.net-top {
  background-color: rgb(169, 171, 196);
}

#gyeongbuk-t>.net-top {
  background-color: rgb(214, 236, 177);
}

#chungbuk-t>.net-top {
  background-color: rgb(248, 243, 137);
}

#daegu-t>.net-top {
  background-color: rgb(174, 197, 168);
}

#gyeongnam-t>.net-top {
  background-color: rgb(175, 234, 234);
}

#ulsan-t>.net-top {
  background-color: rgb(228, 195, 208);
}

#gwangju-t>.net-top {
  background-color: rgb(136, 153, 206);
}

#busan-t>.net-top {
  background-color: rgb(255, 255, 204);
}

#sejong-t>.net-top {
  background-color: rgb(223, 255, 204);
}

.net-wrap {
  display: none;
}

/* 인사말 */
.gree-wrap .img-wrap {
  width: 520px;
  height: 650px;
  margin-right: 86px;
}

.gree-wrap .img-wrap img {
  width: 100%;
  height: 100%;
}

.gree-wrap .text {
  width: 655px;
}

.gree-wrap .text h2 {
  font-weight: bold;
  font-size: 32px;
  line-height: 1.3;
  margin-bottom: 40px;
}

.gree-wrap .text p {
  color: #7d7d7d;
  font-size: 18px;
  line-height: 1.5;
}

/* 커뮤니티 메인 */
.sub-container {
  background-color: #e9edef;
}

.s-container {
  padding-top: 60px;
}

.sub-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sub-wrap section {
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  width: 49%;
  padding: 30px 40px;
  box-sizing: border-box;
  margin-bottom: 40px;
  background-color: #fff;
}

.sub-wrap section h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 38px;
}

.sub-wrap section h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-wrap section .s-txt {
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 300px;
}

.sub-wrap section .s-txt>div>p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  height: 134px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}


.sub-wrap section .s-txt>.btn-w {
  border: 1px solid #c2c2c2;
  padding: 13px 0;
}

.s-cont1,
.s-cont2 {
  min-height: 200px !important;
}

.s-cont3,
.s-cont4,
.s-cont5,
.s-cont6 {
  max-height: 350px !important;
}

.s-cont7,
.s-cont8 {
  max-height: 260px !important;
}

#ticker,
#ticker2 {
  float: left;
  width: 500px;
  height: 55px;
  overflow: hidden;
}

.s-cont {
  border: 2px solid #d81f25;
  padding: 0 5px;
  height: 55px;
  overflow: hidden;
  background: #fff;
  width: 350px;
  float: left;
}

.s-cont ul,
.s-cont li {
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}


.s-cont li>div>p {
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-cont li {
  margin: 0 0 10px 0;
}

.s-cont li a {
  display: block;
  height: 55px;
  line-height: 55px;
  color: #555;
  text-decoration: none;
}

.s-cont3>.s-txt {
  height: 255px !important;
}

.thum-wrap {
  width: 180px;
  height: 250px;
  border: 1px solid #e1e1e1;
}

.thum-wrap>img {
  width: 100%;
}

.s-cont4 .s4-txt {
  margin-left: 58px;
}

.fa-user-plus,
.fa-comments {
  font-size: 30px;
  color: #7f7f7f;
}

.s-cont4 .s4-txt h1 {
  margin-bottom: 20px;
}

.s-cont4 .s4-txt ul li {
  font-size: 16px;
  color: #898989;
  margin-bottom: 10px;
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-cont4 .s4-list li:hover a {
  color: #357db5;
}

.s-cont4 .s4-txt>p {
  font-size: 16px;
  color: #898989;
}

.s-cont4 .s4-txt>.s4-list li {

  margin-bottom: 10px;
  color: #898989;
}

.s-cont4 .s4-txt>.s4-list li>a {
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar {
  height: 1px;
  background-color: #e5e5e5;
  margin: 30px 0;
}

.s-cont4 .btn-w {
  border: 1px solid #c2c2c2;
  padding: 13px 0;
}

.s-cont4.s4-info .btn-w {
  margin-left: 94px;
}

.s-cont4.s4-info .s6-txt>.s6-list li>a {
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-cont6 {
  background: url(/resources/images/commu/faq.png) no-repeat 107% 110%;
}

.s-cont6 .s6-list li {
  margin-bottom: 20px;
}

.s-cont6 .s6-list li a {
  font-size: 20px;
  font-weight: 500;
}

.s-cont6 .s6-txt>.s6-list li>a {
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-cont6 .s6-list li:hover a {
  color: #357db5;
}

.sub-thumbnail {
  width: 180px;
  height: 100px;
}

.sub-thumbnail img {
  width: 100%;
}

.s8-txt-wrap {
  margin-left: 40px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
}

.s8-txt-wrap>p {
  font-size: 20px;
}
.s-cont7 .s7-list li a {
  font-size: 20px;
  font-weight: 500;
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-cont7 .s7-list li {
  margin-bottom: 20px;
}


.s-cont7 .s7-list li:hover a {
  color: #357db5;
}


.index-preview {
  width: 100%;
  background-color: #4d80c7;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
}

.index-preview p {
  text-align: center;
  height: 100%;
  margin: 5px;
}


/* 교육 */
.s-nav.s-nav2 {
  width: 230px;
  height: 100%;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  padding: 30px 20px;
  box-sizing: border-box;
  margin-right: 30px;
  min-height: 230px;
}
.thum-img-wrap {
  width: 520px;
  height: 293px;
}

.thum-img-wrap img {
  width: 100%;
  height: 100%;
}

.edu-txt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 293px;
}

#progress {
  margin-bottom: 58px;
  appearance: none;
  height: 30px;
}

#progress::-webkit-progress-bar {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #357db5;
  width: 400px;
  height: 30px;
  overflow: hidden;
}

#progress::-webkit-progress-value {
  background: #357db5;
  border-radius: 0;
  height: 30px;
  width: 50px;
}

.edu-bar > p {
  font-size: 18px;
  color: #000;
  margin-bottom: 13px;
}

.edu-tbl > thead > tr > th {
  font-size: 18px;
  color: #000;
  height: 50px;
}
.edu-tbl tbody > tr {
  border-bottom: 1px solid #e1e1e1;
  box-sizing: border-box;
  text-align: center;
}

.edu-tbl tbody > tr:first-child {
  border-top: 1px solid #9d9d9d;
}

.edu-tbl tbody > tr:last-child {
  border-bottom: 1px solid #9d9d9d !important;
}

.edu-tbl tbody > tr > td {
  font-size: 18px;
  color: #000;
  height: 70px;
}

.edu-tab {
  display: flex;
  justify-content: flex-start;
}

.edu-tab .s-title {
  width: 50% !important;
  padding: 12px 0px;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  text-align: center;
  position: relative;
  white-space: nowrap;
  border-bottom: 1px solid #ddd;
}
.edu-tab .s-title.active {
  color: #357db5;
  font-weight: 700;
}

.edu-tab .s-title.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 4px;
  background: #357db5;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  padding: 37px 0 0;
}

/* 문제 */
.by-cont {
  border-top: 1px solid #adadad;
  border-bottom: 1px solid #adadad;
  background: #f8f8f8;
  height: 140px;
}

.by-cont>h2 {
  font-size: 28px;
  font-weight: 500;
}

.answer {
  padding: 60px 30px;
  box-sizing: border-box;
  border-bottom: 1px solid #b2b2b2;
}

.answer section {
  margin-bottom: 60px;
}

.answer h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 28px;
}

.answer label {
  color: #7d7d7d;
  font-size: 16px;
  margin-right: 60px;
}

.answer-x div>label {
  margin-right: 60px;
}

.answer-y div>label {
  margin-bottom: 20px;
}

.edu-que-list {margin-bottom:20px;}

.edu-que-list:last-child {margin-bottom:0px;}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid #d2d2d2;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  margin-right: 10px;
}

input[type='radio']:checked {
  background-color: #111;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #d2d2d2;
}
#answerContent::placeholder {
  color: #5c5c5c;
  opacity: 1;
}
.bbox {
  width: 200px;
  border: 1px solid #cccccc;
  background-color: #fff !important;
  border-radius: 5px;
  margin-left: 10px;
}

.s-agree.active,
.s-agree2.active {
  background-color: #043984;
  color: #fff;
}

.btn-pop-agree,
.btn-pop-agree2 {
  width: 500px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
}

/* 진행중인 교육 */

.myedu-list,
.myedu-list2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 60px;
}

.myedu-list>div,
.myedu-list2>div {
  margin: 0 0 60px;
  width: 420px;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.thum-wrap2 {
  position: relative;
  width: 358px;
  height: 208px;
}


.thum2 {
  width: 340px;
  height: 190px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.thum {
  width: 340px;
  height: 190px;
  position: absolute;
  left: 0%;
  background-color: #000;
  opacity: 0.3;
}

.thum-img {
  width: 340px;
  height: 190px;
}

.thum-img img {
  width: 100%;
  height: 100%;
}

/* 교육 상세정보 */
.edu-d-list li>div {
  display: flex;
}

.edu-d-list li>div>p {
  width: 100px;
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}

.edu-d-list li>div>span {
  color: #7d7d7d;
}

.video-wrap {
  width: 100%;
  height: 500px;
}

/* 1:1문의 */
.notice-list.edu-notice-list li>div:nth-child(2)>span {
  font-size: 16px;
}

.notice-list.edu-notice-list li>div:nth-child(2)>span:nth-child(1) {
  color: #7d7d7d;
  margin-right: 60px;
}

/* 1:1문의 상세 */
.inqu-write {
  border-top: 1px solid #9d9d9d;
  border-bottom: 1px solid #9d9d9d;
}

.inqu-write li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 30px;
  border-bottom: 1px solid #e1e1e1;
  font-size: 20px;
}

.inqu-write li>p {
  width: 150px;
}

.inqu-write li>span {
  font-size: 16px;
  color: #5c5c5c;
}

select {
  border: 1px solid #ccc;
  font-size: 16px;
}

.inqu-write li:last-child {
  padding: 20px 30px;
  border: none;
}

.inqu-textarea,
.inqu-textarea2 {
  width: 1030px;
  min-height: 270px;
  font-size: 18px;
  border-color: #ccc;
  border-radius: 5px;
  resize: none;
  outline: none;
  padding: 10px;
  line-height: 1.3;
  color: #7d7d7d;
}

/* 이수증 팝업 */
.pop-certi {
    width: 1186px !important;
    height: 900px;
    background-color: #ebebeb;
}

.pop-certi .bg {
    width: 1106px !important;
    height: 745px;
    background-color: #fff;
}

.pop-certi .bg2 {
    width: 1080px !important;
    height: 720px;
    border: 4px solid #c89f74;
    background-color: #fff;
    background: url("/resources/images/commu/certi/bg.png") no-repeat;
    box-sizing: border-box;
}

.pop-certi .bg3 {
    width: 1060px !important;
    height: 700px;
    border: 1px solid #c89f74;
    padding: 20px;
    box-sizing: border-box;
}

.pop-t-title {
    font-size: 14px;
    color: #a4724d;
    margin-bottom: 4px;
}

.pop-certi .pop-body {
    padding: 0;
    height: 444px;
}

.pop-certi .pop-body .certi-txt-top h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 24px;
}

.pop-certi .pop-body .certi-txt-top > div {
    width: 800px;
    border-top: 1px solid #d49a6e;
    border-bottom: 1px solid #d49a6e;
    padding: 30px 0;
    box-sizing: border-box;
}

.pop-certi .pop-body .certi-txt-top> div > h1 {
    font-size: 44px;
    font-weight: bold;
    text-align: center;
}

.pop-certi .certi-txt > p {
    font-size: 20px;
    color: #7d7d7d;
    margin: 44px 0 76px;
    text-align: center;
    line-height: 1.5;
}

.pop-certi .certi-txt > ul {
    font-size: 18px;
    margin-bottom: 42px;
    text-align: center;
    line-height: 1.5;
}

.pop-certi .certi-txt > ul li span {
    color: #7d7d7d;
}

/* 이수증 페이지 */
.centi-wrap {
    width: 100%;
    height: 100vh;
    background-color: #ebebeb;
}

.certi {
    width: 1186px !important;
    height: 900px;
    margin: 0 auto;
    padding-top: 10px;
    box-sizing: border-box;
}

.certi .bg {
    width: 1106px !important;
    height: 745px;
    background-color: #fff;
    margin-top: 50px;
}

.certi .bg2 {
    width: 1080px !important;
    height: 720px;
    border: 4px solid #c89f74;
    background-color: #fff;
    background: url("/resources/images/commu/certi/bg.png") no-repeat;
    box-sizing: border-box;
}

.certi .bg3 {
    width: 1060px !important;
    height: 700px;
    border: 1px solid #c89f74;
    padding: 20px;
    box-sizing: border-box;
}

.pop-t-title {
    font-size: 14px;
    color: #a4724d;
    margin-bottom: 4px;
}

.certi .pop-body {
    padding: 0;
    height: 444px;
}

.certi .pop-body  h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 24px;
}

.certi .certi-txt-top >div {
    width: 800px;
    border-top: 1px solid #d49a6e;
    border-bottom: 1px solid #d49a6e;
    padding: 30px 0;
    box-sizing: border-box;
}

.certi .certi-txt-top >div> h1 {
    font-size: 44px;
    font-weight: bold;
    text-align: center;
}

.certi .certi-txt > p {
    font-size: 20px;
    color: #7d7d7d;
    margin: 44px 0 76px;
    text-align: center;
    line-height: 1.5;
}

.certi .certi-txt > ul {
    font-size: 18px;
    margin-bottom: 42px;
    text-align: center;
    line-height: 1.5;
}

.certi .certi-txt > ul li span {
    color: #7d7d7d;
}
.stamp-wrap {
    width: 340px !important;
    position: relative;
}
.stamp {
    width: 50px;
    position: absolute;
    right: 0;
}
.stamp-logo {
    position: absolute;
    z-index: 3;
}
/* faq  */
.faq-category li a {
  font-size: 18px;
}

.faq {
  width: 100%;
  border-top: 1px solid #e1e1e1;
  cursor: pointer;
}

.faq-top {
  padding: 20px 30px;
}

.faq-notice-list li:last-child {
  border-bottom: 1px solid #e1e1e1;
}

.f-category {
  font-size: 18px;
}

.faq-top>div>p {
  font-size: 20px;
  font-weight: 500;
  max-width: 1000px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.3;
}

.faq-answer {
  display: none;
  min-height: 160px;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  padding: 30px 130px;
  font-size: 19px;
  color: #222;
  background-color: #fafafa;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  line-height:1.5;
}

.rotate {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* 자료실 */
.data-notice-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.data-notice {
  display: flex;
  width: 600px;
  min-height: 280px;
  margin-bottom: 100px;
}

.data-notice>img {
  width: 200px;
  height: 280px;
}

.data-notice>div {
  margin-left: 50px;
}

.data-notice>div > p {
  max-width: 310px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 23px;
}

.data-notice>div ul {
  margin-bottom: 28px;
}

.data-notice>div ul li {
  font-size: 16px;
  color: #7d7d7d;
  margin-bottom: 10px;
}

.btn-w.btn-blue {
  border: 1px solid #3678c3;
  background-color: #fff;
  border-radius: 30px;
  padding: 10.5px 0;
  box-sizing: border-box;
}

.btn-w.btn-blue span {
  font-size: 18px;
  font-weight: 500;
  margin-right: 0;
  color: #3678c3;
}

.popup.pop-data-box {
  width: 1000px;
  padding: 0;
}

.popup.pop-data-box .pop-head {
  width: 1000px;
  position: relative;
}

.popup.pop-data-box .pop-head>p {
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin-top: 19px;
}

.popup.pop-data-box .pop-body {
  width: 1000px;
  position: relative;
}


.popup.pop-data-box .pop-tit {
  color: #fff;
  font-size: 32px;
}

.popup.pop-data-box .close-x {
  color: #fff;
  right: 0;
  top: 0;
}


.data-list.swiper {
  width: 800px;
  height: 630px;
  position: relative;
}

.data-list.swiper .swiper-slide {
  width: 800px;
  height: 630px;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.data-list.swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pop-data-box .swiper-button-prev {
  color: #fff;
}

.pop-data-box .swiper-button-next {
  color: #fff;
}

/* 심뇌타임즈 */
.times-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.times-wrap > div {
  width: 610px;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 20px 40px 20px;
}
.times-wrap > div:nth-child(odd) {
  margin-left:0;
}
.times-wrap > div:nth-child(even) {
  margin-right:0;
}
.times-wrap > div > img {
  box-shadow: 1px 2px 8px rgb(0 0 0 / 16%);
}
.times-text-wrap {
  width: 330px;
}
.times-text-wrap > p {
  margin: 10px 0;
  min-height: 20px;
  height: 20px;
}
.times-text-wrap > .times-list {
  width: 318px;
  margin: 15px 0;
}	
.times-text-wrap > .times-list > li {
  width: 318px;
  min-height: 180px;
  height: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.times-text-wrap > .times-list > li:nth-child(6) {
  margin-bottom: 0;
}
.post-content {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 26px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 회원가입 상세 */

/*input[type='checkbox'] {*/
/*  display: none;*/
/*}*/

.checkbox_label {
  display: flex;
  align-items: center;
}

.checkbox_icon::before {
  content: '';
  display: block;
  margin-right: 5px;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: 1px solid #9da3a5;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.checkbox_label input:checked+.checkbox_icon::before {
  background: url(/resources/images/arrow-b.png) #357db5 no-repeat center;
  border: none;
}

.pop-l-n-select .l-n-tbl::-webkit-scrollbar {
  width: 10px;
}

.pop-l-n-select .l-n-tbl::-webkit-scrollbar-thumb {
  height: 30%;
  background: #f8f8f8;
  border: 1px solid #cccccc;
  border-radius: 10px;
}

.pop-l-n-select .l-n-tbl::-webkit-scrollbar-track {
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 10px;
}

/* 회원가입 회원유형 */
.ms-wrap section {
  width: 400px;
  height: 300px;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  text-align: center;
  padding: 30px;
  box-sizing: border-box;
  cursor: pointer;
}

.ms-wrap section:hover {
  border: 1px solid #3678c3;
}

.ms-wrap section h2 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

.ms-wrap section:hover h2 {
  color: #3678c3;
}

.ms-wrap section p {
  font-size: 16px;
  margin-bottom: 40px;
  color: #7d7d7d;
  line-height: 1.3;
}

.ms-wrap section .ms-img {
  background: url(/resources/images/right-g.jpg) no-repeat;
  width: 50px;
  height: 50px;
}

.ms-wrap section:hover .ms-img {
  background: url(/resources/images/right-blue.jpg) no-repeat;
  width: 50px;
  height: 50px;
}

/****  main popup layer s  ****/
.main_popup_layer {
  display: none;
  min-width: 100px;
  min-height: 100px;
  height: auto;
  position: absolute;
  border: 1px solid #d7d7d7;
  background: #fff;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box
}

.main_popup_layer .in {
  overflow: hidden;
  position: relative;
  height: calc(100% - 51px);
  margin: 0px auto;
  background-size: cover;
}

.main_popup_layer .pop_tle {
  display: block;
  padding: 30px 30px 25px;
  font-size: 25px;
  word-break: keep-all;
}

.main_popup_layer .pop_con {
  padding: 0px 35px 35px;
  line-height: 20px;
  font-size: 14px;
  color: #707070;
  box-sizing: border-box;
}

.main_popup_layer .pop_con.scroll {
  overflow-y: auto;
}

.main_popup_layer .pop_btn {
  height: 60px;
  width: fit-content;
  margin: 0 auto
}

.main_popup_layer .pop_btn a {
  display: inline-block;
  min-width: 100px;
  height: 35px;
  line-height: 31px;
  padding: 0px 15px;
  background-color: #01358b;
  color: #fff;
}

.main_popup_layer .pop_check {
  height: 50px;
  padding: 0px 10px;
  border-top: 1px solid #d7d7d7;
  background-color: #ffffff;
  color: #666666;
  overflow: hidden;
}

.main_popup_layer .pop_check .btclose {
  display: inline-block;
  float: right;
  margin-top: 9px;
  width: 70px;
  height: 30px;
}

.main_popup_layer .pop_check .lb_box {
  margin-top: 17px;
}

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

.hidimglist {
  position: absolute;
  z-index: -10;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

.main_popup_layer {
  left: 5%;
  top: 5%;
  background-position: center 0;
  z-index: 9990;
}

.dimlayer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 30
}

/* 의뢰 수락 비율 */

.periodSelector {
    position: relative;
}

.periodSelector table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fdfdfd;
    width: 150px;
}

.periodSelector td {
    padding: 10px 16px;
    font-size: 15px;
    white-space: nowrap;
    border: none;
    background-color: #fff;
    font-weight: 500;
    color: #333;
}

#periodSelector {
    width: 150px;
    position: absolute;
    top: 50px;
    left: 50%;
    visibility: hidden;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    padding: 12px;
    transform: translateX(-50%);
    box-sizing: border-box;
}

#periodSelector ul {
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}

#periodSelector li {
    width: 100%;
    padding: 6px 0;
    font-size: 15px;
    color: #222;
    box-sizing: border-box;
}

#periodSelector input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
    cursor: pointer;
}

#periodSelector input[type="button"] {
    background-color: #2c65a5;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    box-sizing: border-box;
    margin: 5px 0;
}

#periodSelector input[type="button"]:hover {
    background-color: #1f4a7b;
}


/* 매칭소요시간 */
.select-flatform > select {
    width: 150px;
    height: 35px;
    /* padding: 5px 16px; */
    font-size: 15px;
    white-space: nowrap;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    font-weight: 500;
    color: #333;
    box-sizing: border-box;
}
.select-flatform>select >option {
    font-size: 15px;
}

/* 지역별 의뢰 현황 */
.region2 {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: #444;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.gangwon-p-wrap { top: 145px; left: 420px; }
.gyeonggi-p-wrap { top: 187px; left: 306px; }
.incheon-p-wrap { top: 172px; left: 221px; }
.chungnam-p-wrap { top: 304px; left: 235px; }
.daejeon-p-wrap { top: 336px; left: 301px; }
.chungbuk-p-wrap { top: 266px; left: 335px; }
.gyeongbuk-p-wrap { top: 325px; left: 457px; }
.daegu-p-wrap { top: 406px; left: 437px; }
.ulsan-p-wrap { top: 444px; left: 520px; }
.busan-p-wrap { top: 490px; left: 500px; }
.gyeongnam-p-wrap { top: 470px; left: 410px; }
.gwangju-p-wrap { bottom: 279px; left: 237px; }
.jeonnam-p-wrap { bottom: 220px; left: 240px; }
.jeonbuk-p-wrap { bottom: 350px; left: 280px; }
.jeju-p-wrap { bottom: 110px; left: 200px; }
.seoul-p-wrap { top: 165px; left: 257px; }
.sejong-p-wrap { top: 302px; left: 286px; }

.dg-map-half .gangwon-p-wrap { top: 130px; left: 350px; }
.dg-map-half .gyeonggi-p-wrap { top: 169px; left: 246px; }
.dg-map-half .incheon-p-wrap { top: 150px; left: 190px; }
.dg-map-half .chungnam-p-wrap { top: 273px; left: 206px; }
.dg-map-half .daejeon-p-wrap {top: 293px;left: 258px;}
.dg-map-half .chungbuk-p-wrap {top: 237px;left: 290px;}
.dg-map-half .gyeongbuk-p-wrap {top: 285px;left: 396px;}
.dg-map-half .daegu-p-wrap {top: 356px;left: 378px;}
.dg-map-half .ulsan-p-wrap {top: 389px;left: 443px;}
.dg-map-half .busan-p-wrap {top: 433px;left: 430px;}
.dg-map-half .gyeongnam-p-wrap {top: 413px;left: 346px;}
.dg-map-half .gwangju-p-wrap {bottom: 192px;left: 204px;}
.dg-map-half .jeonnam-p-wrap {bottom: 165px;left: 223px;}
.dg-map-half .jeonbuk-p-wrap {bottom: 261px;left: 236px;}
.dg-map-half .jeju-p-wrap {bottom: 40px;left: 167px;}
.dg-map-half .seoul-p-wrap { top: 142px; left: 220px; }
.dg-map-half .sejong-p-wrap {top: 263px;left: 246px;}

.tbl-wrap.list.platform-table th {
 background-color: #f2f2f2;
 font-weight:normal;
 color: #000;
 border-color: #e5e5e5;
 font-size:16px;
}
.tbl-wrap.list.platform-table td {
 border-top:1px solid #e5e5e5;
 border-bottom:1px solid #e5e5e5;
 font-size:16px;
}

/****  main popup layer e  ****/

/* 중증응급 심뇌혈관질환 진료협력 네트워크 플랫폼 - 랜딩페이지 */
.land-wrap .tit {
    background-color: #41328d;
    color: #fff;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
}
.land-cont {
    background-color: #ede8f3;
    border-radius: 20px;
    padding: 30px 0;
    box-sizing: border-box;
    font-size: 23px;
}
.land-cont > ul li {
    font-size: 23px;
    width: 620px;
    margin: 0 auto;
}
.land-cont2 {
    margin-left: 50px;
}
.land-cont2 h4 {
    font-size: 18px;
    margin-bottom: 20px;
}
.l-c-list {
    width: 478px;
    overflow: hidden;
    font-size: 20px;
    padding: 0 10px;
    box-sizing: border-box;
}
.l-c-list li {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #41328d;
    border-radius: 10px;
    margin: 0 0 10px;
    font-weight: bold;
    color:#41328d;

}
.l-c-list li:last-child {
    margin: 0;
}
.land-cont3 {width: 85%; margin: 0 auto;}
.land-cont3 > div > img {
    width: 40%;
}
.land-cont3 .lc3-text {
    width: 55%;
    color: #4c4c4c;
}
.qr-code {
    color: #000;
    background-color: #ede8f3;
    border: 1px solid #ede8f3;
    color: #41328d;
}
.land-img-wrap {
    width: 290px;
    background-color: #dfd7ea;
    border-radius: 20px;
}
.land-img-wrap img {
    width: 90%;
}
.qr-wrap {
    padding: 3px;
}

.main-btn{
    transition: all 0.3s ease;
}

.main-btn:hover {
    background-color: #2f2470;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.flex-l-t {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.w43 {
    width: 43%;
}
.w420p {
    width: 420px;
}

/*우리지역 치료 잘 하는 병원*/
.map-wrap.mw2 {
  background-color: #f8f8f8;
  border: 1px solid #e1e1e1;
  border-radius: 15px 15px 0 0;
  padding: 30px 20px;
  justify-content: space-evenly;
  box-sizing: border-box;
}
.mt-box2 {
	border: 1px solid #e1e1e1;
    border-radius: 0 0 15px 15px;
    border-top: none;
}
.tag2 li{
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 30px;
    height: 40px;
    line-height: 40px;
    color: #000;
    font-size: 16px;
    box-sizing: border-box;
    margin-right: 10px;
    padding: 0 15px;
}
.tag2 li.on {
    background-color: #357db5;
    color: #fff;
    font-weight: bold;
    border: 1px solid #357db5;
    border-radius: 30PX;
    box-sizing: border-box;
}

/* 말풍선 화살표 – 왼쪽 중앙 */
.overlaybox{ position:relative;  box-shadow: 0 8px 20px rgba(0,0,0,.22);}
.overlaybox::before{
  content:"";
  position:absolute;
  top:50%;
  left:-10px;
  transform:translateY(-50%);
  width:0;height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:10px solid #fff;
}

.overlaybox::after{
  content:"";
  position:absolute;
  top:50%;
  left:-11px;
  transform:translateY(-50%);
  width:0;height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-right:11px solid rgba(0,0,0,.15);
  z-index:-1;
}

.ol2 .overlaybox {box-shadow:none;}
.ol2 .overlaybox::before{
  border-top:0;
  border-bottom:0;
  border-right:0;
}

.ol2 .overlaybox::after{
  left:0px;
  width:0;height:0;
  border-top:0;
  border-bottom:0;
  border-right:0;
}

.block { display:block; }

.tag-wrap li {
    min-width: 110px;
    height: 30px;
    box-sizing: border-box;
    line-height: 28px;
    border: 1px solid #e1e1e1;
    margin-right: 10px;
    border-radius: 20px;
    text-align: center;
    font-size: 16px;
    margin: 7px 10px 7px 0;
}

.tag-wrap li.active {
  background-color: #2c65a5;
  color: #fff;
}
/*설문조사*/
.survery-list > label{margin-bottom:20px;}
.survery-list:last-child > label {margin-bottom:15px;}
.survery-list > label >span{line-height:1.5;}
.survey-textarea{   width: 300px; /* 줄바꿈이 일어날 너비를 지정합니다 */
    border: 1px solid #ccc;
    padding: 10px;
    /* 핵심 속성 */
    white-space: pre-wrap;
    word-break: break-all;
}

/* 사업소개 */
.desc {
  font-size: 16px;
  color: #7d7d7d;
}

.oc2 {
  width: 1260px;
  background-image: url("/resources/images/biz/c2-bg.png");
  background-repeat: no-repeat;
  height: 650px;
  background-position: center;
  position: relative;
  /* margin: 140px 0; */
  top: -30px;
}

.oc2 > div:not(.oc2-r):not(:nth-child(3)):not(:nth-child(4)) {
  position: absolute;
  top: 100px;
  left: 34px;
}

.oc2 > div:nth-child(3) {
  position: absolute;
  bottom: 12px;
  left: 34px;
}

.oc2 .oc2-r {
  position: absolute;
  top: 106px;
  right: 17px;
}

.oc2 > div:nth-child(4) {
  position: absolute;
  bottom: 84px;
  right: 17px;
}

.oc2-stit {
  width: 350px;
  margin-bottom: 10px;
}
.oc3 > div {
  border-radius: 10px;
}
.oc3 > div > h4:not(:nth-child(2)) {
  width: 360px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

/* 심뇌혈관질환센터 운영 지원 */
.quick {
  border-color: #c2c2c2 !important;
}
.quick > i {
  color: #797979 !important;
}
.quick:hover {
  border-color: #3678c3 !important;
}
.quick:hover > a {
  color: #3678c3 !important;
}
.quick:hover > i {
  color: #3678c3 !important;
}

/* 심뇌혈관질환 등록사업 및 연구 */
.re-overbox {
  width: 313px;
  height: 220px;
  background: url(/resources/images/biz/re-overbox.png) no-repeat;
}
.re-overbox-on {
  width: 313px;
  height: 220px;
  background: url(/resources/images/biz/re-overbox-on.png) no-repeat;
}
.re-overbox-on > div > ul > li {
	color:#357db5;
}
.re-overbox:hover {
  background-image: url(/resources/images/biz/re-overbox-on.png);
}
.re-overbox2 {
  width: 288px;
  height: 220px;
  border: 1px solid #e1e1e1;
  background-color: #f8f8f8;
  border-radius: 20px;
  background-image: none;
  box-sizing: border-box;
}

.re-overbox2:hover {
  border: 1px solid #357db5;
  background-color: #fff;
  background-image: none;
}
.re-overbox > div,
.re-overbox-on > div,
.re-overbox2 > div {
  width: 288px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 45px;
  box-sizing: border-box;
}
.re-overbox:hover > div > h4 {
  color: #043984;
}

.re-overbox:hover > div > span {
  color: #043984;
}

.re-overbox:hover > div > ul > li {
  color: #357db5;
}

.re-overbox2:hover > div > h4 {
  color: #043984;
}

.re-overbox2:hover > div > span {
  color: #043984;
}

.re-overbox2:hover > div > ul > li {
  color: #357db5;
}

.re-logo-wrap > div {
	width:240px;
}

/* 진료협력 네트워크 플랫폼 운영 */
.net-pilot > div > h4 {
  width: 710px;
  height: 80px;
  border-radius: 10px;
}
.net-p-box {
  width: 570px;
  height: 270px;
  border-radius: 10px;
  overflow:hidden;
}
.net-p-box > div {
	height:208px;
}
.tbl-wrap.net-tbl td,
.tbl-wrap.net-tbl th {
  color: #000;
  font-weight: 500;
  font-size: 18px;
  border-right: 1px solid #e5e5e5;
  padding: 30px;
  box-sizing: border-box;
}

.tbl-wrap.net-tbl td:last-child,
.tbl-wrap.net-tbl th:last-child {
  border-right: none;
}

.net-down-btn-wrap {
	position:relative;
}

.net-down-btn {
	position:absolute;
    top: 15px;
    right: 15px;
}
.net-down-btn:hover > i {
	color:#36A3F7 !important;
}
/* 탭 */
.net-tabs .tab-pane2 {
  display: none;
}
.net-tabs .tab-pane2.active {
  display: block;
}

/* 탭 메뉴 */
.net-tabs .tab-menu2 {
  display: flex;
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}
.net-tabs .tab-menu2 li {
  width: 400px;
  height: 59px;
  border-bottom: 1px solid #e1e1e1;
  font-size: 18px;
  font-weight: 500;
  color: #7d7d7d;
  text-align: center;
  line-height: 59px;
  cursor: pointer;
}
.net-tabs .tab-menu2 li.active {
  border-bottom: 3px solid #3466b3;
  color: #3466b3;
}

/* 진료협력 네트워크 플랫폼 운영 */
.s-nav.h-snav {
  width: 210px;
  height: 520px;
}

.h-cont1 {
  width: 100%;
  background: url(/resources/images/disease/bg.png) no-repeat 50% 50%;
  background-position: 435px 40px;
  padding: 60px 70px;
  box-sizing: border-box;
}

.h-cont2 > div {
  margin-right: 10px;
  margin-bottom: 10px;
}
.h-cont2 > div:hover > .quick {
  border-color: #357db5 !important;
   color: #357db5 !important;
}
.h-cont2 > div:hover > .quick > a {
  color: #357db5 !important;
}
.h-cont2 > div:hover > .quick > i {
  color: #357db5 !important;
}

.quick> a {padding:12px 6px;}
.quick:hover > div {
  border-color: #357db5 !important;
   color: #357db5 !important;
}
.quick:hover > span {
  border-color: #357db5 !important;
   color: #357db5 !important;
}
quick:hover > i {
  color: #357db5 !important;
}

.h-cont2 > div:nth-child(5) {
  margin-right: 0px;
}

.h-cont2 > div:nth-child(10) {
  margin-right: 0px;
}
.
.howto-tbl > .edu-tbl > thead > tr > th {
  font-size: 18px;
}
.howto-tbl tbody > tr > td {
  height: 50px;
  font-size: 18px;
  color: #7d7d7d;
}

.howto-tbl tbody > tr > td > div > a {
  font-size: 18px;
  cursor: pointer;
}

.howto-tbl tbody > tr > td > div:hover > a {
  color: #3678c3 !important;
  cursor: pointer;
}

.howto-cont1 {
  width: 320px;
  height: 360px;
  overflow: hidden;
}

.howto-cont1 > .howto-title {
  height: 60px;
  background-color: #e0ebf4;
  text-align: center;
  line-height: 60px;
}
.howto-cont1 > div > h4 {
  color: #043984;
  font-size: 22px;
}

.t-cont2 > ul > li {
  width: 320px;
  height: 60px;
  border-radius: 20px;
  border: 1px solid #e1e1e1;
  text-align: center;
  margin: 6px 12px 6px 0;
  font-weight: 500;
  display: flex;
  align-items: center;
  line-height:1.3;
}
.t-cont2 > ul > li:nth-child(3) {
  margin-right: 0;
}
.t-cont2 > ul > li:nth-child(6) {
  margin-right: 0;
}
.t-cont2 > ul > li:nth-child(9) {
  margin-right: 0;
}
.t-cont2 > ul > li:nth-child(12) {
  margin-right: 0;
}
.t-cont2 > ul > li:nth-child(15) {
  margin-right: 0;
}
.t-cont2 > ul > li.active {
  border-color: #3678c3;
}
.t-cont2 > ul > li.active > a {
  color: #3678c3;
}
.t-cont2 > ul > li > a {
  font-size: 18px;
}
#cardnews {
    width: 100%;
    max-width: 600px;   /* 필요에 따라 조정 */
    height: 400px;      /* 카드뉴스 한 장 높이 */
    overflow: hidden;
    position: relative;
    margin: 0 auto;     /* 가운데 정렬 */
}

/* 슬라이드 이미지 */
#cardnews .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#cardnews-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

#cardnews {
    width: 100%;
    height: 400px;
    z-index:2;
}

.swiper-buttons {
    display: flex;
    justify-content: space-between;
    position: absolute;
    height: 600px;
    width: 770px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index:1;
}

.swiper-button-prev,
.swiper-button-next {
    width: 40px;
    height: 40px;
}
.swiper-pagination {
	font-size:20px;
}
.cardnews-btn {
	z-index:11;
}
#cardnews-container .swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
    bottom: auto !important;
    top: -51px !important;
}
#popup-cardnews {
    width: 800px;
    overflow: hidden;
    max-width:800px;
}

#popup-cardnews .swiper-slide img {
    width: 100%; 
    height: auto; 
    display: block;
}

#popup-cardnews  .swiper-wrapper {
	z-index:2;
}
.pop-overlay > .swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
top: 12px !important;
    width: 100% !important;
    right: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 50px !important;
    box-sizing: border-box !important;
}
.po-close {
    position: absolute;
    right: 25px;
    z-index:11
}
/* 심뇌혈관질환센터 찾기 */
.tag2 li {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 30px;
  height: 40px;
  line-height: 40px;
  color: #000;
  font-size: 16px;
  box-sizing: border-box;
  margin-right: 10px;
  padding: 0 15px;
}
.tag2 li > a {
  color: #000;
}
.tag2 li.on {
  background-color: #357db5;
  color: #fff;
  font-weight: bold;
  border: 1px solid #357db5;
  border-radius: 30px;
  box-sizing: border-box;
}
.tag2 li:nth-child(2).on {
  background-color: #f4516c !important;
  color: #fff;
  font-weight: bold;
  border: 1px solid #f4516c !important;
  border-radius: 30px;
  box-sizing: border-box;
}
.pin-tit {
  height: 60px;
}
.pin-tit > h4 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}
.pin-tit > p {
  font-size: 16px;
  color: #3678c3;
  font-weight: bold;
  line-height: 1.3;
}

.pin-img {
  width: 375px;
  height: 200px;
}

.pin-text {
  height: 180px;
}
.pin-text li {
  display: flex;
}
.pin-text li > p {
  width: 90px;
  color: #333;
  font-weight: bold;
}
.pin-text li > span {
  color: #7d7d7d;
}
.pin-text li > a {
  color: #7d7d7d;
  font-size: 17px;
}
.pin-text li:hover > a {
  color: #000;
  font-size: 17px;
  text-decoration: underline;
  
}
#region > div:not(.thumb), 
#zone > div {
    display: none !important;
}

#region > div.active, 
#zone > div.active,
#region > div.thumb {
    display: block !important;
}
.thumb > .net-bot > div {height:440px;}
#region > div {
  width: 460px;
  height: 520px;
  border: 1px solid #b6b7be;
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
  position: absolute;
}
#zone > div {
  width: 460px;
  height: 520px;
  border: 1px solid #b6b7be;
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
  position: absolute;
}
.net-pin img[data-target] {
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 20px;
  height: 30px;
  transform-origin: bottom center;
  transform: scale(1) translateY(0);
  will-change: transform;
  cursor: pointer;
}

.net-pin img.active-pin {
  transform: scale(1.3);
  animation: bounce 0.8s infinite ease-out;
}

@keyframes bounce {
  0% {
    transform: scale(1.3) translateY(0);
  }
  40% {
    transform: scale(1.3) translateY(-10px);
  }
  60% {
    transform: scale(1.3) translateY(-5px);
  }
  100% {
    transform: scale(1.3) translateY(0);
  }
}

.intro-tbl {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.intro-tbl table thead th {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 10; 
	border: none;
}

.intro-tbl thead th .th-border {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 10px;
	box-sizing: border-box;
	background: #fff;
	box-shadow: 0 1px 0 0 #7f7f7f; 
}
.intro-tbl thead th .th-border.th-border2 {
	box-shadow: 0 1px 0 0 #7f7f7f; 
}
thead.thead2 {
	border-top:1px solid #7f7f7f !important;
}
.edu-tbl.plat-tbl tbody > tr:last-child {
    border-bottom: 1px solid #e1e1e1 !important;
}
.intro-tbl tbody td {
	height: 50px;
	font-size: 16px;
	color: #7d7d7d;
}

.intro-tbl tbody td div a,
.intro-tbl tbody td .button a {
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.intro-tbl tbody td div:hover {
	border-color: #3678c3 !important;
}
.intro-tbl tbody td div a:hover,
.intro-tbl tbody td .button a:hover {
	color: #3678c3 !important;
}

.intro-tbl tbody > tr > td {
	height: 50px;
}

/* 진료권 통계지도 */
.area-label {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    font-family: 'Pretendard', sans-serif;
    height: 32px;
    cursor:pointer;
    z-index: 1; 
}

.area-label:hover {
    z-index: 9999 !important;  /* 최상단으로 */
}
/* 권역 이름 */
.area-label .name {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.1;
    background: rgb(255 255 255 / 66%);
    padding: 6px 12px 6px;
    border-radius: 4px;
    display: block;
}

/* 숫자 기본 숨김 */
.area-label .count {
    font-size: 22px;
    font-weight: 700;
    color: #d70000;
    opacity: 0;
    border-radius: 0 0 4px 4px;
    height: 16px;
    display: block;
    line-height: 16px;
    overflow: hidden;
    background: rgb(255 255 255 / 66%);
  padding: 5px 12px 13px;
    
}

/* hover 시 숫자 등장 */
.area-label:hover .name {
	    border-radius: 4px 4px 0 0;
}

.area-label:hover .count {
    opacity: 1;
    
}