#wrap{
   width:100%;
   height:100%;
   margin:auto;
   background: #fff;
}

#container{
   position: relative;
   width: 100%;
   height:100%;
}

.content{
   /*height:100%;*/
}

section{
   width:100%;
   display:inline-block;
   margin-bottom:30px
}

section:last-child{
  margin-bottom:0
}

.summary section{
  margin-bottom:70px
}





/*** header ***/

nav{
   width:100%;
}

#header{
   width:100%;
   background:#fff;
   position:relative;
   top: 0;
   left: 0;
   right: 0;
   z-index:2000;
}

#gnb{
   position:relative;
   padding:35px 0;
   max-width:1590px;
   margin:auto;
}

#gnb .logo{
   display: inline-block;
   vertical-align:middle;
   text-align:left;
   margin-right:64px
}

#gnb .logo a{
   display:block;
}

#gnb .menu{
   display: inline-block;
   vertical-align:middle;
}

#gnb .menu li{
   float:left;
   margin-right:55px;
   position:relative;
}

#gnb .menu li:last-child-child{
   margin-right:0
}

#gnb .menu li a{
   display:block;
   height:100%;
   font-size:20px;
   position:relative;
}

#gnb .menu li.on a,
#gnb .menu li a:hover{
   font-weight:bold;
   color:#1ea2e7;
}

#gnb .menu li.on a:after{
   width: 100%;
}

#gnb .menu li .smenu{
  position:absolute;
  z-index:100;
  background:#fff;
  border:1px solid #e3e7ed;
  box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 5%);
  border-radius:8px;
  width:160px;
  display:none;
  left:50%;
  transform: translateX(-50%);
  top:34px
}

#gnb .menu li .smenu ul{
   float:none;
}

#gnb .menu li .smenu.none{
    display:none
}

#gnb .menu li .smenu li{
  margin:0;
  width:100%
}

#gnb .menu li .smenu li a{
  display:block;
  line-height:24px;
  padding:10px 5px;
  border-bottom:1px solid #e4eaf1;
  text-align:center;
  font-size:15px;
  font-weight:normal;
}

#gnb .menu li .smenu li:last-child a{
  border-bottom:0
}

#gnb .menu li .smenu li a:hover{
  background:#00334d;
  color:#fff
}

#gnb .menu li .smenu li a:hover::after{
  content:none
}

#gnb #nav .nav-menu{
   display: block;
   position: fixed;
   top:0;
   right:-100%;
   width:20%;
   height: 100%;
   padding:20px 20px 20px 0;
   background: #fff;
   z-index: 900;
}

#gnb #nav .nav-menu > ul{
   overflow-y:auto;
   padding-top:40px
}

#gnb #nav .nav-menu > ul > li{
   margin-bottom:5px;
   position:relative;
}

#gnb #nav .nav-menu > ul > li > a{
   display:block;
   height:auto;
   line-height:normal;
   padding:0 0 0 20px;
   border-radius:0 60px 60px 0;
   height:60px;
   line-height:60px;
   background:#f1f6fc;
   font-size:18px
}

#gnb #nav .nav-menu > ul > li.link > a{
  background:#f1f6fc url(../images/link_icon.png) no-repeat 90% center;
}

#gnb #nav .nav-menu > ul > li.on > a{
   font-weight:600;
   color:#1ea2e7
}

#gnb #nav .nav-menu > ul > li.on > a::after{
   content:"";
   width:5px;
   height:5px;
   border-radius:5px;
   background:#1ea2e7;
   position: absolute;
   right:25px;
   top:25px
}

#gnb #nav .nav-menu > ul > li.sms{
   margin:15px 0 0 0
}

#gnb #nav .nav-menu > ul > li.sms > a{
   width:90px;
   margin-bottom:5px;
   background:#1ea2e7;
   border-radius:0 38px 38px 0;
   height:38px;
   line-height:38px;
   color:#fff;
   font-size:15px
}

#gnb #nav .nav-menu .msub > ul{
  padding:15px 20px
}

#gnb #nav .nav-menu .msub > ul > li a{
  line-height:40px;
  font-size:16px
}

#gnb #nav .nav-menu .msub > ul > li a:hover{
  color:#1ea2e7
}

#gnb .right{
   margin-right:40px;
}

#gnb .rbtn-wrap{
   position:absolute;
   right:0;
   top:45px;
   width:80px;
   text-align: right
}

#gnb .rbtn-wrap a{
  display:inline-block;
  vertical-align: middle;
  width:26px;
  height:27px;
  margin-left:10px
}

#gnb .rbtn-wrap a.nav-btn{
  background-image: url(../images/menu_icon_b.png)
}

#gnb .rbtn-wrap a.set-btn{
  background-image: url(../images/set_icon.png);
  background-repeat: no-repeat;
  width: 28px;
  height: 29px;
}

#gnb .close-btn{
   display:inline-block;
   position:absolute;
   left:-35px;
   top:20px;
}

#gnb .close-btn img{
   height:20px;
}

.nav-background{
   display: none;
   position: fixed;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #000;
   opacity: 0.7;
   z-index: 100
}




.main-content{
   max-width:1590px;
   margin:auto;
}

.gis-wrap{
   height:1018.5px;
   /* background:#c8ddf0 url(../images/map_bg.png) no-repeat top left; */
   width:45%;
   float:left;
   margin-right:3%;
   position:relative;
}

.gis-wrap .title{
   background:rgba(255,255,255,.5);
   line-height:48px;
   position:absolute;
   width:100%;
   overflow:hidden;
}

.gis-wrap h2{
  font-size:18px;
  font-weight:500;
  padding-left:45px;
  background-image: url(../images/sokbo_icon.png);
  background-repeat: no-repeat;
  background-position: 7px center;
}

.gis-wrap MARQUEE{
  width:50%;
  position:absolute;
  right:15px;
  top:0;
  margin:0;
  text-shadow: -3px 0 #fff, 0 3px #fff, 3px 0 #fff, 0 -3px #fff;
  font-size:20px
}

.gis-wrap .box{
   background:rgba(255,255,255,.5);
   padding:15px;
   width:70%;
   position:absolute;
   bottom:8px;
   left:8px
}

.gis-wrap .box span{
   text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
   line-height:18px;
   font-size:13px
}

.gis-wrap .pop{
   position:absolute;
}

.gis-wrap .pop .head{
   padding:10px;
   position:relative;
   border-bottom:1px solid #e3e7ed;
   background:#fff
}

.gis-wrap .pop .head h3{
   font-size:15px
}

.gis-wrap .pop .head .time{
   position:absolute;
   right:10px;
   top:11px;
   font-size:13px;
   color:#5d5d5d
}

.gis-wrap .pop .cont{
   padding:20px;
   text-align:center;
   font-size:14px
}

.gis-wrap .pop .cont strong{
   color:#1ea2e7;
   font-size:18px
}

.gis-wrap .popbub{
  background:#fff;
  width:210px;
  border-radius:5px;
}

.gis-wrap .popbub:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
    margin-left: -7px;
    margin-bottom: -7px;
}



/*** info-cont ***/
.info-cont{
   float:right;
   width:52%;
}

.info-cont section h2{
   font-size:22px;
   margin-bottom:20px
}

.info-cont .tem-box{
   float:left;
   height:300px;
   width:32%;
   margin-right:3%
}

.info-cont .tem-table{
   float:left;
   width:30%;
   height:300px
}



/*** tooltip ***/
.tooltip{
  width:16px;
  height:16px;
  background-image: url(../images/info_icon.png);
  display:inline-block;
  vertical-align:middle;
  margin-top:-1px;
}

.tooltip .tooltip-view {
   position:absolute;
   z-index: 200;
   padding:10px;
   text-align:left;
   display:inline-block;
   line-height:18px;
   width:200px;
   max-height:350px;
   overflow-y: auto;
   border-radius:3px;
   color:#5d5d5d;
   background: rgba(255,255,255,1);
   font-size:13px;
   word-break: keep-all;
   box-shadow:0 3px 8px rgba(165, 165, 165, 0.5);
   display: none;
}

.tooltip:hover .tooltip-view  {
   display:block;
   right:0;
   top:20px
}



/*** tem-box ***/
.tem-box{
   border:1px solid #e3e7ed
}

.tem-box .head{
   background: #f1f6fc;
   font-size:14px;
   font-weight:bold;
   padding:9px 10px 9px 10px;
   position:relative;
   overflow:hidden;
}

.tem-box .head .bookmark{
   position:absolute;
   right:10px;
   top:15px;
}

.tem-box .head .tit > div{
   font-weight:500
}

.tem-box .head .arrow-btn a{
  display:inline-block;
  width:6px;
  height:12px;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}

.tem-box .head .arrow-btn a.prev{
  background-image:url(../images/prev_icon_sml.png);
  left:10px
}

.tem-box .head .arrow-btn a.next{
  background-image:url(../images/next_icon_sml.png);
  left:180px
}



/* swiper 초기화*/
.tem-box .head .swiper1{
   width:110px;
   position:relative;
   float:left;
   overflow:hidden;
   text-align:center
}

/* .tem-box .head .swiper-button-prev,
.tem-box .head .swiper-container-rtl .swiper-button-next {
   background: url(../images/swiper_prev.png) no-repeat center center;
   width:6px;
   height:12px;
   top:22px;
   left: 0;
}
.tem-box .head .swiper-button-next,
.tem-box .head .swiper-container-rtl .swiper-button-prev {
   background: url(../images/swiper_next.png) no-repeat center center;
   width:6px;
   height:12px;
   top:22px;
   right: 0;
}

.swiper-button-prev:after, .swiper-button-next:after{
   content:none !important;
} */

