/*****************
 main
*****************/
.main-content{
  max-width:1680px;
  margin:auto;
  background:#fff;
  display: grid;
  border:1px solid #eaeef2;
  border-right:0;
  border-bottom:0;
  grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% auto;
}

.main-content section{
  padding:35px;
  background:#fff;
  border-right:1px solid #eaeef2;
  border-bottom:1px solid #eaeef2;
  position:relative;
}

.main-content h2{
  font-size:22px;
  line-height:30px;
  font-weight:700;
  margin-bottom:20px;
  font-family:'GmarketSans', sans-serif;
}

.main-content .hdcon{
  position:absolute;
  right:35px;
  top:25px
}

.main-content .hdcon .form{
  display:inline-block;
  vertical-align:middle;
}

.main-content .hdcon .cal-input{
  width:150px;
  /* background-image: url(../images/cal_icon.png); */
  background-repeat: no-repeat;
  background-color:#fff;
  border:1px solid #dde1e5
}

.main-content .hdcon .btn{
  background-color:#9aa3ae;
  border:1px solid #949ca5;
  border-radius:2px;
  display:inline-block;
  vertical-align:middle;
  padding:0px 15px;
  height:44px;
  line-height:43px;
  color:#fff
}

.main-content .hdcon .btn.window{
  background-image: url(../images/window_icon.png);
  background-repeat: no-repeat;
  background-position: center;
  width:40px
}

.main-content .hdcon .btn.sch{
  background-image: url(../images/search_icon.png);
  background-repeat: no-repeat;
  background-position: center;
  width:40px
}



/*** korp-observe ***/
.korp-observe{
  grid-row: span 4;
  grid-column: 1 / span 4;
}

.korp-observe .cont li{
  float:left;
  padding:0px 10px
}

.korp-observe .swiper3 {
  width: 100%;
  height: 100%;
  overflow:hidden;
}

.korp-observe .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.korp-observe .swiper-button-prev,
.korp-observe .swiper-container-rtl .swiper-button-next {
   background: url(../images/arrow_prev.png) no-repeat center center;
   width:24px;
   height:45px;
}
.korp-observe .swiper-button-next,
.korp-observe .swiper-container-rtl .swiper-button-prev {
   background: url(../images/arrow_next.png) no-repeat center center;
   width:24px;
   height:45px;
}

.korp-observe .swiper-pagination-bullet{
  width:10px;
  height:10px
}

.korp-observe .swiper-pagination-bullet-active{
  background: linear-gradient(-180deg, #39c4fa, #27aaf2);
}

.korp-observe .swiper-pagination-fraction,
.korp-observe .swiper-pagination-custom,
.korp-observe .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom:40px
}




/*** temperature ***/
.temperature{
  grid-row: span 1;
  grid-column-start: 5;
  grid-column-end: span 2;
}

.temperature .tit div{
  font-size:22px;
  font-weight:700;
}

.temperature .tit span{
  font-size:14px;
  display:block;
  line-height:22px;
  margin-top:3px
}


/* swiper 초기화*/
.temperature .swiper1{
   width:248px;
   position:relative;
   float:left;
   margin-top:13px;
   overflow:hidden;
   text-align:center
}

.temperature .time{
  font-size:13px;
  position:absolute;
  right:30px;
  top:40px
}

.temperature .tem{
  float:right;
  width:calc(100% - 280px);
  text-align:right;
  margin-left:20px
}

.temperature .tem .text{
  text-align:center;
  font-size:40px;
  font-weight:600;
  padding-left:60px;
  height:67px;
  background-image: url(../images/tem_icon.png);
  background-repeat: no-repeat;
  background-position: left center;
}

.temperature .tem .text span{
  display:block;
  margin-bottom:5px;
  font-size:13px;
  line-height:16px;
  font-weight:normal
}

.temperature .swiper-button-prev,
.temperature .swiper-container-rtl .swiper-button-next {
   background: url(../images/arrow_left.png) no-repeat center center;
   width:10px;
   height:16px;
   top:28px;
   left: 0;
}
.temperature .swiper-button-next,
.temperature .swiper-container-rtl .swiper-button-prev {
   background: url(../images/arrow_right.png) no-repeat center center;
   width:10px;
   height:16px;
   top:28px;
   right: 0;
}

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



/*** transport ***/
.transport{
  grid-row: span 3;
  grid-column-start: 5;
  grid-column-end: span 2;
}

.transport .cont{
  margin:auto;
  text-align:center;
}

.transport .cont li{
  width:100%;
  padding:10px 0
}

.transport .cont li:first-child{
  padding-top:0
}