.tem-box .cont{
   position:relative;
   height:calc(100% - 51px)
}

.tem-box .cont .realtime{
   font-size:15px;
   color:#888888;
   position:absolute;
   z-index:1;
   right:15px;
   top:10px
}

.tem-box .value{
  padding-top:17px
}

.tem-box .value li{
   float:left;
   width:50%;
   height:50%;
   padding:8px 5px 15px 5px;
   text-align:center;
   position:relative;
}

.tem-box .value li:nth-child(2)::after{
  content: "";
  width: 1px;
  height: 40px;
  background: #e1e1e1;
  position: absolute;
  right: 0;
  top: 7px;
}

.tem-box .value li:first-child{
   width:100%;
   height:120px;
   padding:45px 20px 0 55px;
   background:#fff url(../images/tem_icon.png) no-repeat 40px 38px;
}

.tem-box .value.low li:first-child{
   background:#fff url(../images/tem_icon_low.png) no-repeat 40px 38px;
}

.tem-box .value.high li:first-child{
   background:#fff url(../images/tem_icon_high.png) no-repeat 40px 38px;
}

.tem-box .value li span{
   display:block;
   text-align:center;
   font-size:15px
}

.tem-box .value li span i{
   font-size:12px;
   color:#888
}

.tem-box .value li strong i{
   font-size:15px;
   color:#888
}

.tem-box .value li span em{
   font-weight:bold;
}

.tem-box .value li span img{
   display:inline-block;
   vertical-align:middle;
}

.tem-box .value li strong{
   display:block;
   font-size:17px;
   color:#1ea2e7;
   margin-top:5px
}

.tem-box .value li strong em{
   font-size:13px
}

.tem-box .value li:first-child strong{
   font-size:50px;
   margin-top:5px;
   color:#000
}

.tem-box .location{
  display: inline-block;
  width: 100%;
  /* height: 65px; */
  background: #f1f6fc;
  padding: 25px 0;
  text-align: center;
  position:absolute;
  bottom:0;
  left:0
}

.tem-box .loca{
  font-weight:500;
  margin-bottom:8px
}

.tem-box .latlong{
  display: inline-block;
}

.tem-box .latlong li{
  display:block;
  width:100%;
  font-weight:700;
  position:relative;
  font-size:17px;
  margin-bottom:5px;
  text-align:left;
}

.tem-box .latlong li:last-child{
  margin-bottom:0
}

/*
.tem-box .latlong li::after{
  content:"";
  width:1px;
  height:12px;
  background:#ccc;
  position:absolute;
  right:-1px;
  top:2px
}
*/
.tem-box .latlong li:last-child::after{
  content:none
}

.tem-box .latlong li span{
  display:inline-block;
  margin-right:5px;
  font-weight:500;
  font-size:15px
}





/*** tem-table ***/

.tem-table table{
   table-layout: fixed;
   border-collapse: collapse;
   border:1px solid #e3e7ed;
   height:100%
}

.tem-table table thead{
   display:block;
}

.tem-table table tbody{
   display:block;
   overflow:auto;
   position:relative;
   height:250px
}

@-moz-document url-prefix(){
  .tem-table table tbody{
     display:block;
     overflow:auto;
     height:250px
  }
}

.tem-table table tr{
   width:100%;
   display: inline-table;
}

.tem-table table th, .tem-table table td {
   width:60%;
   text-align:center;
}

.tem-table table th{
   background: #f1f6fc;
   font-size:15px;
   font-weight:bold;
   padding:16px 5px;
}

.tem-table table td{
   padding:12px 5px;
   height:41px;
   background:#fff;
   border-bottom:1px solid #e3e7ed
}

.tem-table table tr.on td:last-of-type{
  color:#f2183c;
  font-weight:600
}

.tem-table table tr.off td:last-of-type{
  color:blue;
  font-weight:600
}

.tem-table table td .siren{
  display:inline-block;
  vertical-align:middle;
  width:13px
}

.bookmark{
   display:inline-block;
   vertical-align:middle;
   width:16px;
   height:17px;
   background:url(../images/bookmark.png) no-repeat center center;
   margin-left:5px;
   cursor: pointer;
}

.bookmark.on{
   background:url(../images/bookmark_on.png) no-repeat center center
}




/*** graph-box ***/

.graph-box{
   padding:20px 20px;
   background:#f1f6fc;
   position:relative;
   display:inline-table;
   width:100%;
}

.graph-box .graph{
   display:inline-table;
   width:100%;
   margin-top:10px
}

.graph-box .head{
   margin-bottom:25px
}

.graph-box .head2 {
	margin-top:10px
}

.graph-box .head .sel{
   float:left;
   position:relative
}

.graph-box .head .sel .selbox{
  display:inline-block;
  position:relative;
  /* padding-left:17px; */
  width:180px;
}

.graph-box .head .sel select{
   font-size:15px;
   width:90%
}

.graph-box .head .arrow-btn{
  display:inline-block;
}

.graph-box .head .arrow-btn a{
  display:inline-block;
  width:8px;
  height:15px;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}

.graph-box .head .arrow-btn a.prev{
  background-image:url(../images/prev_icon.png);
  left:0
}

.graph-box .head .arrow-btn a.next{
  background-image:url(../images/next_icon.png);
  right:0
  /* left:146px */
}

.graph-box .head .sel > .realtime{
   display:inline-block;
   vertical-align:middle;
   color:#888;
   font-size:15px;
   margin-left:20px
}

.graph-box .head .remarks{
   float:right;
   margin-top:5px
}

.graph-box .remarks span{
   position:relative;
   display:inline-block;
   vertical-align:middle;
   font-size:15px;
   padding-left:15px;
   margin-right:15px
}

.graph-box .remarks span:last-child{
   margin-right:0
}

.graph-box .remarks span::after{
   content: "";
   position:absolute;
   left:0;
   width:10px;
   height:10px;
   border-radius:10px;
   background:#dfe4eb
}

.graph-box .remarks span.org::after {
   background:#f69679
}

.graph-box .remarks span.grn::after {
   background:#7accc8
}

.graph-box .remarks span.sky::after {
   background:#1ea2e7
}

.graph-box .remarks span.blc::after {
   background:#000000
}

.graph-box .calendar{
   display:inline-block;
   vertical-align:middle;
   margin-left:5px;
   width:25px;
   height:26px;
   background:url(../images/cal_icon.png) no-repeat
}





/*** short-menu ***/

.short-menu{
   float:right;
   width:32%;
}

.short-menu li{
   float:left;
   width:50%;
   height:150px;
   position:relative;
}

.short-menu li::after{
  content:"";
  width:4px;
  height:25px;
  background:#1ea2e7;
  position:absolute;
  right:0;
  top:0
}

.short-menu li::before{
  content:"";
  height:4px;
  width:25px;
  background:#1ea2e7;
  position:absolute;
  right:0;
  top:0
}

.short-menu li:nth-child(3)::after,
.short-menu li:nth-child(3)::before{
  top:auto;
  right:auto;
  bottom:0;
  left:0
}

.short-menu li a{
  padding-top:85px;
}

.short-menu li:first-child a{
   background-image: url(../images/short_icon01.png);
   background-color: #1ea2e7;
   color:#fff;
}

.short-menu li:nth-child(2) a{
   background-image:url(../images/short_icon02.png);
   background-color:#f1f6fc;
}

.short-menu li:nth-child(3) a{
   background-image:url(../images/service_icon000.png);
   background-color:#f1f6fc;
}

.short-menu li:last-child{
   background:#1ea2e7;
   font-size:18px;
   text-align:center;
   color:#fff;
   padding-top:18px
}

.short-menu li a{
   background-position: center 20px;
   background-repeat: no-repeat;
   display:block;
   width:100%;
   height:100%;
   font-size:18px;
   line-height:23px;
   word-break: break-all;
   text-align:center;
}

.short-menu .qr a{
   background-position: center 20px;
   background-repeat: no-repeat;
   display:block;
   width:100%;
   height:100%;
   font-size:18px;
   line-height:23px;
   word-break: break-all;
   text-align:center;
   padding:98px 10px 10px
}

.short-menu li .sms{
   margin-bottom:12px
}

.short-menu li .sms a{
   padding:0;
   line-height:30px;
   font-size:14px;
   display:block;
   width:70px;
   line-height:30px;
   text-align:center;
   margin:0 auto 5px;
   background:#fff;
   font-weight:600;
   color:#1ea2e7
}

.short-menu li .sms a:nth-child(2){
   background:rgba(255,255,255,.1);
   border:1px solid #fff;
   color:#fff;
   font-weight:normal;
}




/*** service-menu ***/

.service-menu{
   display:inline-block;
   width:100%;
   background:#f1f6fc;
   position:relative;
   overflow:hidden;
   padding:35px 0 43px 0;
   margin-top:58px
}

.service-menu h2{
   font-size:18px;
   line-height:26px;
   float:left;
   width:15%;
   background:url(../images/gobtn_icon.png) no-repeat bottom left;
   padding-bottom:22px
}

.service-menu h2 strong{
   display:block;
}

.service-menu section{
   max-width:1590px;
   margin:auto;
   display:block;
   position:relative;
}

.service-menu ul{
   float:left;
   width:85%
}

.service-menu li{
   float:left;
   width:9.2%
}

.service-menu li a{
   display:block;
   padding-top:60px;
   line-height:18px;
   text-align:center;
   word-break: keep-all;
}

.service-menu li:first-child a{
   background:url(../images/service_icon00.png) no-repeat center top
}/*수온정보서비스*/

.service-menu li:nth-child(2) a{
   background:url(../images/service_icon01_new.png) no-repeat center 5px
}/*정선해양 관측자료*/

.service-menu li:nth-child(3) a{
   background:url(../images/service_icon02_new.png) no-repeat center 5px
}/*위성해양 정보*/

.service-menu li:nth-child(4) a{
   background:url(../images/service_icon03_new.png) no-repeat center top
}/*이상해황 정보*/

.service-menu li:nth-child(5) a{
   background:url(../images/service_icon04_new.png) no-repeat center 5px
}/*해어황 정보*/

.service-menu li:nth-child(6) a{
   background:url(../images/service_icon05_new.png) no-repeat center top
}/*동해냉수대 예측*/

.service-menu li:nth-child(7) a{
   background:url(../images/service_icon06_new.png) no-repeat center top
}/*패류독소 정보*/

.service-menu li:nth-child(8) a{
   background:url(../images/service_icon07_new.png) no-repeat center top
}/*해파리속보*/

.service-menu li:nth-child(9) a{
   background:url(../images/service_icon08_new.png) no-repeat center top
}/*어장환경 모니터링*/

.service-menu li:nth-child(10) a{
   background:url(../images/service_icon09_new.png) no-repeat center 3px
}/*KODC*/

.service-menu li:nth-child(11) a{
   background:url(../images/service_icon10_new.png) no-repeat center top
}/*연안정지 관측자료*/

.service-menu .swiper-button-prev,
.service-menu .swiper-button-next{
   background:#fff;
   width:27px;
   height:27px;
   text-align:center;
   box-shadow: -2px 2px 4px rgb(0 0 0 / 4%);
   padding: 0 0 0 28px;
   margin-top:0;
   display:none;
}

.service-menu .swiper-button-prev{
   left: auto;
   right: 40px;
   top:0;
   background:#fff url(../images/swiper_prev.png) no-repeat center center
}

.service-menu .swiper-button-next{
   right:10px;
   top:0;
   background:#fff url(../images/swiper_next.png) no-repeat center center
}





/*** sub-content ***/
.sub-content{
  max-width: 1590px;
  margin: auto;
  padding:0 0 70px 0;
  position:relative;
}

.sub-content.sms{
  padding-top:50px
}

.sub-content h3{
  font-size:25px;
  font-weight:600;
  padding-bottom:15px;
  border-bottom:2px solid #e2e6eb;
  position:relative;
  margin-bottom:30px
}

.sub-content h3::after{
  content:"";
  width:50px;
  border-bottom:2px solid #1ea2e7;
  position:absolute;
  left:0;
  bottom:-2px
}

.sub-content h4{
  font-size:21px;
  font-weight:500;
  position:relative;
  padding-left:14px;
  margin-bottom:15px
}

.sub-content h4::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:10px;
  border:3px solid #1ea2e7;
  background:#fff;
  position:absolute;
  left:0;
  top:6px;
}

.sub-content h4 span{
  display:inline-block;
  vertical-align:middle;
  font-size:14px;
  font-weight:500;
  color:#5d5d5d;
  margin-left:10px
}

.sub-content .graph-box{
  text-align:center;
  background:#fff;
  border:1px solid #e2e7eb;
}




/*** sub-tab ***/
.sub-tab {
  width: 100%;
  display: inline-table;
  border-bottom:3px solid #1ea2e7;
  margin-bottom: 30px;
}