/*** ocean ***/
.ocean{
  grid-column-start: 1;
  grid-column-end: span 3;
}

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

.ocean .info-table thead th {
  padding: 15px 11px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(-180deg, #27aaf2, #39c4fa);
  position: relative;
  vertical-align: middle;
}

.ocean .info-table thead th span{
  display:block;
  font-size:13px;
  margin-top:5px
}

.ocean .info-table td {
  padding: 16px 11px;
  font-size:15px;
  border: 1px solid #dde2e6;
  background:#fff;
  text-align:center;
}




/*** coastal ***/
.coastal{
  grid-column-start: 4;
  grid-column-end: span 3;
}



/*** service-menu ***/
.service-menu{
  grid-column-start: 1;
  grid-column-end: span 6;
  position:relative;
}

.service-menu{
  position:relative;
}

.service-menu h2{
  float:left;
  line-height:30px;
  width:168px;
  margin-right:50px
}

.service-menu h2 span{
  display:block;
  margin-top:25px;
  font-size:14px;
  line-height:19px
}

.service-menu .swiper2{
  float:left;
  width:calc(100% - 290px)
}

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

.service-menu li a{
  display:block;
  text-align:center;
  line-height:23px;
}

.service-menu li a::before{
  content:"";
  display:block;
  width:94px;
  height:94px;
  background:#fff;
  border:1px solid #e4ebef;
  border-radius:100%;
  margin: 0 auto 15px;
  position: relative;
  z-index: -1;
  transition: box-shadow 0.1s linear;
}

.service-menu li a:hover::before{
  content:"";
  background:#fff;
  box-shadow: 1px 1px 12px 1px rgb(0 0 0 / 7%);
  border: 5px solid transparent;
  border-radius: 100%;
  background-image:linear-gradient(#fff, #fff), linear-gradient(90deg, #e1e9ef, #f0f9ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.service-menu li a:hover{
  font-weight:bold
}

.service-menu li span{
  display:block;
  font-size:13px;
  line-height:19px;
  letter-spacing:-0.5px;
  color:#444
}

.service-menu li.s1 a::before{background:url(../images/service_icon01.png) no-repeat center} /* 적조정보 */
.service-menu li.s2 a::before{background:url(../images/service_icon02.png) no-repeat center} /* 어장모니터링 */
.service-menu li.s3 a::before{background:url(../images/service_icon03.png) no-repeat center} /* 해양위성정보 */
.service-menu li.s4 a::before{background:url(../images/service_icon04.png) no-repeat center} /* 이상해황 */
.service-menu li.s5 a::before{background:url(../images/service_icon05.png) no-repeat center} /* 해어황정보 */
.service-menu li.s6 a::before{background:url(../images/service_icon06.png) no-repeat center} /* 실시갆양환경어장정보시스템 */
.service-menu li.s7 a::before{background:url(../images/service_icon07.png) no-repeat center} /* 해파리속보 */
.service-menu li.s8 a::before{background:url(../images/service_icon08.png) no-repeat center} /* 패류독소정보 */
.service-menu li.s9 a::before{background:url(../images/service_icon09.png) no-repeat center} /* 정선해양관측 */
.service-menu li.s10 a::before{background:url(../images/service_icon10.png) no-repeat center} /* 연안정지관측 */

.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/arrow_left_sky.png) no-repeat center center
}

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






/*****************
sub
*****************/

/*** sub-content ***/
.sub-content{
  position:relative;
  border-top:0;
  background:#fff
}

.sub-content h2{
  font-size:37px;
  font-weight:600;
  text-align:center;
  /*border-top:1px solid #35bff8;
  border-bottom:1px solid #35bff8;
  background: url(../images/public_background.png) no-repeat left center;*/
  background-size:cover;
  padding:25px 0;
  border-bottom:3px solid #eaeef2;
}

.sub-content h2 span{
  display:block;
  margin-top:10px;
  color:#999;
  font-size:13px;
  font-weight:400;
  display: none
}

.sub-content h3{
  font-size:33px;
  font-weight:600;
  color:#133b67;
  padding-left:18px;
  position:relative;
  margin-bottom:20px;
}

.sub-content h3::after{
  content:"";
  width:12px;
  height:12px;
  border-radius:12px;
  background:#fff;
  border:4px solid #27aaf2;
  position:absolute;
  left:0;
  top:10px
}

.sub-content h4{
  font-size:26px;
  font-weight:600;
  color:#27aaf2;
  margin-bottom:20px
}

.sub-content h5{
  font-size:22px;
  font-weight:600;
  line-height:22px;
  padding-left:10px;
  position:relative;
  margin-bottom:15px
}