.sub-tab ul {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.sub-tab li {
  display: table-cell;
  vertical-align: middle;
  background:#fff;
  border: 1px solid #d7dce1;
  border-bottom:0;
  border-right:0;
  position: relative;
  text-align: center;
  transition: all 0.4s;
}

.sub-tab li:last-child{
  border-right: 1px solid #d7dce1;
}

.sub-tab li::after {
  content: "";
  width: 0%;
  height: 100%;
  top: 0;
  position: absolute;
  left: 0;
  transition: all 0.4s;
}

.sub-tab li:hover {
  background: #fff;
}

.sub-tab li.on{
  background:#fff;
  border:3px solid #1ea2e7;
  border-bottom:0
}

.sub-tab li.on::before{
  content: "";
  width: 100%;
  border-bottom: 5px solid #fff;
  position: absolute;
  bottom: -4px;
  left: 0;
}

.sub-tab li a {
  display: block;
  height: 64px;
  line-height: 64px;
  color: #5d5d5d;
  font-size: 17px;
  font-weight: 500;
  word-break: keep-all;
}

.sub-tab li .icon{
  display:inline-block;
  vertical-align:middle;
  background-position: center;
  background-repeat: no-repeat;
  margin-right:5px
}

.sub-tab li.st1 .icon{
  background-image: url(../images/tab_buoy_icon_off.png);
  width:19px;
  height:25px
}
.sub-tab li.st1.on .icon{background-image: url(../images/tab_buoy_icon.png);}/*실시간 관측정보 검색*/


.sub-tab li.st2 .icon{
  background-image: url(../images/tab_chart_icon_off.png);
  width:24px;
  height:25px
}
.sub-tab li.st2.on .icon{background-image: url(../images/tab_chart_icon.png);}/*관측정보통계*/


.sub-tab li.st3 .icon{
  background-image: url(../images/tab_loca_icon_off.png);
  width:19px;
  height:25px
}
.sub-tab li.st3.on .icon{background-image: url(../images/tab_loca_icon.png);}/*관측소검색*/


.sub-tab li.st4 .icon{
  background-image: url(../images/tab_down_icon_off.png);
  width:24px;
  height:24px
}
.sub-tab li.st4.on .icon{background-image: url(../images/tab_down_icon.png);}/*관측정보다운로드*/


.sub-tab li.on a {
  color: #000;
  font-weight:600;
  font-size:20px;
}





/*** area-tab ***/
.area-tab{
    position:relative;
  display:inline-table;
    border-bottom:1px solid #153547;
  width:100%;
  margin-bottom:20px
}

.area-tab li{
    float:left;
}

.area-tab li a{
    border:1px solid #fff;
    background:#fff;
    color:#888;
  padding:0px 30px;
    text-align:center;
    cursor:pointer;
    font-size:15px;
  line-height:44px;
  display:block;
  position:relative;
}

.area-tab li.on a{
  width:200px;
  padding:0;
    border:1px solid #153547;
    border-bottom:1px solid #153547;
    color:#fff;
    background:#153547;
    font-weight:500;
  border-radius:10px 10px 0 0
}
/*
.area-tab li.on a::after{
  content:"";
  width:100%;
  height:1px;
  background:#fff;
  position:absolute;
  left:0;
  bottom:-2px;
}
*/



.fill-btn{
  background: #153547 url(../images/fill_icon.png) no-repeat 15px center;
  color:#fff;
  display: inline-block;
  border-radius: 38px;
  line-height: 38px;
  padding: 0 15px 0 35px;
  font-size: 14px;
  position:absolute;
  right:0;
  top:0
}

.fill-btn:hover{
  color:#fff;
  text-decoration: underline;
}




/*** hd-search ***/
.hd-search-box{
  position: absolute;
  z-index:9;
  top:130px;
  left:0;
  width:100%;
  overflow-x: auto;
  background:#fff;
  border:1px solid #dfe4ea;
  border-radius:3px;
  box-shadow: -2px 2px 4px rgba(0,0,0,0.03);
  padding:20px;
  display:none;
}

.hd-search-box.on{
  display:block;
}

.hd-search{
  width:100%;
  height:100%;
  display:inline-block;
  background:#f1f6fc;
  border: 1px solid #e2e6eb;
  position:relative;
  margin-bottom:35px
}

.hd-search.full{
  border-right:0
}

.hd-search .search-form{
  float:left;
  width:calc(100% - 140px)
}

.hd-search.full .search-form{
  width:100%
}

.hd-search .search-btn{
  float:left;
  width:140px;
  height:100%;
  background:#f1f6fc;
}

.hd-search .search-btn a{
  display:inline-block;
  padding:0 15px;
  width:84px;
  text-align:center;
  background:#1ea2e7;
  line-height:80px;
  font-size:16px;
  font-weight:500;
  color:#fff;
  border-radius:3px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:1.6%
}

.hd-search .search-btn.sml a{
  height:39px;
  line-height:39px
}

.hd-btn{
  width:100%;
  text-align: right;
  margin:5px 0;
}

.hd-btn a{
  display: inline-block;
  background:#fff;
  border-radius: 2px;
  border: 1px solid #e2e6eb;
  box-shadow: 0px 0px 2px rgb(0 0 0 / 5%);
  line-height: 38px;
  padding: 0 15px;
  font-size: 14px;
}

.hd-btn a.text{
  background:#fff url(../images/text_icon.png) no-repeat 15px center;
  padding-left:30px
}

.hd-btn a.excel{
  background:#fff url(../images/excel_icon.png) no-repeat 15px center;
  padding-left:33px
}

.hd-btn a.on{
  background:#1ea2e7;
  color: #fff;
}



/*** search-form ***/
.search-form th{
  padding:8px;
  font-weight: 500;
  border: 1px solid #e2e6eb;
  border-top:0;
  border-left:0;
  background:#f1f6fc;
  font-size:16px;
  position: relative;
  vertical-align: middle;
}

.search-form th label{
  font-weight: 500;
}

.search-form tr:last-child th,
.search-form tr:last-child td{
  border-bottom:0
}

.search-form td{
  padding:8px;
  border: 1px solid #e2e6eb;
  background:#fff;
  border-top:0;
  border-left:0;
  font-weight: normal;
  vertical-align: middle;
  text-align:left
}

.search-form .t-center{
  text-align:center;
}

.search-form td select, .search-form td input{
  height: 37px;
  width:150px;
  font-size:15px
}

.search-form td input.time-input{
  width:100px
}

.search-form td input[type="checkbox"],
.search-form td input[type="radio"]{
  height:auto;
}

.search-form td .form-list{
  display:inline-block;
  vertical-align:middle;
  padding:5px 0
}

.search-form td .form-list li{
  float:left;
  font-size:15px;
  font-weight:500;
  margin:2px 15px 2px 0
}




/*** history-wrap ***/
.history-wrap .img{
  margin-bottom:40px
}

.history-wrap .tit {
  position: relative;
  width:100%;
  overflow:hidden;
  margin-bottom:10px;
  text-align:center;
}

.history-wrap .tit h4{
  position:inherit;
  z-index:1;
  font-size:55px;
  font-weight:900;
  background:#fff;
  color:#1ea2e7;
}

.history-wrap .tit h4::after{
  content:none
}

.history-wrap .tit span {
  padding:0;
  font-weight:300;
  font-size:19px;
  display:block;
  color:#fff;
  margin-top:20px
}

.history-wrap .tit span::after{
  content:none
}

.history-wrap .box{
  position:relative;
  z-index:100;
  max-width:1280px;
  padding:25px;
  margin:0 auto 70px;
  background:#f1f6fc;
  border:1px solid #e2e7eb;
  border-top:2px solid #1ea2e7
}

.history-wrap .box li{
  display: inline-block;
  vertical-align:middle;
  position:relative;
  line-height:25px;
  margin:0px 10px;
  font-size:16px
}

.history-wrap .box li::after{
  content:"";
  width:3px;
  height:3px;
  border-radius:3px;
  background:#555;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  right:-14px
}

.history-wrap .box li:last-child::after{
  content:none
}

.history-wrap .history {
  position: relative;
  overflow: hidden;
}

.history-wrap .history .cont {
  width: 100%;
  position: relative;
  display: inline-block;
}

.history-wrap .history .cont::before {
  content: "";
  width: 1px;
  height: 100%;
  background: #e2e7eb;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top:0
}

.history-wrap .history .cont > ul > li {
  display: inline-block;
  width:100%;
  position: relative;
  margin-bottom: 70px
}

.history-wrap .history .cont > ul > li  .area{
  position:relative;
}

/*
.history .cont > ul > li .area::after{
  content:"";
  width:12px;
  height:12px;
  background:#fff;
  border:3px solid #1ea2e7;
  border-radius:12px;
  position:absolute;
  z-index: 10;
  top: 5px;
}
*/
.history-wrap .history .cont > ul > li  .area::before{
  content:"";
  background:#dbeefa;
  width:25px;
  height:25px;
  border-radius:25px;
  position:absolute;
  top:-1px;
}

.history .cont > ul > li:nth-child(odd) .area::after {left:-5px;}
.history .cont > ul > li:nth-child(odd) .area::before {left:-12px;}
.history .cont > ul > li:nth-child(odd) .area{width:50%; float:right; padding-left:35px}
.history .cont > ul > li:nth-child(even) .area::after {right:-5px;}
.history .cont > ul > li:nth-child(even) .area::before {right:-12px;}
.history .cont > ul > li:nth-child(even) .area{width:50%; float:left; padding-right:35px; text-align:right}

.history .cont > ul > li .year {
  vertical-align: middle;
  font-size: 25px;
  letter-spacing:-1px;
  margin-bottom:20px;
  font-weight: 900;
}

.history .cont > ul > li .con {
  word-break: keep-all;
  font-size:16px;
  line-height:22px;
  margin-bottom:10px
}

.history .cont > ul > li .con:last-child{
  margin-bottom:0
}

.history .cont > ul > li .slist{
  margin-top:15px;
}

.history .cont > ul > li .slist li{
  position:relative;
  font-size:15px;
  color:#888
}




/*** summary-wrap ***/
.summary-wrap .visual-bg{
  position:relative;
}

.summary-wrap .visual-bg{
  background:url(../images/summary_bg.jpg) no-repeat center;
  width:100%;
  height:550px;
}

.summary-wrap .box{
  background:#fff;
  width:80%;
  padding:70px 60px 60px;
  position:absolute;
  bottom:-1px;
  left:50%;
  transform: translateX(-50%);
}

.summary-wrap .box .title{
  float:left;
  width:300px;
  margin-right:70px;
  font-size:30px;
  line-height:30px;
  font-weight:600
}

.summary-wrap .box .title strong{
  color:#1ea2e7
}

.summary-wrap .box .title span{
  display:block;
  margin-top:15px;
  font-size:17px;
  line-height:20px
}

.summary-wrap .box .text{
  float:left;
  width:calc(100% - 370px);
  font-size:17px;
  line-height:23px
}

.summary-wrap .sort {
  display: inline-block;
  width:100%;
  text-align:center;
  margin-top:70px
}

.summary-wrap .sort ul{
  width:100%;
  margin:auto;
}

.summary-wrap .sort li{
  float:left;
  width:48%;
  background:#f1f6fc url(../images/sort_icon01.png) no-repeat center 40px;
  padding:160px 40px 40px;
  font-size:18px;
  font-weight:500
}

.summary-wrap .sort li:last-child{
  float:right;
  background:#f1f6fc url(../images/sort_icon02.png) no-repeat center 40px;
}

.summary-wrap .sort li span{
  display:block;
  margin-top:7px;
  font-size:15px
}




/*** info-table ***/
.info-table{
  width:100%
}

.info-table.down{
  width:80%;
  margin:auto;
}

.info-table table {
  font-size: 15px;
  position:relative;
}

.info-table.x-scroll {
  overflow-x: auto;
}

.info-table.x-scroll table {
  min-width:999px
}

.info-table.scroll {
  overflow: auto;
  max-height:400px
}

.info-table.x-scroll table {
  min-width:999px
}

.info-table thead{
  border-top: 2px solid #1ea2e7;
}

.info-table th {
  padding:11px;
  font-weight: 500;
  border: 1px solid #e2e6eb;
  background:#fff;
  position: relative;
  vertical-align: middle;
}

.info-table th label{
  font-weight:500;
}

.info-table.down th{
  font-size:16px;
  padding:15px 13px
}

.info-table.down td{
  font-size:14px;
  padding:15px 13px
}


.info-table td {
  padding:11px;
  font-weight: bold;
  border: 1px solid #e2e6eb;
  background:#fff;
  font-weight: normal;
  vertical-align: middle;
  text-align:center;
  font-size:14px
}

.info-table .t-left td{
  text-align:left
}

.info-table .t-right{
  text-align:right;
}

.info-table tr td{
  border-top:0
}

.info-table span{
  /* color:#5d5d5d; */
  display:inline-block;
  vertical-align:middle;
  font-size:13px;
}



/*** cont-table ***/
.cont-table table {
  font-size: 15px;
}

.cont-table.x-scroll {
  overflow-x: auto;
}

.cont-table.x-scroll table {
  min-width:499px
}

.cont-table.x-scroll table .sml{
  min-width: inherit;
}

.cont-table th {
  width: 90px;
  padding:15px 11px;
  font-weight: 500;
  border: 1px solid #e2e6eb;
  background:#f1f6fc;
  position: relative;
  vertical-align: middle;
}

.cont-table th label{
  font-weight:500
}

.cont-table td {
  padding:15px 11px;
  font-weight: bold;
  border: 1px solid #e2e6eb;
  background:#fff;
  font-weight: normal;
  vertical-align: middle;
  text-align:center;
}

.cont-table .t-left td{
  text-align:left
}

.cont-table tr td{
  border-top:0
}

.sbox{
  background:#f1f6fc;
  padding:20px;
  line-height:21px;
  margin-top:15px
}



/*** list ***/
.obs-list{
  display:inline-block;
  background:#f1f6fc;
  padding:20px;
  width:100%;
  margin-bottom:35px
}

.obs-list li{
  background: url(../images/loca_icon.png) no-repeat left center;
  background-size:15px;
  height:18px;
  padding-left:20px;
  float:left;
  font-size:16px;
  margin:4px 10px
}

.loca-list{
  border-top:2px solid #1ea2e7
}

.loca-list li{
  float:left;
  width:33.3%;
  border-bottom:1px solid #e2e6eb;
  border-right:1px solid #e2e6eb;
  padding:15px;
  font-size:16px;
  text-align:center
}

.loca-list li:nth-child(3n){
  border-right:0
}

.loca-list li .loca{
  display:inline-block;
  vertical-align:middle;
}

.loca-list li .tag{
  width:60px;
  background:#1ea2e7;
  color:#fff;
  display:inline-block;
  line-height:24px;
  border-radius:2px;
  font-size:13px;
  margin:0px 1px;
  text-align:center;
}

.loca-list li .tag.green{
  background:#34baac
}

.loca-list li .tag.purple{
  background:#2b439b
}

.loca-list li .tag.gray{
  background:#a9b0b6
}

.loca-list li .bookmark{
  margin:0
}

.search-map{
  background:#c8ddf0;
  width:100%;
  height:650px
}




/*** direction ***/
.direction{
  font-size:16px;
  line-height:21px
}

.direction ul{
  margin-top:20px
}

.direction li{
  float:left;
  width:15%;
  margin-right:2%;
  height:210px;
  background:#f1f6fc;
  border:1px solid #f1f6fc;
  text-align:center;
  font-weight:500;
  line-height:21px;
  padding-top:155px
}

.direction li:first-child{
  background-image: url(../images/direction_icon_01.png);
  background-repeat: no-repeat;
  background-position: center 30px;
} /*수산피해 예방 및 대책*/

.direction li:nth-child(2){
  background-image: url(../images/direction_icon_02.png);
  background-repeat: no-repeat;
  background-position: center 30px;
} /*연안양식업 경영지원 기능 강화*/

.direction li:nth-child(3){
  background-image: url(../images/direction_icon_03.png);
  background-repeat: no-repeat;
  background-position: center 30px;
} /*어업생산성 향상*/

.direction li:nth-child(4){
  background-image: url(../images/direction_icon_04.png);
  background-repeat: no-repeat;
  background-position: center 30px;
} /*바다녹화*/

.direction li:nth-child(5){
  background-image: url(../images/direction_icon_05.png);
  background-repeat: no-repeat;
  background-position: center 30px;
} /*연안자원조성 기술개발*/

.direction li:last-child{
  background-image: url(../images/direction_icon_06.png);
  background-repeat: no-repeat;
  background-position: center 30px;
  margin-right:0
} /*해양레저산업 활성화*/



.division{
  width:100%;
  display:inline-block;
  position:relative;
}

.division h4{
  float:left;
  margin:15px 0 0 0
}

.division .hd-btn{
  float:right;
  width:56%;
}

.division .result-text{
  display:inline-block;
  float:left;
  margin-top:15px
}

.division .detail-sel{
  display:inline-block;
  width:100%
}

.division .sbox{
  margin:0 0 8px 0;
  padding:15px;
}

.division .detail-sel .sbox{
  color:red
}

.division .info-table-wrap{
  width:100%;
  display:inline-block;
}

.division .info-table-wrap .info-table thead{
  position: sticky;
  top:0;
  width:100%
}

.division .info-table-wrap .info-table th{
  background:#f1f6fc
}

.division .info-table{
  max-height:640px
}

.imgdiv img{
  float:left;
  width:100px;
  height:auto;
}

.detail-sel .cont-table table td{
  border-top:1px solid #e2e6eb
}

.detail-sel .cont-table table td img{
  float:left;
}

.detail-sel .cont-table table .sml th{
  padding:11px;
  font-size:14px;
  border-bottom:0
}

.detail-sel .cont-table table .sml td{
  padding:11px;
  font-size:14px;
}

.detail-sel .btn{
  display:inline-block;
  height:30px;
  line-height:29px;
  border-radius:4px;
  background:#fff;
  padding:0px 12px;
  font-size:13px;
  border:1px solid #e2e6eb
}

.detail-sel .btn.window{
  background:#fff url(../images/window_icon.png) no-repeat 10px center;
  padding-left:25px;
  background-size:10px
}




/*** technique ***/
.technique .list li{
  border-bottom:1px solid #e2e6eb;
  padding:17px 0 17px 12px;
  font-size:16px;
  line-height:22px;
  position:relative;
}

.technique .list li::after{
  content:"";
  position:absolute;
  left:0;
  top:25px;
  width:5px;
  height:5px;
  background:#1ea2e7
}

.technique .list li .box{
  font-size:14px;
  line-height:20px;
  color:#5d5d5d;
  margin-top:5px
}

/* cir-shape */
.cir-shape{
  margin-top:30px
}

.cir-shape .tit{
  background:#1ea2e7;
  border:2px solid #1ea2e7;
  width:300px;
  height:65px;
  line-height:65px;
  border-radius:65px;
  color:#fff;
  font-size:18px;
  text-align:center;
  float:left;
  margin-right:30px;
  position:relative;
}

.cir-shape .tit::after{
  content:"";
  position:absolute;
  right:-32px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height:2px;
  background:#1ea2e7;
}

.cir-shape .con{
  float:left;
    width:calc(100% - 330px);
}

.cir-shape .con li{
  float:left;
  width:32%;
  margin-right:1%;
  background:#fff;
  border:2px solid #1ea2e7;
  height:65px;
  border-radius:65px;
  font-size:18px;
  line-height:22px;
  position:relative;
  padding:0px 10px;
  word-break: keep-all;
  text-align:center;
}

.cir-shape .con li .md{
  width:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}



/*** terms ***/
.terms{
   padding:80px 40px;
   background:#fff;
   height:100%;
}

.terms h2{
   font-size:18px;
   font-weight:500;
   margin-bottom:10px
}

.terms .arbox{
   overflow:hidden;
   margin-bottom:50px;
   margin: 0 auto;
}

.terms textarea{
   padding:20px;
   border:1px solid #e2e6eb;
   background:#f6fafe;
   font-size:14px;
   line-height:21px;
   overflow-y: scroll;
   width:100%;
   height:150px;
}

.terms .btn{
   margin:30px auto 0;
   text-align:center;
   display:inline-block;
   width:100%
}

.terms .btn a{
   display:inline-block;
   width:110px;
   padding:20px 0px;
   text-align:center;
   font-size:17px;
   margin-right:10px;
   border-radius:4px;
   font-weight:500;
   color:#fff
}

.terms .btn a:last-child{
   margin-right:0
}

.terms .btn a:first-child{
   background:#666;
   border:1px solid #666;-
}

.terms .btn a:last-child{
   background:#1ea2e7;
   border:1px solid #1ea2e7;
}

.terms .formlist{
   margin-top:15px;
   float:right;
}

.terms .formlist li{
   float:left;
   margin-right:20px
}

.terms .formlist li:last-child{
   margin-right:0
}

.terms.sms .formlist{
  float:none;
  margin:0
}


.download-btn{
  display: inline-block;
  background: #fff url(../images/down_icon_g.png) no-repeat 85% center;
  border-radius: 2px;
  font-weight:500;
  border: 1px solid #1ea2e7;
  color:#5d5d5d;
  box-shadow: 0px 0px 2px rgb(0 0 0 / 5%);
  line-height: 38px;
  padding: 0 30px 0 15px;
  font-size: 14px;
}

.mapbtn{
  display: inline-block;
  background: #fff url(../images/loca_icon.png) no-repeat 10px center;
  background-size:18px;
  border-radius: 33px;
  font-weight:500;
  border: 1px solid #e2e6eb;
  color:#5d5d5d;
  box-shadow: 0px 0px 3px rgb(0 0 0 / 10%);
  line-height: 33px;
  padding: 0 15px 0 30px;
  font-weight:600;
  font-size: 14px;
}



/*** search-pop ***/
.search-pop{
  position: absolute;
  z-index:9;
  top:120px;
  left:70px;
  width:768px;
  overflow-x: auto;
  background:#fff;
  border:1px solid #dfe4ea;
  border-radius:3px;
  box-shadow: -2px 2px 4px rgba(0,0,0,0.03);
  padding:20px;
}

.search-pop h5{
  font-size:16px;
  font-weight:500;
  padding-bottom:10px;
  border-bottom:1px solid #dfe4ea;
  margin-bottom:15px
}

.search-pop .sbtn-wrap{
  display:inline-block;
  width:100%;
  text-align:center;
  margin-top:15px
}

.search-pop .sbtn-wrap .sbtn{
  display:inline-block;
  padding:0px 15px;
  line-height:34px;
  margin:0px 2px;
  background:#1ea2e7;
  color:#fff
}

.search-pop .sbtn-wrap .sbtn.close{
  background:#dbe7f5;
  color:#5d5d5d
}

.search-form .search-pop th{
  border:1px solid #e2e6eb;
  font-size:14px;
  padding:10px 0
}

.search-form .search-pop td,
.search-form .search-pop tr:last-child td{
  border:1px solid #e2e6eb
}

.search-form .search-pop td .form-list li{
  font-size:14px
}






/*** paging ***/
#paging {
  margin:auto;
  width: 100%;
  text-align: center;
  background:#f1f6fc;
  border:1px solid #e2e6eb;
  border-top:0;
  padding:5px 0
}

#paging .paging-wrap {
  display: inline-block;
}

#paging ul {
  float: left;
  padding: 0px 5px;
}

#paging li {
  float: left;
  margin: 0px 1px
}

#paging li:last-child {
  margin-right: 0
}

#paging li img {
  display: inline-block;
  vertical-align:inherit;
  line-height: normal;
  height: 11px;
}

#paging li a {
  display: block;
  color:#5d5d5d;
  border: 1px solid #dde2e6;
  border-radius: 25px;
  background: #fff;
  width:25px;
  height: 25px;
  line-height: 23px;
  font-size: 13px;
}

#paging li.on a {
  color: #fff;
  background: #1ea2e7;
  border: 1px solid #1ea2e7;
  font-weight: bold;
}

#paging .prev a, #paging .next a{
  background:none;
  border:0;
  width:15px;
  margin-top:2px
}

#paging select{
  height:25px;
  width:50px;
  font-size:12px;
  padding-left:7px
}


#footer{
   width:100%;
   display:inline-block;
   width:100%;
   background:#fff;
   position:relative;
}

.footer-wrap{
   max-width:1590px;
   margin:auto;
   padding:0 0 30px;
   overflow:hidden;
   line-height:20px
}

.footer-wrap .menu-wrap{
   border-top:1px solid #e3e7ed;
   border-bottom:1px solid #e3e7ed;
   padding:15px 0;
   display:inline-table;
   width:100%;
   margin-bottom:25px
}