.sub-content h5::after{
  content:"";
  width:5px;
  height:23px;
  background: linear-gradient(-180deg, #39c4fa, #27aaf2);
  position:absolute;
  left:0;
  top:0
}

.sub-content .subarea{
  display: inline-block;
  width:100%;
  padding:30px 50px 50px 50px;
  font-size:18px
}

.sub-content .subarea article{
  display: inline-block;
  width:100%;
  padding:40px 0
}

.sub-content.kodc{
  background:#fff url(../images/history_bg.png) no-repeat right bottom
}



/*** location ***/
#location{
  position:absolute;
  top:30px;
  right:40px
}

#location li{
  display: inline-block;
  vertical-align:middle;
  position:relative;
  padding:0px 11px;
}

#location li::after{
  content:"";
  background-image: url(../images/arrow_right_sky.png);
  background-size:5px;
  width:5px;
  height:8px;
  display:inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -4px;
}

#location li.home::after{
  right:-2px
}
#location li:last-child::after{
  content:none
}

#location li a{
  font-size:15px;
  font-weight:300;
  padding:0px 5px;
  position:relative
}

#location li.home a{
  display: inline-block;
  vertical-align:middle;
  background:#fff url(../images/home_solid_icon.png) no-repeat center 7px;
  background-size:14px;
  border:1px solid #e5f2f6;
  width:30px;
  height:30px;
  border-radius:30px;
  padding:0;
  box-shadow: -2px 2px 4px rgb(0 0 0 / 4%);
  margin-right:5px;
}

#location li.home a::after{
  content:none
}

#location li:last-child a{
  color:#27aaf2;
  font-weight:500
}



/*** search-form ***/
.hd-search{
  margin-bottom:50px
}

.hd-search .search-btn{
  margin: 15px auto 0;
  text-align:center
}

.hd-search .search-btn.m{
  display:none
}

.hd-search .search-btn a{
  display:inline-block;
  line-height:50px;
  padding:0px 25px;
  margin:0px 2px;
  background:#133b67;
  border-radius:2px;
  color:#fff
}

.search-form{
  margin-bottom:20px
}

.search-form th{
  padding:8px;
  font-weight: 600;
  border: 1px solid #c4e0ec;
  border-right:0;
  background:#e8f8ff;
  font-size:17px;
  position: relative;
  vertical-align: middle;
}

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

.search-form td{
  padding:13px 8px;
  border: 1px solid #c4e0ec;
  border-left:0;
  background:#e8f8ff;
  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:48px;
  width:200px;
  font-size:16px;
  border:1px solid #c4e0ec
}

.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
}

.count{
  font-size:16px;
  margin-bottom:15px
}

.count strong{
  color:#27aaf2
}


.hd-cont .list-btn a{
  display:inline-block;
  line-height:50px;
  padding:0px 25px;
  margin:0px 2px;
  background:#133b67;
  border-radius:2px;
  color:#fff
}

.hd-cont .list-btn a.text{
  border: 1px solid #e2e6eb;
  background-color:#fff;
  box-shadow: 0px 0px 2px rgb(0 0 0 / 5%);
  color:#000;
  padding:0px 25px 0 40px
}

.hd-cont .list-btn a.down{
  border: 1px solid #e2e6eb;
  background-color:#fff;
  box-shadow: 0px 0px 2px rgb(0 0 0 / 5%);
  color:#000;
}

.hd-cont .list-btn a img{
  display: inline-block;
  vertical-align:middle;
  margin-top:-2px
}





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

.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 #133b67;
  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: #888;
  font-size: 18px;
  font-weight: 400;
  word-break: keep-all;
}

.sub-tab li.on a{
  color:#133b67;
  font-weight:600
}



/*** area-tab ***/
.area-tab{
  display: inline-block;
  width:100%;
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom: 1px solid #e3e7ed;
}

.area-tab ul{
  margin:auto;
  text-align:center;
}

.area-tab li{
  display: inline-block;
  margin-right:10px
}

.area-tab li:last-child{
  margin:0
}

.area-tab li a{
  display: inline-block;
  padding:0 35px;
  background:#eaeef2;
  color:#5d5d5d;
  line-height:54px;
  border-radius:54px
}