.main .footer-wrap .menu-wrap{
   border-top:0
}

.footer-wrap .menu{
   float:left;
   margin-top:13px
}

.footer-wrap .menu li{
   display: inline-block;
   position:relative;
   padding:0 10px
}

.footer-wrap .menu li::after{
   content: "";
   width:2px;
   height:2px;
   border-radius:2px;
   background:#000;
   position:absolute;
   right:-2px;
   top:7px
}

.footer-wrap .menu li:last-child::after{
   content: none
}

.footer-wrap .menu li strong{
   color:#1ea2e7
}

.footer-wrap .site{
   float:right;
}

.footer-wrap .site li{
   float:left;
   margin-right:5px
}

.footer-wrap .site li select{
   height:43px;
   width:170px
}

.footer-wrap .logo{
   float:left;
   margin-right:30px
}

.footer-wrap .text{
   float:left;
}

.footer-wrap .copy{
   display:block;
   color:#999
}




/*** popup ***/
#pop{
  position: fixed;
  z-index: 3000;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0.4);
}

.popup{
  position: absolute;
  z-index:1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:100%;
  height:500px;
  overflow-y: auto;
  background:#fff;
  border-radius:10px;
  border: 1px solid #edf6fc;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}

.popup.fixed{
  position:fixed;
  top:auto;
  bottom:50px
}

.popup .head{
  position:fixed;
  width:100%;
  z-index:100;
  top:0;
  background:#fafafa;
  line-height:50px;
  padding:0px 20px;
  font-size:17px;
  font-weight:600;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  border-bottom:1px solid #ebeeef;
}

.popup .head .hd-btn{
  width:auto;
  float:right;
  margin: -1px 20px 0 0
}

.popup .cont{
  padding: 70px 20px 20px;
}

.popup .close {
  background: url(../images/close_sml_btn.png) no-repeat center center;
  background-size: 16px;
  width: 16px;
  height: 16px;
  position: absolute;
  right:15px;
  top: 17px;
  cursor:pointer;
}

.popup .sel-item li{
  padding:15px 0;
  border-bottom:1px solid #e2e6eb;
  font-size:15px;
}

.popup .sel-item .tit{
  display:inline-block;
  vertical-align:middle;
  width:100px
}

.popup .sel-item .con{
  display:inline-block;
  vertical-align:middle;
  width:calc(100% - 100px)
}

.popup .btn-wrap{
  margin-top:20px;
  text-align:center
}

.popup .btn-wrap .btn{
  display:inline-block;
  line-height:40px;
  border:1px solid #1ea2e7;
  color:#1ea2e7;
  padding: 0px 20px;
  margin:0px 5px;
  border-radius:2px
}





.m-popup{
   display: inline-block;
   vertical-align:top;
   margin-right:15px;
   border:1px solid #dde0e1;
   background:#fff;
   position:absolute;
   z-index:1000
}

.m-popup .tit{
  line-height:35px;
  padding-left:10px;
  font-weight:600;
  background:#fff;
  font-size:15px;
  border-bottom:1px solid #dde0e1;
  position:relative;
}

.m-popup .close{
  background: url(../images/close_sml_btn.png) no-repeat center center;
  background-size: 11px;
  width: 14px;
  height: 14px;
  position: absolute;
  right:10px;
  top: 11px;
  cursor:pointer;
}

.m-popup .area{
   overflow:hidden;
}

.m-popup .area img{
   display:block;
   width:100%;
   height:100%;
   max-width: 700px;
   max-height: 700px;
}

.m-popup .bar{
   padding:0px 10px;
   height:33px;
   line-height:33px;
   background:#f1f6fc;
   position:relative;
   font-size:13px;
   text-align: right;
}

.m-popup .bar .ckdbox input[type="checkbox"] + label:before{
   border:1px solid #dde0e1;
   margin-bottom:0;
}

.m-popup .bar .ckdbox input[type="checkbox"]:checked + label:before{
  border: 1px solid #1ea2e7;
}

.m-popup .bar .btn{
   padding:0px 7px;
   position:absolute;
   right:10px;
   text-decoration: underline;
}






#scroll-top{
   position: fixed;
   right: 2%;
   bottom: 50px;
   z-index: 999;
   display:inline-block;
   width:60px;
   height:60px;
   border-radius:60px;
   text-align:center;
   font-style: italic;
   font-size:12px;
   background:#fff url(../images/arrow_top_icon.png) no-repeat center 14px;
   border:1px solid #e3e7ed;
   color:#999;
   padding-top:33px;
   box-shadow: -2px 2px 4px rgb(0 0 0 / 6%);
}







@media screen and (max-width:1599px){
   #gnb{padding:28px 30px}
   #gnb .rbtn-wrap{right:30px; top:35px}
   .main-content{padding:0px 30px}
   .sub-content{padding:0px 30px 50px 30px}
   .service-menu{padding:35px 30px 43px 30px}
   .gis-wrap{width:40%}
   .info-cont{width:57%}
   .footer-wrap{padding:0 30px 30px 30px}
}

@media screen and (max-width:1399px){
   .short-menu li.sms{padding:35px 0 0 115px}
   .service-menu h2{float:none; width:100%; background:0}
   .service-menu h2 strong{display:inline-block; margin-right:5px}
   .service-menu ul{float:none; width:100%}
   .info-table.down{width:100%}
}

@media screen and (max-width:1199px){
   .gis-wrap{float:none; width:100%; height:300px; margin-bottom:30px}
   .info-cont{float:none; width:100%}
   .graph-box{padding:25px}
   .short-menu li.sms{padding:35px 0 0 18%}
   .service-menu .swiper-button-prev,
   .service-menu .swiper-button-next{display:block;}
   
   .service-menu .swiper-button-prev:after,
   .service-menu .swiper-button-next:after{display:none;}

   .hd-search{background:none; border:0}
   .hd-search .search-form{float:none; width:100%}
   .hd-search .search-form table{border:1px solid #e2e6eb; border-right:0}
   .hd-search .search-btn{float:none; width:100%; background:none; text-align:center; margin-top:15px}
   .hd-search .search-btn a{position:relative; top:auto; right:auto; transform: none; height:44px; line-height:44px}
   .p-img{width:100%}

   .division .detail-sel{float:none; width:100%}
   .division .info-table-wrap{float:none; width:100%; margin-top:20px}

   .direction li{width:31%; margin:1%}
   .cir-shape .tit{float:none; margin:0 auto 20px;}
   .cir-shape .tit::after{content:none}
   .cir-shape .con{float:none; width:100%}
   .cir-shape .con li{font-size:17px}

}


@media screen and (max-width:999px){
   #gnb{padding:18px 30px}
   #gnb .menu .item{display:none}
   #gnb #nav .nav-menu{width:40%;}
   #gnb .rbtn-wrap{top:25px}
   .tem-box .value li:first-child{padding:45px 20px 0 60px}
   .graph-box{padding:0}
   .graph-box .head{padding:20px}
   .short-menu li{background-position: center 20px !important; height:180px}
   .short-menu li a{padding:105px 0 0 0; text-align:center; background-position:center 30px}
   .short-menu li a .more{margin-top:10px}
   .short-menu li.sms{padding:120px 0 0 0; text-align:center;}
   .short-menu li.sms a{display:inline-block;}
   .short-menu{display:inline-block; float:none; width:100%; margin-top:20px}
   .short-menu li:last-child{padding-top:21px}

   .area-tab ul{display: table; table-layout: fixed; width:100%}
   .area-tab li{float:none; display: table-cell;}
   .area-tab li a{width:100%;}

   .gis-wrap{display:none}
   .info-cont .tem-box{width:48%}
   .info-cont .tem-table{width:48%}

   .sub-tab{border-bottom:0}
   .sub-tab li{display:block; float:left; width:33.3%; border:0; border-bottom:1px solid #d7dce1}
   .sub-tab li:last-child{border-right:0}
   .sub-tab li.on{border:0; border-bottom: 1px solid #1ea2e7;}
   .sub-tab li.on::before{content:none}
   .sub-tab li a{line-height: 50px; height: 50px; font-size: 16px; padding: 0px 10px;}
   .sub-tab li.on a{font-size:16px}
   .sub-tab.sd li{width:50%}
   .loca-list li{float:none; width:100%; border-right:0; text-align:left}

   .history-wrap .tit h4{font-size:28px}
   .history .cont > ul > li .pic{width:100%}
   .summary-wrap .box{width:100%}
   .cir-shape .con li{font-size:16px; line-height:20px}
   .search-form table tr, .search-form table th, .search-form table td{display:block; text-align:center}
   .graph-box .graph{margin-top:0}

   .hd-search-box{top:180px}

   .footer-wrap{text-align:center;}
   .footer-wrap .menu-wrap{padding-top:0}
   .footer-wrap .menu{float:none; display: inline-table; width:100%; padding:20px 0; margin:0}
   .footer-wrap .site{float:none; display:inline-block;}
   .footer-wrap .logo{float:none; width:100%;}
   .footer-wrap .text{float:none; width:100%;}

   .popup{top:0; left:0; transform: none; width:100% !important;}

}

@media screen and (max-width:640px){
   #gnb{padding:18px 20px}
   #gnb #nav .nav-menu{width:70%; padding:0 30px 20px 0}
   #gnb #nav .nav-menu > ul > li > a{height:50px; line-height:50px; font-size:16px}
   #gnb #nav .nav-menu > ul > li.on > a::after{top:22px; right:22px}
   #gnb #nav .nav-menu .msub > ul > li a{font-size:14px ;line-height:33px}
   #gnb .nav-btn{top:24px; right:20px}
   #gnb .logo img{height:30px}
   #gnb .rbtn-wrap{right:20px; top:20px}
   #gnb .rbtn-wrap a{width:23px; height:24px; background-size:23px}
   #gnb .rbtn-wrap a.set-btn{width: 25px; height: 26px; background-size: 25px;}

   .main-content{padding:0px 20px}
   .sub-content{padding:0px 20px 20px 20px}
   .info-cont .tem-box{float:none; width:100%; margin:0 0 10px 0}
   .info-cont .tem-table{float:none; width:100%;}
   .tem-box .cont li:first-child strong{font-size:45px}
   .hd-search .search-form .result-text{display:block; line-height:18px; font-size:13px; margin-top:7px}

   .graph-box .head{text-align:center; margin:0}
   .graph-box .head .sel{float:none; width:100%}
   .graph-box .head .sel select{width:90%; height:40px; font-size:15px}
   .graph-box .head .sel .selbox{display:block; width:100%; padding:0; margin-bottom:10px}
   .graph-box .head .sel > .realtime{margin:0}
   .graph-box .head .remarks{float:none; width:100%; margin-top:10px}
   .graph-box .head .arrow-btn a.next{left:auto; right:0}
   .graph-box .remarks span{font-size:14px}

   .short-menu li{width:49%}
   .short-menu li:nth-child(2n){margin-right:0}
   .short-menu li.sms{float:none; width:100%; height:130px; display: inline-table; padding: 35px 0 0 60%; background-position: 25px center !important; margin-top:1.5%}
   .short-menu li.sms a{display:block}

   .sub-content h3{font-size:20px}
   .sub-content h4{font-size:16px; margin-bottom:10px}
   .sub-content h4::after{top:2px}
   .sub-content h4 span{margin:7px 0 0 0; display:block;}
   .sub-tab li{width:100%}
   .sub-tab.sd li{width:100%}
   .sub-tab li a{font-size:14px}
   .sub-tab li.full{width:100%}

   .summary-wrap .visual-bg{background:none; height:auto;}
   .summary-wrap .box{padding:0; position:relative; top:auto; left:auto; transform: none}
   .summary-wrap .box .title{float:none; width:100%; margin:0 0 15px 0; font-size:25px;}
   .summary-wrap .box .title span{font-size:15px; margin-top:5px}
   .summary-wrap .box .text{float:none; width:100%; font-size:15px; line-height:21px}
   .summary-wrap .sort{margin-top:30px}
   .summary-wrap .sort li{width:100%; float:none; margin-bottom:10px; font-size:16px; line-height:22px}
   .summary-wrap .sort li span{font-size:13px; margin-top:5px}
   .summary-wrap .sort li:last-child{margin-bottom:0}

   .service-menu h2{font-size:19px}
   .service-menu li a{font-size:15px}
   .tem-table table th{font-size:16px; padding:14px 5px}
   .tem-table table td{font-size:15px; line-height:normal;}

   .history-wrap .tit h4{text-align:left; padding:0}
   .history-wrap .history .cont::before{left:37px; transform:none;}
   .history .cont > ul > li:nth-child(odd) .area, .history .cont > ul > li:nth-child(even) .area{width:100%; float:left; padding-left:60px; text-align:left;}
   .history .cont > ul > li:nth-child(odd) .area::before, .history .cont > ul > li:nth-child(even) .area::before{right:auto; left:25px}
   .history .cont > ul > li .year{font-size:20px}
   .history .cont > ul > li .con{font-size:14px; line-height:20px}
   .history-wrap .box{padding:15px 10px;}
   .history-wrap .box li{font-size:14px; line-height:23px}

   .info-table th{font-size:14px; line-height:19px}
   .info-table td{font-size:13px}
   .info-table span{display:block; margin-top:5px}
   .cont-table table{font-size:14px; line-height:19px}
   .hd-search .search-btn{margin-top:0}
   .hd-search .search-btn a{width:100%; border-radius:0 0 5px 5px; font-size:15px}
   .hd-btn a.text{padding-left:27px; background: #fff url(../images/text_icon.png) no-repeat 10px center;}
   .hd-btn a.excel{background: #fff url(../images/excel_icon.png) no-repeat 10px center;}
   .hd-btn a{padding:0px 10px}
   .search-form th{padding:10px 5px; font-size:14px}
   .search-form td select, .search-form td input{width:46%; height:34px; font-size:14px}
   .search-form td .form-list li{font-size:14px}
   .obs-list{padding:15px}
   .obs-list li{font-size:15px; padding-left:18px}
   .loca-list li{padding:13px 0; font-size:14px}
   .loca-list li .tag{font-size:12px}
   .direction{font-size:15px}
   .direction li{width:100%}
   .cir-shape .tit{width:100%; height:50px; line-height:50px; font-size:16px}
   .cir-shape .con li{font-size:15px; height:50px; float:none; width:100%; margin-bottom:8px}
   .cir-shape .con li:last-child{margin-bottom:0}
   .technique .list li{font-size:15px; line-height:20px}
   .technique .list li .box{font-size:13px; line-height:18px}
   .sbox{font-size:13px; line-height:18px}
   .division .hd-btn{width:100%}
   .mapbtn{height:auto; line-height:normal; padding:5px; background:#fff; font-size:11px}
   .hd-search-box{top:195px; height:200px; overflow-y: auto;}
   .fill-btn{top:-10px}

   #paging li a{font-size:12px}
   #paging li.m{display:none}

   #footer{font-size:12px}
   .footer-wrap{padding:0 20px 20px 20px}
   .footer-wrap .site{width:100%;}
   .footer-wrap .site li{width:100%}
   .footer-wrap .site li:last-child{margin-right:0}
   .footer-wrap .site li select{width:100%}

   .terms{padding:40px 20px}
   .terms .formlist li{float:none; width:100%; margin-bottom:8px}
   .terms .formlist li:last-child{margin-bottom:0}
   .terms .btn{margin:10px auto 0}
   .terms .btn a{width:95px; font-size:15px; padding:15px 0; margin-right:5px}
   .tem-box .value li span{font-size:17px}

   .m-popup{width:100% !important; top:40% !important; left:50% !important; transform: translate(-50%, -40%) !important;}

   #scroll-top{display:none !important}
}

@media screen and (max-width:360px){
   .service-menu h2 span{display:none}
}






/*MAP*/
.iw_inner1{width:350px; height:auto;position:absolute;top:25px;left:20px;z-index:1000;}
.iw_inner1 .logo{display:none;}


#searchForm .inputBox{    padding: 0 20px; width:330px; height:55px;  background:#fff; border-radius: 100px; box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.1);}
#searchForm .inputBox_01{  padding: 15px; width:330px; height:190px;  background:#fff; border-radius: 20px 20px 5px 5px; box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.1);}
#searchForm .title{display:none;}
#searchForm .inputBox input{   padding: 0 ;  width: 43%;height:55px; line-height: 55px; background: url(../images/cal_icon_01.png) no-repeat 100% center;  border:none}
#searchForm .inputBox_01 input,
#searchForm .inputBox_01 select{  border-radius:8px; line-height:43px; height:43px; background:#f3f4f9;  border:none; font-size: 15px;}

#searchForm .inputBox_01 select{background:#f3f4f9 url(../images/ic_sel.png) no-repeat 90% center;}
#searchForm .btnSrch{    display: block;  background: #1ea2e7;  color: #fff;  line-height: 55px;  border-radius: 100px;  font-size: 18px;  text-align: center;  font-weight: 500;}



#StdGrid.jido{position:absolute;top:15px;left:0; width:330px !important; background:#f1f6fc; border-radius: 5px 5px 20px 20px; box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.1);    overflow: hidden;}
.jido .aui-grid-header-panel{border-top: none;}
.jido .aui-grid{padding:15px 0 17px 0; width:330px !important; border: none  !important; height: 270px  !important;  background: #f1f6fc; }
.jido .aui-grid-table tr:nth-child(1){ height: 0;}
.jido .aui-grid-table tr:nth-child(2){  height: 52px;  line-height: 41px;}
/* .jido .aui-vscrollbar{top: 18px !important; height: 246px !important;}
.jido .aui-grid-paging-panel{top: 282px !important}
.jido .aui-grid-main-panel,
.jido .aui-grid-content-panel-mask{height: 282px !important}
.jido .aui-grid-body-panel{height: 210px !important}
.jido .aui-scroll-up{    top: 52px !important}
.jido .aui-scroll-thumb{ top: 67px !important} */
/* .jido .aui-scroll-track{height: 247px !important;}
 .jido .aui-scroll-down{top: 231px !important;} */
 .jido .aui-grid-paging-info-text{display:none;}

.jido  .aui-grid-table{    height: auto;    margin-top: 0 !important; border:none !important;}

.jido  .aui-grid-table tr:nth-child(2) td:nth-child(1) span,
.jido  .aui-grid-table tr:nth-child(2) td:nth-child(2) span{line-height:77px; font-size:13px !important;}

.jido  .aui-grid-table tr:nth-child(2){    height: 25px !important; }
.jido  .aui-grid-table tr:nth-child(2) td:nth-child(3) { vertical-align: middle; font-size:13px !important;}
.jido  .aui-grid-table tr:nth-child(2) td:nth-child(3) span{ font-size:13px !important;}
.jido  .aui-grid-table tr:nth-child(3) span{font-size:13px !important;}


.jido .aui-grid-info-layer .aui-grid-nodata-msg-layer{background-size: 54px; padding: 44px 0 0 62px}

.iw_inner2{right:20px !important; border-radius: 20px; box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.1); }
.iw_inner2 li{margin-bottom:7px;}
.iw_inner2 li a{font-size:12px;display: inline-block;  vertical-align: middle;}
.iw_inner2 li img{    vertical-align: middle;}
#legendUl{padding:20px; background-color: #fff;}

.map_sbtn{ height:32px; background:#cee9f6 ;border-radius: 20px 20px 0 0;    position: relative;}

.sbtn_plus{    display: none;  top: 10px;  position: absolute;    right: 20px; width:12px; height:12px; background:url(../images/sbtn_img.png) 0 50% no-repeat ;    overflow: hidden;    text-indent: -9999px;}
.sbtn_minus{    display: block;  top: 10px;  position: absolute;    right: 20px; width:12px; height:12px; background:url(../images/sbtn_img.png) -105px 50% no-repeat ;    overflow: hidden;    text-indent: -9999px;}


#map div:nth-child(5) > div:nth-child(2){margin-top:20px !important; margin-right:10px !important;}
#map div:nth-child(5) > div:nth-child(2) > div{    margin: 7px 7px 9px 7px !important;}
#map div:nth-child(5) > div:nth-child(2) ul{border-right: none !important; height:32px !important;}
#map div:nth-child(5) > div:nth-child(2) ul li{border-width:0 !important}
#map div:nth-child(5) > div:nth-child(2) ul li a{font-family:'Pretendard' !important; font-size:14px !important; font-weight:500 !important;}
#map div:nth-child(5) > div:nth-child(2) ul li a{    height: 32px !important;    line-height: 32px !important; padding: 0 15px !important;    border-radius: 100px !important;}



#map div:nth-child(5) > div:nth-child(2) ul:nth-child(2){top: 47px !important;}
#map div:nth-child(5) > div:nth-child(2) ul:nth-child(2) li:nth-child(1) span{  padding-left: 15px !important ;}
#map div:nth-child(5) > div:nth-child(2) ul li img{ top: 10px !important;;   left: 14px !important;}
#map div:nth-child(5) > div:nth-child(2) ul li span{padding-right:20px;}
#map div:nth-child(5) > div:nth-child(2){background:#fff;  border-radius: 70px; box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.1);}
#map div:nth-child(5) > div:nth-child(1){  top: 100px;   position: absolute;   right: 0;}


#moveTo{margin-top:20px !important;margin-right:10px !important; border:none; padding:0 15px 0 40px; line-height:48px !important; height:48px !important;  font-size:15px !important; font-weight:500 !important;
               background:#fff url(../images/ic_loca.png) no-repeat 15px center;  border-radius: 100px; box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.1);}


#distLayer{margin-top:20px !important;margin-right:10px !important; border:none; padding:0 15px 0 40px; line-height:48px !important; height:48px !important;  font-size:15px !important; font-weight:500 !important;
               background:#fff url(../images/ic_loca_01.png) no-repeat 15px center;  border-radius: 100px; box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.1);}


.popup{display:block; height:auto; border:none; }
.popup  tr  td{padding:5px; font-size:13px; font-weight:300; vertical-align: middle;}
.popup .th{background:#f1f6fc; font-size:14px; font-weight:500; color:#000;}


.popup_01{width:100%; display:block; padding:10px; height:auto; border:none;}
.popup_01  tr  td{padding:5px; font-size:13px; font-weight:300; text-align: center;}
.popup_01 .th{background:#f1f6fc; font-size:14px; font-weight:500; color:#000;}


.popCont{       overflow: hidden;  background-color: #fff;    border-radius: 5px;    box-shadow: 3px 3px 6px rgba(0,0,0,.2); margin-top:55px;}
#list_wrapper .tit{  padding-left:20px; position:relative;   height: 40px; line-height:40px;   background-color: #1ea2e7;    font-size: 1.1em;   font-weight: 500;  color: #fff;}
#list_wrapper .btnClose{    position: absolute; top:10px; right:10px;}
#list_wrapper .btnClose img{ width:16px;}
#ifr_Contents3{ background-color: unset !important; width:450px;  height:610px;   border:none !important; top: 15px;   }
.th-1{padding:10px 0; font-weight:500 !important; line-height:16px;vertical-align: middle; }
.td-2{padding:10px 5px 10px 5px; font-weight:300 !important; line-height:16px;vertical-align: middle; text-align: center;}
.diagonal{position: relative;}
.diagonal:after{        content: '';
    position: absolute;
    width: 1px !important;
    height: 61px !important;
    background-color: #bfc2ce;
    transform: rotate(-53deg);
    top: -12px;
    left: 24px;}

.diagonal .t1{    position: absolute; font-size:11px;    top: 3px;    right: 3px;}
.diagonal .t2{    position: absolute; font-size:11px; bottom: 3px;    left: 3px;}

.smart-tb2{}
.smart-tb2 td{}

.smart-tb2 .th-2{text-align:center; color:#000;font-weight:500 !important;vertical-align: middle;    background: #e7e7e7;}
.smart-tb2 .td-2{font-weight:300 !important;text-align:center; }
.smart-tb2 > tbody > .th-2 > .td-2{color:#000;font-weight:500 !important;}

.smart-tb table textarea{width:100%;}

/*
#map div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > div:nth-child(2) > div{ border: 2px solid red !important;}
 */


 /*1019*/

 .btnClose{   position: absolute; background: url(../images/close_btn_wh.png) 50% 50% no-repeat; width: 40px; height: 40px;  right: -40px; top:52px; background-color: transparent !important;
    background-size: 49%;}
     .btnClose img{display:none}

@media all and (max-width: 600px) {
     #popup1{left:20px !important; top:20px !important; bottom:20px !important; right:20px;}
     .popCont{    overflow: auto; height:100%;}
     .popCont #ifr_Contents3{ width:100%; height:100%;}
     .btnClose{  right: 17px !important;}
     .table_wrap{}
}

.navBox .swiper-button {
  display:inline-block;
  position: relative;
  width: 65px;
  vertical-align: middle;
}

.navBox .swiper-button-next,
.navBox .swiper-button-prev {
  background: none;
  left: auto;
  right: auto;
}

.navBox .swiper-button-prev {
  left: 0px;
}

.navBox .swiper-button-next {
  left: 15px;
}

.navBox .swiper-button-next:after,
.navBox .swiper-button-prev:after {
  color: #000;
  font-size: 13px;
  font-weight: 600
}

.navBox .swiper-button-pause {
  position: absolute;
  left: 70%;
  top: 50%;
  transform: translate(-50%, -45%);
}

.navBox .swiper-button-pause button {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  width: 9px;
  height: 12px;
  position: relative;
  cursor: pointer;
}

.navBox .swiper-button-pause button:before {
  display: block;
  content: '';
}

.navBox .swiper-button-pause button[aria-pressed="true"]:before {
  border-top: 6px solid transparent;
  border-left: 10px solid #000;
  border-bottom: 6px solid transparent;
}

.navBox .swiper-button-pause button[aria-pressed="false"]:before {
  width: 9px;
  height: 12px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  box-sizing: border-box;
}

.chartBox .swiper-button {
  display:inline-block;
  position: relative;
  width: 65px;
  vertical-align: middle;
}

.chartBox .swiper-button-next,
.chartBox .swiper-button-prev {
  background: none;
  left: auto;
  right: auto;
}

.chartBox .swiper-button-prev {
  left: 0px;
}

.chartBox .swiper-button-next {
  left: 15px;
}

.chartBox .swiper-button-next:after,
.chartBox .swiper-button-prev:after {
  color: #000;
  font-size: 13px;
  font-weight: 600
}

.chartBox .swiper-button-pause {
  position: absolute;
  left: 70%;
  top: 50%;
  transform: translate(-50%, -40%);
}

.chartBox .swiper-button-pause button {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  width: 9px;
  height: 12px;
  position: relative;
  cursor: pointer;
}

.chartBox .swiper-button-pause button:before {
  display: block;
  content: '';
}

.chartBox .swiper-button-pause button[aria-pressed="true"]:before {
  border-top: 6px solid transparent;
  border-left: 10px solid #000;
  border-bottom: 6px solid transparent;
}

.chartBox .swiper-button-pause button[aria-pressed="false"]:before {
  width: 9px;
  height: 12px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  box-sizing: border-box;
}