.area-tab li.on a{
  background: linear-gradient(-180deg, #39c4fa, #27aaf2);
  color:#fff
}



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

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

.info-table table {
  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 th {
  padding: 15px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(-180deg, #27aaf2, #39c4fa);
  border-right:1px solid rgba(255,255,255,.2);
  position: relative;
  vertical-align: middle;
}

.info-table th:last-of-type{
  border-right:0
}

.info-table th span{
  color:#fff;
  font-size:13px;
  display:block;
  font-weight:400;
  margin-top:5px
}

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

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

.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{
  line-height:24px;
  border-top: 2px solid #133b67;
}

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

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

.cont-table thead th {
  padding: 25px 15px;
  font-weight:600;
  color: #133b67;
  background: #fff;
  border: 1px solid #dde2e6;
  position: relative;
  vertical-align: middle;
}

.cont-table td {
  padding: 25px 15px;
  text-align: center;
  vertical-align:middle;
  border: 1px solid #dde2e6;
}

.cont-table tbody th {
  border: 1px solid #dde2e6;
  background: #f5fafe;
  color: #053863;
  vertical-align: middle;
}

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




/*** intro ***/
.intro{
  height:450px;
  background-image: url(../images/intro_img.png), url(../images/kodc_bg.png);
  background-position:100% center, 70% bottom;
  background-repeat:no-repeat;
}

.intro .area{
  width:44%;
  height:100%;
}

.intro .title{
  font-size:34px;
  line-height:38px;
  font-weight:700;
  margin-bottom:30px
}

.intro .title span{
  display:block;
  font-size:16px;
  font-weight:300;
  color:#999
}

.intro .cont{
  line-height:26px;
  font-weight:400;
  word-break: keep-all;
}




/*** history ***/
.history > ul{
  padding:40px 0 200px 0;
  display: inline-block;
  width:100%;
}

.history .year{
  position:relative;
  float:left;
  font-size:28px;
  color:#999;
  width:200px
}

.history .list::after{
  content:"";
  width:3px;
  height:100%;
  background:#bfc7c9;
  position:absolute;
  left:-20px;
  top:8px
}

.history .year strong{
  color:#133b67;
  font-size:35px;
}

.history .list{
  float:left;
  width:calc(100% - 200px);
  position:relative;
  padding-bottom:50px
}

.history > ul > li:last-child .list{
  padding-bottom:0
}

.history > ul > li:last-child .list::after{
  height:90%
}

.history .list li{
  display: inline-block;
  width:100%;
  position:relative;
  line-height:25px;
  margin-bottom:20px
}

.history .list li::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:10px;
  background: linear-gradient(-180deg, #39c4fa, #27aaf2);
  position:absolute;
  z-index:100;
  left: -23px;
  top:8px
}

.history .list li:last-child{
  margin:0
}

.history .list .date{
  float:left;
  width:110px;
  margin-right:15px;
  font-weight:600;
  color:#133b67
}

.history .list .con{
  float:left;
  width:calc(100% - 125px)
}

.history .list .con span{
  display: block;
  font-size:16px;
  color:#5d5d5d;
  font-weight:300
}




.abox{
  background:#f2f9fb;
  padding:40px;
  display: inline-block;
  width:100%;
  line-height:28px
}

.certi-list {
  width:100%;
  margin-top:30px;
}

.certi-list ul{
  text-align:center
}

.certi-list li{
  display: inline-block;
  background:#fefdfc;
  border:1px solid #dde2e6;
  margin:0px 10px
}




/*** quality ***/
.quality{
  background:#f5f6f9;
  padding:70px 0;
  border-radius:2px
}

.quality .box{
  max-width:1280px;
  margin:auto;
  background:#fff;
  border:1px solid #dde2e6;
  border-radius:2px;
  line-height:28px;
  padding:70px
}

.quality-line li{
  border-radius:2px;
  display: inline-block;
  width:100%;
  font-weight:500;
  height:70px;
  text-align:left;
  border: 1px solid #dde2e6;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  margin-bottom:5px;
  overflow: hidden;
}

.quality-line li:last-child{
  margin-bottom:0
}

.quality-line li .nb{
  margin-right:15px;
  height:100%;
  line-height:70px;
  display: inline-block;
  vertical-align:middle;
  background: linear-gradient(-180deg, #39c4fa, #27aaf2);
  color:#fff;
  width:50px;
  font-size:20px;
  text-align:center;
  font-weight:bold;
}

.quality-line li .text{
  display:inline-block;
  vertical-align:middle;
  width:calc(100% - 70px);
  padding: 20px 15px;
}

.quality .sign{
  display: inline-block;
  width:100%;
  text-align: right;
  margin-top:50px
}

.quality .sign span{
  display:block;
  font-size:16px;
  margin-bottom:5px
}




/*** outline ***/
.outline {
  margin:auto;
}

.outline li{
  float:left;
  width:31%;
  background-color:#fff;
  border:1px solid #dde2e6;
  border-radius:150px;
  height:150px;
  background-repeat: no-repeat;
  background-position: 45px center;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.04);
  position:relative;
  margin-right:3%
}

.outline li:first-child{
  background-image: url(../images/outline_icon01.png);
}

.outline li:nth-child(2){
  background-image: url(../images/outline_icon02.png);
}

.outline li:last-child{
  background-image: url(../images/outline_icon03.png);
  margin:0;
  padding-top:33px
}

.outline.ya li:last-child{
  background-image: url(../images/outline_icon04.png);
}

.outline li .abs{
  position: absolute;
  left:130px;
  top:50%;
  transform: translateY(-50%);
  padding-right:30px
}

.outline li .tit{
  font-weight:600;
  font-size:20px;
  margin-bottom:15px
}

.outline li .con{
  line-height:25px
}




/*** source ***/
.source > ul > li{
  border-bottom:1px solid #dde2e6;
  padding:24px 0
}

.source > ul > li:first-child{
  padding-top:0
}

.source > ul > li .tit{
  font-size:20px;
  font-weight:600;
  margin-bottom:15px
}

.source .list .tt{
  display: inline-block;
  vertical-align:middle;
  padding:0px 10px;
  background: linear-gradient(-90deg, #39c4fa, #27aaf2);
  color:#fff;
  line-height:30px;
  font-size:17px;
  font-weight:500;
  border-radius:30px;
  margin-right:10px
}

.source .list li{
  margin-bottom:8px
}

.source .list li:last-child{
  margin:0
}

.source span{
  font-size:16px;
  font-weight:400;
  color:#888
}




/*** expected ***/
.expected li{
  border-radius: 100px;
  padding: 15px;
  display: inline-block;
  width:100%;
  font-weight:500;
  text-align:left;
  border: 1px solid #dde2e6;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  margin-bottom:5px;
}

.expected li:last-child{
  margin-bottom:0
}

.expected li .nb{
  display: inline-block;
  vertical-align:middle;
  width:44px;
  height:44px;
  line-height:44px;
  border-radius:44px;
  color:#fff;
  text-align:center;
  font-weight:bold;
  background: linear-gradient(-180deg, #133b67, #004fa6);
  margin-right:15px
}

.expected li .text{
  display:inline-block;
  vertical-align:middle;
  line-height:22px;
  width:calc(100% - 60px)
}




/*** hd-cont ***/
.hd-cont {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-bottom: 10px
}

.hd-btn {
  display: inline-block;
  vertical-align: middle;
  line-height: 44px;
  background: #133b67;
  color: #fff;
  font-size:16px;
  padding: 0px 15px;
  border-radius: 2px
}

.hd-btn:hover{
  color:#fff
}

.hd-cont .count {
  margin:0;
  position:absolute;
  left:0;
  bottom:10px;
}




/*** board-list ***/
.board-list {
  position: relative;
}

.board-list table {
  border-top: 2px solid #133b67
}

.board-list thead th {
  padding: 19px 13px;
  font-weight: 500;
  color: #133b67;
  background: #fff;
  position: relative;
}

.board-list thead th::after {
  content: "";
  width: 100%;
  border-bottom: 1px solid #dde2e6;
  position: absolute;
  left: 0;
  bottom: 0
}

.board-list thead th:last-of-type {
  border-right: 0
}

.board-list td {
  padding:26px 13px;
  text-align: center;
  font-size:16px;
  vertical-align:middle;
  border-bottom: 1px solid #dde2e6;
}

.board-list tbody th {
  border: 1px solid #dde2e6;
  border-left: 0;
  background: #f5fafe;
  color: #053863;
  vertical-align: middle;
}

.board-list .subject {
  text-align: left;
  width: 60%;
  font-size:18px
}

.board-list .label {
  display:inline-block;
  padding:0px 5px;
  width:60px;
  color:#fff;
  background: linear-gradient(-75deg, #39c4fa, #27aaf2);
  line-height:26px;
  font-size:14px;
  border-radius:22px
}

.board-list .notice{
  background:#edf6fc
}

.board-btn {
  display: inline-block;
  position: absolute;
  bottom: -65px;
  right: 0
}

.board-btn a {
  display: inline-block;
  color:#5d5d5d;
  border: 1px solid #dde2e6;
  background: #fff;
  height: 50px;
  line-height: 50px;
  border-radius:2px;
  font-size: 16px;
  padding: 0px 15px;
  box-shadow: -2px 2px 4px rgb(0 0 0 / 4%);
}

.board-btn a.write {
  padding-left: 38px;
  background: #fff url(../images/pen_icon.png) no-repeat 15px center;
}



/*** board-view ***/
.board-view .subject {
  border-bottom: 2px solid #053863;
}

.board-view .subject .new{
  height:25px;
  width:25px;
  line-height:27px;
  font-size:15px;
  margin-top:-3px;
  margin-left:10px
}

.board-view .subject th {
  border: 0;
  background: none;
  text-align: left;
  padding: 10px 0 20px 0;
  font-weight: 600;
  font-size: 30px;
  line-height: 35px;
}

.board-view th {
  border: 1px solid #dde2e6;
  background: #f5fafe;
  color: #053863;
  font-weight: 500;
  vertical-align: middle;
  padding: 18px 13px;
  width: 120px
}

.board-view th label{
  font-weight: 500;
}

.board-view td {
  padding: 25px 20px;
  line-height:25px;
  font-weight: 500;
  border: 1px solid #dde2e6;
}

.board-view .contview{
  padding:25px
}

.board-view-list li {
  border: 1px solid #dde2e6;
  border-top: 0;
  padding: 25px 30px
}

.board-view-list .tit {
  display: inline-block;
  vertical-align: middle;
  font-weight:600;
  width: 55px
}

.board-view-list .con {
  display: inline-block;
  vertical-align: middle;
  width:calc(100% - 70px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-view.write textarea{
  width:100%;
  border:1px solid #dde2e6;
}

.board-view.write input{
  height:50px;
  border:1px solid #dde2e6;
}

.board-view.write .filebox .upload-name{
  width:80%;
  font-size:16px;
  height:50px
}

.board-view.write .filebox label{
  height:50px;
  line-height:50px;
  padding:0px 20px;
  background: linear-gradient(-180deg, #99a2ae, #afb8c2);
  color:#fff;
  border:0;
  font-size:16px;
  box-shadow:none
}

.board-view.write .form-list li{
  margin-bottom:10px
}

.board-view.write .form-list li:last-child{
  margin:0
}

.new {
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
  padding: 0;
  height: 20px;
  width: 20px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background: #ff3553;
  font-weight: 700;
  border-radius: 20px;
  font-size: 12px;
}




/*** btn-wrap ***/
.btn-wrap {
  margin-top: 30px;
  text-align: center;
}

.btn-wrap a.btn {
  display: inline-block;
  padding: 0px 25px;
  line-height: 50px;
  border-radius: 2px;
  font-size: 16px;
  border: 1px solid #dde2e6;
}

.btn-wrap a.bgsky {
  background: #133b67;
  border: 1px solid #133b67;
  color: #fff
}





/*** location-map ***/
.location-map iframe{
  width:100%;
  height:450px
}

.location-map section{
  margin-bottom:30px
}

.location-map section:last-child{
  margin:0
}

.location-map .link{
  display: inline-block;
  padding:0px 25px;
  background:#fff;
  border:1px solid #dde2e6;
  line-height:55px;
  border-radius:55px;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.04);
}

.location-map .link img{
  display: inline-block;
  margin-right:5px
}

.ntext{
  display: block;
  font-size:14px;
  line-height:21px;
  font-weight:400;
  color:#5d5d5d;
  padding:15px 0
}



/*** paging ***/
#paging {
  margin:30px auto 0;
  width: 100%;
  text-align: center;
  border-top: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;
  background: #fff;
  width:34px;
  height: 34px;
  line-height: 33px;
  font-size: 14px;
}

#paging li.on a {
  color: #fff;
  background: linear-gradient(-180deg, #27aaf2, #39c4fa);
  border: 1px solid #27aaf2;
  font-weight: bold;
}

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

#paging select{
  height:34px;
  line-height:34px;
  width:50px;
  font-size:13px;
  padding-left:7px
}



@media screen and (max-width:1479px) {
  .temperature .tem .text{padding-left:0; background-image:none}
  .service-menu .swiper2{overflow:hidden;}
  .service-menu .swiper-button-prev, .service-menu .swiper-button-next{display: block; margin-top:5px; border:1px solid #eaeef2}
  .service-menu .swiper-button-prev{left:30px; top:auto; bottom:20px}
  .service-menu .swiper-button-next{left:70px; top:auto; bottom:20px}
}

@media screen and (max-width:1199px) {
  #wrap{background:#fff}
  .main-content{display:block; grid-template-columns:none}
  .main-content section{grid-column-start:none; grid-column-end:none; grid-column:none; grid-row:none; width:100%}
  .main-content section .cont{display: inline-block; width:100%}
  .korp-observe{width:100%}
  .transport .cont li img{width:100% !important}
  .temperature .tem .text{background-image: url(../images/tem_icon.png);}

  .sub-content .subarea{padding:30px}
  .service-menu h2{float:none; width:100%}
  .service-menu h2 span{margin-top:15px}
  .service-menu .swiper2{float:none; width:100%;}
  .service-menu .swiper-button-prev{left:auto; right:70px; top:20px; bottom:auto}
  .service-menu .swiper-button-next{left:auto; right:30px; top:20px; bottom:auto}
  .intro{background-size:40%, 80%; background-position: 100% top, 0 bottom;}
  .intro .area{width:100%}
  .quality{padding:0; border:0}
  .quality .box{padding:50px 40px}
  .quality-line li{height:auto;}
  .quality-line li .text{padding:0; line-height:24px}

  .search-form table tr, .search-form table th, .search-form table td{display:block; text-align:center}
  .search-form th{border:0; padding:15px 0 0 0;}
  .search-form td{border:0; border-bottom:1px solid #c4e0ec}
  .search-form td select, .search-form td input{width:100%; margin:1px 0; background-position:96% center !important;}
  .hd-search .search-btn a{line-height:44px; font-size:15px; padding:0px 12px}
  .hd-search .search-btn{display:none}
  .hd-search .search-btn.m{display:block;}
  .hd-cont .list-btn a{line-height:44px; font-size:15px; padding:0px 12px}

  #location{position:relative; top:auto; right: auto; padding:10px 20px; border-bottom:1px solid #e3e7ed; background:#fafafa}
  #location li a{font-size:15px}
  #location li.home a{width:18px; height:18px; border:0; box-shadow:none; background-position: center !important; margin-right:5px}
}

@media screen and (max-width:767px) {
  .main-content section{padding:25px 20px; overflow-y: auto; overflow-x: hidden;}
  .main-content h2{font-size:19px; line-height:27px}
  .main-content .hdcon{position:relative; right: auto; top: auto; margin-bottom:20px}
  .temperature .time{position:relative; right:auto; top:auto; display: block; text-align:center;}
  .temperature .swiper1{float:none; width:100%; margin:15px 0}
  .temperature .tem{float:none; width:100%; margin:0; padding:15px 20px; background:#f5f6f9}
  .service-menu h2 span{margin-top:10px}
  .service-menu li a{font-size:14px; line-height:20px}

  .sub-content.kodc{background-size: 100%}
  .sub-content h2{padding:30px 0; font-size:32px; border-bottom:1px solid #e3e7ed}
  .sub-content h3{font-size:24px; margin-bottom:15px; padding-left:15px}
  .sub-content h3::after{width:10px; height:10px; border:3px solid #27aaf2; top:8px}
  .sub-content h4{font-size:22px}
  .sub-content h5{font-size:19px}
  .sub-content .subarea{padding:30px 20px 30px 20px}
  .sub-content .subarea article{padding:30px 0}
  .sub-cont{font-size:16px; line-height:22px}
  .sub-cont img{width:100%}
  .count{font-size:14px; margin-bottom:10px}
  #location li a{font-size:14px}

  .sub-tab{border-bottom:0}
  .sub-tab li{display:block; float:left; width:48%; margin:1%; border:1px solid #d7dce1}
  .sub-tab li a{height:42px; line-height:42px; font-size:15px}
  .sub-tab li.on{border:1px solid #133b67;}
  .sub-tab li.on::before{content:none;}
  .area-tab li a{font-size:16px; line-height:44px; height:44px; padding:0px 25px}
  .intro{height:auto;}
  .intro .cont{font-size:17px}
  .history > ul{padding-bottom:50px}
  .history .year{float:none; width:100%; margin-bottom:15px}
  .history .list{float:none; width:100%;}
  .history .list li{padding-left:20px; font-size:17px}
  .history .list .con span{font-size:14px; line-height:20px}
  .history .list li::before{left:0}
  .history .list::after{left:3px}
  .quality .box{padding:25px 20px; font-size:16px; line-height:23px}
  .quality-line li{box-shadow: none}
  .quality-line li .nb{width:30px; height:30px; line-height:30px; font-size:15px; vertical-align: top}
  .quality-line li .text{padding:10px 0}
  .quality .sign{margin-top:30px}
  .quality .sign span{font-size:14px}
  .quality .sign img{height:30px}
  .abox{padding:25px 20px; line-height:22px}
  .location-map .link{line-height:44px; height:44px; width:100%; margin-top:3px}
  .location-map .link img{width:auto;}
  .outline li{float:none; width:100%; margin:0 0 10px 0; height:120px; background-size:50px}
  .outline li .tit{font-size:18px; margin-bottom:10px}
  .outline li .con{line-height:22px}
  .source > ul > li{padding:18px 0}
  .source .list .tt{line-height:24px; font-size:14px}
  .expected li{font-size:16px; padding:10px}
  .cont-table thead th{padding:15px 10px}
  .cont-table td{padding:15px 10px}
  .info-table{font-size:15px}
  .info-table th{padding:10px}
  .info-table th span{margin:0}
  .info-table td{padding:12px}

  .korp-observe .swiper-button-prev,
  .korp-observe .swiper-container-rtl .swiper-button-next {
    background: url(../images/arrow_left.png) no-repeat center center; width: 10px; height: 16px; top:60%}
  .korp-observe .swiper-button-next,
  .korp-observe .swiper-container-rtl .swiper-button-prev {background: url(../images/arrow_right.png) no-repeat center center; width: 10px; height: 16px; top:60%}
  .korp-observe .swiper-pagination-bullet{width:8px; height:8px}
  .korp-observe .swiper-pagination-fraction,
  .korp-observe .swiper-pagination-custom,
  .korp-observe .swiper-container-horizontal > .swiper-pagination-bullets{bottom:10px}

  .search-form table {font-size:15px}
  .search-form th{font-size:15px}
  .search-form td select, .search-form td input{font-size:15px; height:40px; line-height:40px; background-position:96% center !important;}
  .hd-search .search-btn a{line-height:40px; font-size:14px; padding:0px 20px}
  .hd-cont .list-btn a{line-height:38px; font-size:14px; padding:0px 12px}
  .hd-cont select{width:65px; height:38px; line-height:38px; font-size:14px}
  .hd-cont input{width:calc(100% - 120px); line-height:38px; height:38px}
  .hd-cont .hd-btn{line-height:38px; padding:0; width:45px; text-align:center; font-size:15px}
  .hd-cont.ntc .r-cont{float:none; width:100%}
  .hd-cont.ntc .count{position:relative; display: inline-block; width:100%; bottom: auto; margin-bottom:10px}

  .board-list .subject, .board-list table col{width:70% !important; font-size:15px}
  .board-list .label{line-height:22px; font-size:13px; width:auto;}
  .board-list table thead{display:none}
  .board-list table tbody tr{border-bottom:1px solid #dde2e6}
  .board-list table tbody tr td{display:-webkit-box; padding:5px 8px; border-bottom:none; font-size:15px; line-height:21px}
  .board-list table tbody tr td:first-child,
  .board-list table tbody tr th:first-child{padding-top:16px}
  .board-list table tbody tr td:last-child,
  .board-list table tbody tr th:last-child{padding-bottom:15px}
  .board-list table tbody tr td:before{display:table; margin-right:12px; display: table-caption; width:65px; font-weight:500; font-size:15px; color:#053863; text-align:left; content:attr(data-label)}
  .board-btn{position:relative; bottom:auto; right:auto; margin-top:5px; display: block; text-align: right;}
  .board-btn a{height:40px; line-height:40px; font-size:14px; padding:0px 10px}
  .board-btn a.write{padding-left:33px; background-position: 12px center !important;}
  .new{width:17px; height:17px; line-height:17px; font-size:11px; margin-right:5px}

  .board-view table{font-size:15px}
  .board-view .tt{display:none}
  .board-view .subject th{font-size:20px; line-height:26px; padding:0 0 15px 0}
  .board-view td{padding:11px 13px}
  .board-view input, .board-view.write input, .board-view select{height:38px; width:100%; font-size:13px}
  .board-view .filebox input[type="file"]{width:1px}
  .board-view.write .filebox label{height:38px; line-height:38px; width:65px; font-size:13px; padding:0; text-align:center;}
  .board-view.write .filebox .upload-name{height:38px; font-size:13px; width:calc(100% - 71px);}
  .board-view-list li{padding:15px 20px}
  .board-view-list .tit{font-size:14px}
  .board-view-list .con{font-size:14px}
  .board-view .subject .new{margin-left:0}
  .board-view.write tr{display:block}
  .board-view.write th{display:block; width:100%; border-bottom: 0; padding:13px}
  .board-view.write td{display:block; width:100%; height:auto; padding:12px}
  .board-view.write textarea{height:100px}
  .board-view.write .contview{border-top:1px solid #dde2e6}

  .btn-wrap{margin-top:20px}
  .btn-wrap a.btn{line-height:40px; font-size:14px; padding:0px 20px}

  #paging ul{padding:0px 3px}
  #paging li.m{display:none}
  #paging li a{width:30px; height:30px; line-height:30px; font-size:13px}
  #paging select{height:30px; line-height:30px}
}