@charset "utf-8";

/*** top-visual ***/
.top-visual {
  position: relative;
}

.visual-wrap {
  width: 100%;
  height: 321px;
  position: relative;
  overflow: hidden;
}

.visual-wrap .visual {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: scale(1);
  animation: topscale 3s both;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
  padding-top: 75px;
  text-align: center;
  color: #fff;
}

/*정보공개*/
.visual-wrap.m1 .visual {background-image: url(../images/visual_bg_m1.png);}
/*국민참여*/
.visual-wrap.m2 .visual {background-image: url(../images/visual_bg_m2.png);}
/*알림뉴스*/
.visual-wrap.m3 .visual {background-image: url(../images/visual_bg_m3.png);}
/*예보속보*/
.visual-wrap.m4 .visual {background-image: url(../images/visual_bg_m4.png);}
/*기관소개*/
.visual-wrap.m5 .visual {background-image: url(../images/visual_bg_m5.png);}
/*자료실*/
.visual-wrap.m6 .visual {background-image: url(../images/visual_bg_m6.png);}
/*정책제도*/
.visual-wrap.m7 .visual {background-image: url(../images/visual_bg_m7.png);}
/*홈페이지도우미*/
.visual-wrap.m8 .visual {background-image: url(../images/visual_bg_m8.png);}
/*기타*/
.visual-wrap.cm .visual {background: linear-gradient(75deg, #256ef4, #3daafb)}

/*common*/
.visual-wrap.cm .visual::after {
  content: none
}

.visual-wrap .visual::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(50, 50, 50, .4));
  z-index: -1;
}

@keyframes topscale {
  0% {
    transform: scale(1.0)
  }

  100% {
    transform: scale(1.05)
  }
}

.top-visual .visual h2 {
  font-size: 37px;
  font-weight:600
}

.top-visual .visual span {
  display: block;
  line-height: 20px;
  margin-top: 20px;
  font-size: 15px;
}


/***location-bar***/
#location-bar {
  width: 1200px;
  height: 70px;
  background: #f5fafe;
  border: 1px solid #e2e7eb;
  border-radius: 15px 15px 0 0;
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#location-bar .home {
  display: block;
  background: #fff url(../images/home_solid_icon.png) no-repeat center center;
  height: 68px;
  width: 70px;
  border-radius: 15px 0 0 0;
  float: left;
  display:none;
}

#location-bar ul {
  float: left;
  width:65%;
  display: table;
  table-layout: fixed;
}

#location-bar li {
  float: left;
  width: 33.3%;
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

#location-bar > ul > li:first-child > a{
  border-radius: 15px 0 0 0;
}

#location-bar li .menu {
  display: block;
  line-height: 68px;
  padding-left: 15px;
  cursor: pointer;
  border-right: 1px solid #e2e7eb;
  background-color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width:100%
}

#location-bar li .menu:focus{
  outline-offset: -4px;
  outline: 0.4rem solid #256ef4 !important;
  box-shadow:none !important;
}

#location-bar li .menu::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #dbeefa url(../images/arrow_bottom_sky.png) no-repeat center center;
  background-size: 9px;
  position: absolute;
  right: 15px;
  top: 23px
}

#location-bar li.none .menu::after {
  content: none
}

#location-bar li.on .menu::after {
  background: #dbeefa url(../images/arrow_top_sky.png) no-repeat center center;
  background-size: 9px;
}

#location-bar .drop-list {
  width:100%;
  background-color:#fff;
  position: relative;
  z-index: 1;
  border: 1px solid #e2e7eb;
  border-top:0;
  display: none;
}

#location-bar .drop-list li {
  border: 0;
  float: none;
  width: 100%;
  display:block
}

#location-bar .drop-list li a {
  display: block;
  width: 100%;
  padding: 10px 20px;
  font-size: 15px;
  line-height: 1.5;
  position: relative;
  z-index: 3
}

#location-bar .drop-list li.active a {
  font-weight: bold
}

/*location*/
#location{
  display:none;
}

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

#location li::after{
  content:"";
  background-image: url(../images/sml_arrow_right.png);
  background-size:5px;
  width:5px;
  height:8px;
  display:inline-block;
  margin-left:4px;
  opacity:0.8
}

#location li:last-child::after{
  content:none
}

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

#location li a::after{
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background: #dbeefa url(../images/arrow_bottom_sky.png) no-repeat center center;
  background-size: 7px;
  position: absolute;
  right:0;
  top: 0;
}

#location li.on a::after{
  background: #dbeefa url(../images/arrow_top_sky.png) no-repeat center center;
  background-size: 7px;
}

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

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

#location li:last-child a{
  color:#256ef4;
  margin:0 0 0 4px
}

#location .drop-menu{
  position:absolute;
  z-index:1;
  right:0;
  width:100px;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 7%);
  border-radius:5px;
  background:#fff;
  padding:7px;
  border:1px solid #e5f2f6;
  display:none
}

#location .drop-menu li{
  display:block;
  text-align:left
}

#location .drop-menu li::after, #location .drop-menu li a::after{
  content:none
}

#location .drop-menu li a{
  color:#000;
  display:block;
  margin:0;
  padding:0;
  width:100%;
  line-height:25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#location .drop-menu li.active a{
  font-weight:bold;
}


/*** sub-content ***/
.sub-content {
  max-width: 1200px;
  margin: auto;
  display: flow-root;
  line-height: 25px;
  padding: 30px 0 70px 0;
  position: relative;
}

.sub-area {
  max-width: 1200px;
  margin: auto;
}

.sub-content.wide {
  max-width: 100%
}

.sub-content h4 {
  font-size: 26px;
  font-weight: bold;
  color: #256ef4;
  letter-spacing: -0.5px;
  margin-bottom: 15px
}

.sub-content h4 span {
  display: inline-block;
  font-size: 17px;
  color: #5d5d5d;
  position: relative;
  font-weight: 500;
  padding: 0px 15px;
}

.sub-content h4 span::after {
  content: "";
  width: 2px;
  height: 14px;
  background: #e2e7eb;
  position: absolute;
  left: 5px;
  top: 5px
}

.sub-content h5 {
  font-size: 22px;
  font-weight: 500;
  position: relative;
  letter-spacing: -0.5px;
  padding-left: 10px;
  margin-bottom: 15px
}

.sub-content h5::before {
  content: "";
  position: absolute;
  left: 0;
  top:0;
  width: 4px;
  height: 100%;
  background: linear-gradient(60deg, #2589f1, #3ba9fb);
}

.sub-content h5 span {
  font-size: 15px;
  color: #5d5d5d
}

.sub-content h6 {
  font-size: 19px;
  font-weight: 500;
  color:#063a74;
  position: relative;
  padding-left: 15px;
  margin-bottom:10px
}

.sub-content h6::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 3px solid #256ef4;
  border-radius: 10px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 42%;
  transform: translateY(-42%);
}

.sub-content h6 span{
  font-size: 15px;
}

.sub-content section {
  display:inline-block;
  width:100%;
  margin-bottom: 70px
}

.sub-content section:last-child {
  margin: 0
}

.sub-content section.line{
  border-bottom:1px solid #e2e7eb;
  padding:30px 0;
  margin-bottom:30px
}

.sub-content article {
  display:inline-block;
  width:100%;
  padding: 25px 0;
  position:relative;
}

.sub-content section > article:nth-child(2) {
  padding-top:10px
}

.sub-content article:last-child {
  padding-bottom: 0
}

.sub-title{
  position: relative;
}

.sub-title h3 {
  max-width: 1200px;
  margin: auto;
  border-bottom: 2px solid #e2e7eb;
  /*margin: 50px auto 0;*/
  padding-bottom: 15px;
  position: relative;
  font-size: 30px;
  font-weight: 700
}

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


/*** share-cont ***/
.share-cont {
  position: relative;
  max-width: 1200px;
  margin: auto;
}

.share-cont .area {
  position: absolute;
  right: 20px;
  bottom: 5px;
  z-index: 10;
  line-height:normal;
}

.share-cont a {
  display: inline-block;
  border: 1px solid #e2e7eb;
  border-radius: 15px;
  background: #fff;
  width: 43px;
  height: 43px;
  line-height: 43px;
  background-position: center center;
  background-repeat: no-repeat;
}

.share-cont a.print {
  background-image: url(../images/print_icon.png)
}

.share-cont a.print:hover {
  background-image: url(../images/print_on_icon.png)
}

.share-cont a.bookmark {
  background-image: url(../images/bookmark_icon.png)
}

.share-cont a.bookmark:hover {
  background-image: url(../images/bookmark_on_icon.png)
}

.share-cont a.share {
  background-image: url(../images/share_icon.png)
}

.share-cont a.share:hover {
  background-image: url(../images/share_on_icon.png)
}

.share-cont .sns {
  display: inline-block;
  position:relative;
}

.share-cont a.facebook{
  background-image: url(../images/sns_facebook.png);
  background-color:#1977f3;
  border:1px solid #1977f3
}

.share-cont a.twitter{
  background-image: url(../images/sns_twitter.png);
  background-color:#1d9bf0;
  border:1px solid #1d9bf0
}

.share-cont a.blog{
  background-image: url(../images/sns_naverblog.png);
  background-color:#2db400;
  border:1px solid #2db400
}

.share-cont a.kakao{
  background-image: url(../images/sns_kakaostory.png);
  background-color:#ffcb05;
  border:1px solid #ffcb05;
}

.share-cont a.band{
  background-image: url(../images/sns_naverband.png);
  background-color:#2db400;
  border:1px solid #2db400
}

.share-cont .modal{
  position: absolute;
  background: none;
  top: auto;
}

.share-cont .modal-content {
  left: -75px;
  top:140px;
  width:280px;
  height:auto;
  overflow-y: unset;
}

.share-cont .modal-content .head{
  font-weight: 500;
  font-size: 15px;
  position: relative;
  box-shadow:none;
  background:none;
}

.share-cont .modal-content .cont{
  padding:0 20px 20px
}

.share-cont .close{
  border:0;
  border-radius:0;
  background:0;
  width:auto;
  height:auto;
  line-height:normal;
}

.share-cont .url{
  margin-top:10px
}

.share-cont .url .form-tit{
  font-size:1.35rem;
  margin-bottom:5px
}

.share-cont .url input{
  height:36px;
  width:calc(100% - 50px);
  font-size:14px
}

.share-cont .url button{
  height:36px;
  width:40px
}

/*
.share-cont .url .btn{
  display:inline-block;
  vertical-align:middle;
  width:22%;
  height:36px;
  line-height:36px;
  border-radius:3px;
  font-size:14px;
  text-align:center;
  color:#5d5d5d;
  box-shadow: 0px 0px 5px rgb(0 0 0 / 5%);
}
*/

/*** greeting-wrap ***/
.wide .greeting-wrap{
  max-width:1200px;
  margin:0 auto 70px;
}

.greeting-wrap{
  display: inline-block;
  width:100%
}

.greeting-wrap .profile {
  float: left;
  /*width: 400px;
  height: 500px;*/
  background: #f5fafe;
  position: relative;
  width: 500px;
  /*margin-top: 153px;*/
}

.greeting-wrap .profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius:20px
}

.greeting-wrap .profile .greeting_seaweed {
  height: 626.17px;
  object-fit: fill;
}

.greeting-wrap .nbox {
  width: 180px;
  padding:30px 20px;
  background: linear-gradient(-75deg, #256ef4, #3daafb);
  color: #fff;
  text-align: center;
  border-radius: 15px;
  position: absolute;
  right: 0;
  bottom: -30px;
  font-size: 25px;
  font-weight: bold;
}

.greeting-wrap.lab .nbox{
  width:250px
}

.greeting-wrap .nbox span {
  display: block;
  font-size: 15px;
  margin-bottom: 5px
}

.greeting-wrap .em {
  font-size: 35px;
  line-height: 47px;
  letter-spacing: -0.5px;
  height: 100%;
  word-break: keep-all;
  margin-bottom:30px;
  padding-bottom: 30px;
  position: relative;
}

.greeting-wrap .em::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(-75deg, #256ef4, #08bcc7);
}

.greeting-wrap.lab .em::after{
  background:url(../images/dot.png) repeat;
  height: 5px;
}

.greeting-wrap .con {
  float: right;
  width: calc(100% - 550px);
}

.greeting-wrap .con span{
  font-size:14px;
  display:block;
}

.greeting-wrap .con p{
  margin-bottom:20px
}

.greeting-wrap .con .em p{
  margin:0;
  font-weight: 300;
}


/*** history-wrap ***/
.history-wrap .tit {
  position: relative;
  width:100%;
  height:200px;
  border-radius:20px;
  overflow:hidden;
  padding:70px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom:70px;
}

.history-wrap .tit::after{
  content:"National Institute of Fisheries Science";
  font-size:15px;
  color:#fff;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:70px;
  font-weight:400
}

.history-wrap .tit::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0));
}

.history-wrap #ht1 .tit{background-image:url(../images/history_tit_img01.png)}
.history-wrap #ht2 .tit{background-image:url(../images/history_tit_img02.png)}
.history-wrap #ht3 .tit{background-image:url(../images/history_tit_img03.png)}
.history-wrap #ht4 .tit{background-image:url(../images/history_tit_img04.png)}
.history-wrap #ht5 .tit{background-image:url(../images/history_tit_img05.png)}
.history-wrap #tab-1 .tit{background-image:url(../images/history_tit_img02.png)}
.history-wrap #tab-2 .tit{background-image:url(../images/history_tit_img01.png)}

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

.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 .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 li {
  display: inline-block;
  width:100%;
  position: relative;
  margin-bottom: 70px
}

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

.history-wrap .history .cont li .area::after{
  content:"";
  width:12px;
  height:12px;
  background:#fff;
  border:3px solid #256ef4;
  border-radius:12px;
  position:absolute;
  z-index: 10;
  top: 5px;
}

.history-wrap .history .cont li .area::before{
  content:"";
  background:#dbeefa;
  width:25px;
  height:25px;
  border-radius:25px;
  position:absolute;
  top:-1px;
}

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

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

.history-wrap .history .cont li .con {
  word-break: keep-all;
  margin-bottom:10px
}

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

.history-wrap .history .cont li .pic{
  width:65%;
  display:inline-block;
  margin-top:20px;
}

.history-wrap .history .cont li .pic img{
  width:100%;
  border-radius:15px;
  overflow:hidden;
}

.history-wrap .history .cont li .pic span{
  display:block;
  font-size:13px;
  line-height:18px;
  color:#5d5d5d;
  margin-top:5px
}

.history-wrap .history .cont li .con span{
  display:block;
  font-size:15px;
  line-height:21px;
  margin-top:3px;
  color:#5d5d5d;
}


/*** profile-list ***/
.profile-list article{
  display: flow-root;
  float:left;
  width:48.5%;
  height:850px;
  background:#f5fafe;
  border-radius:15px;
  padding:50px;
  margin:0;
  margin-right:3%
}

.profile-list article:last-child{
  margin-right:0;
}

.profile-list h5{
  margin-bottom:30px
}

.profile-list .list li{
  margin-bottom:20px
}

.profile-list .list li:last-child{
  margin-bottom:0
}

.profile-list .list .tt{
  position:relative;
  font-size:20px;
  font-weight:500;
  color:#000;
  margin-bottom:10px;
}


/*** cont-table ***/
.cont-table{
  display:inline-block;
  width:100%
}

.cont-table table {
  font-size: 16px;
  border-top: 2px solid #053863;
  width:100%
}

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

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

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

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

.cont-table thead th {
  padding: 13px 10px;
  font-weight: bold;
  border-top: 1px solid #dde2e6;
  border-right: 1px solid #dde2e6;
  color: #053863;
  background:#fff;
  position: relative;
  vertical-align: middle;
}

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

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

.cont-table td {
  padding: 13px 11px;
  font-weight: bold;
  border: 1px solid #dde2e6;
  background:#fff;
  border-left: 0;
  font-weight: normal;
  vertical-align: middle;
}

.cont-table td:last-of-type {
  border-right: 0
}

.cont-table2024 td {
  font-size:12px !important; padding:13px 0;
}

.cont-table2024 tbody .b-sky {
  border-top:2px solid #053863;
  border-bottom:2px solid #053863;
  padding:13px 0;
  font-weight:bold;
}

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

.cont-table .r-line{
  border-right: 1px solid #dde2e6 !important;
}

table span {
  font-size: 14px;
  line-height:20px;
  /*color: #555*/
}

table .underline{
  font-size: inherit;
}

/*table list*/
.t-list li {
  position: relative;
  padding-left: 7px;
}

.t-list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 2px;
  height: 2px;
  background: #5d5d5d;
}

.t-list li>.list {
  margin-top: 4px
}

.t-list li>.list span {
  display: block;
  line-height: 19px
}


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

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

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

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

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

.info-table table {
  font-size: 16px;
  border-top:1px solid #dde2e6;
  width:100%
}

.info-table th{
  vertical-align:middle;
}

.info-table thead th {
  padding: 13px 11px;
  height:52px;
  font-weight: bold;
  background: #f5fafe;
  border: 1px solid #dde2e6;
  border-bottom:0;
  position: relative;
}

.info-table tbody th {
  border: 1px solid #dde2e6;
  background:#fff;
  font-weight:bold;
  padding: 13px 11px;
}

.info-table tbody th:first-of-type{
  border-top:0
}

.info-table td {
  padding: 13px 11px;
  font-weight: bold;
  height:52px;
  border: 1px solid #dde2e6;
  background:#fff;
  border-top:0;
  font-weight: normal;
  vertical-align:middle;
}


/*** cir-list ***/
.cir-list li {
  position: relative;
  padding: 19px 0 19px 13px;
  border-bottom: 1px solid #dde2e6
}

.cir-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: #256ef4;
  position: absolute;
  left: 0;
  top: 27px
}

.cir-list li span {
  color: #555;
  font-size: 14px
}

.cir-list li span.underline{
  color:inherit
}

.cir-list li span.pre {
  display: block;
}

.cir-list .tt{
  font-weight:500;
  font-size:18px;
  margin-bottom:8px
}

.cir-list.api li{
  padding:17px 0
}

.cir-list.api li::before{
  content:none
}

.cir-list.api .file{
  text-decoration: underline;
  font-size:16px
}

.cir-list.api li .form-list li{
  border:0;
  padding:0
}



/*** box-list ***/
.box-list li{
  border-radius:15px;
  border: 1px solid #e5f2f6;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 3%);
  padding:30px;
  margin:0 2% 2% 0;
  float:left;
  width:48.9%;
  height:87px;
  position:relative;
}

.box-list li:nth-child(2n){
  margin-right:0
}

.box-list li::before {
  content: "";
  color: #256ef4;
  font-size: 14px;
  background:#fff;
  border:5px solid #e2f3fe;
  padding:0px 7px;
  border-radius:50px;
  line-height:20px;
  position: absolute;
  right: 20px;
  top: -10px;
  font-weight:500
}

.box-list li:first-child::before {content: "POINT 1"}
.box-list li:nth-child(2)::before {content: "POINT 2"}
.box-list li:nth-child(3)::before {content: "POINT 3"}
.box-list li:nth-child(4)::before {content: "POINT 4"}
.box-list li:nth-child(5)::before {content: "POINT 5"}
.box-list li:nth-child(6)::before {content: "POINT 6"}
.box-list li:nth-child(7)::before {content: "POINT 7"}
.box-list li:nth-child(8)::before {content: "POINT 8"}
.box-list li:nth-child(9)::before {content: "POINT 9"}
.box-list li:nth-child(10)::before {content: " POINT10"}


/*** sub-tab ***/
.sub-tab {
  width: 100%;
  display: inline-table;
  margin-bottom: 50px;
  position:relative;
}

.sub-tab > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}

.sub-tab > ul > li {
  background:#fff;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  border: 1px solid #e2e7eb;
  border-radius:4px;
  position: relative;
  text-align: center;
  transition: all 0.4s;
  width:24.6%
}
/*
.sub-tab > ul > li::after {
  content: "";
  width: 0%;
  height: 100%;
  top: 0;
  position: absolute;
  left: 0;
  transition: all 0.4s;
}
*/
.sub-tab > ul > li:hover {
  background: #dbeefa;
}

.sub-tab > ul > li.on{
  background:#256ef4;
  border:1px solid #256ef4;
  border-right:0;
  border-top:0
}

.sub-tab > ul > li > a {
  display: block;
  padding: 16px 0;
  color: #555;
  word-break: keep-all;
}

.sub-tab > ul > li.on > a {
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
}
/*
.sub-tab.dv > ul{
  table-layout:auto;
}

.sub-tab.dv > ul > li {
  float:left;
  width:25%;
}
*/

/*** area-tab ***/
.area-tab {
  display: flow-root;
  width: 100%;
  border-bottom: 1px solid #256ef4;
  margin-bottom: 50px
}

.area-tab li {
  float: left;
}

.area-tab li a {
  display: inline-block;
  padding: 0px 20px;
  line-height: 50px;
  font-size: 16px;
  color: #5d5d5d;
  background: #fff;
  border: 1px solid #e2e7eb;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  position: relative;
}

.area-tab li a:focus{
  border: 1px dashed #999 !important;
  outline: inherit !important;
}

.area-tab li:last-child a {
  border-right: 1px solid #e2e7eb;
}

.area-tab li.on a {
  border: 1px solid #256ef4;
  background: #fff;
  border-bottom: 0;
  color: #256ef4;
  font-weight: 500
}

.area-tab li.on a::after {
  content: "";
  width: 100%;
  height: 3px;
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;
}


/*** move-tab ***/
.move-tab{
  display:inline-block;
  width:100%;
  position:relative;
  padding-bottom:20px;
  margin-bottom:30px
}

.move-tab::after{
  content:"";
  width:100%;
  height:5px;
  background: url(../images/dot.png) repeat;
  position:absolute;
  bottom:0;
  left:0
}

.move-tab li{
  float:left;
  margin:0 5px 5px 0;
  position:relative;
}

.move-tab li::after{
  content:"";
  width:5px;
  height:5px;
  border-radius:5px;
  background:#256ef4;
  position:absolute;
  right:5px;
  top:0
}

.move-tab li a{
  display:block;
  color:#5d5d5d;
  padding:0px 15px;
  font-size:15px;
}

.move-tab li a:hover{
  color:#256ef4;
  font-weight:500
}


/*** item-list ***/
.item-list .item{
  width:100%;
  border-radius:20px;
  overflow:hidden;
  display: flex;
  flex: 1;
  margin-bottom:20px
}

.item-list .item:last-child{
  margin-bottom:0
}

.item-list .tit{
  position:relative;
  width:15%;
  background:#fff;
  color:#fff;
  font-size:21px;
  font-weight:bold;
}

.item-list .tit img{
  display:block;
  height:44px;
  margin:auto;
  margin-bottom:10px
}


/* 관리담당관 */
.item-list.adm .item:first-child .tit{background:#002d52}
.item-list.adm .item:nth-child(2) .tit{background:#014b89}
.item-list.adm .item:nth-child(3) .tit{background:#0066d5}
.item-list.adm .item:nth-child(4) .tit{background:#256ef4}
.item-list.adm .item:nth-child(5) .tit{background:#014b89}
.item-list.adm .item:last-child .tit{background:#002d52}

.item-list .list{
  width:85%;
  height:100%;
  background:#f5fafe;
  border-left:0;
  padding:20px;
}

.item-list .blank .list{
  padding:50px 20px
}

.item-list .list ul{
  width:100%
}

.item-list .list li{
  float:left;
  width:19%;
  margin:0.5%
}

.item-list .list li a{
  display:inline-block;
  height:50px;
  position:relative;
  border-radius:5px;
  background-color:#fff;
  background-image:url(../images/window_icon.png);
  background-repeat:no-repeat;
  background-position:92% 48%;
  border:1px solid #e2e7eb;
  width:100%;
  font-size:16px;
  text-align:left;
}

.item-list .list li a .md{
  text-align:left;
}

.item-list .list li a span{
  font-size:13px;
  line-height:normal;
  color:#97b1c4;
}


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

.board-list table {
  font-size: 16px;
  border-top: 2px solid #053863;
  width:100%
}

.board-list thead th {
  padding: 15px 11px;
  font-weight: 500;
  color: #053863;
  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: 18px 11px;
  text-align: center;
  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%
}

.board-list .label {
  display:inline-block;
  padding:0px 10px;
  width:50px;
  color:#fff;
  background: linear-gradient(-75deg, #256ef4, #3daafb);
  line-height:26px;
  font-size:14px;
  border-radius:22px
}

/*
.board-list .reply .subject{
  background-image:url(../images/reply_icon.png);
  background-repeat: no-repeat;
  background-position:15px center;
  padding-left:23px
}
*/

.board-list .reply .subject img {
  width:8px;
  height:8px
}

.board-list .reply .cir{
  display:inline-block;
  vertical-align:middle;
  width:20px;
  height:20px;
  line-height:20px;
  border-radius:20px;
  font-size:11px;
  text-align:center;
  color:#256ef4;
  font-weight:bold;
  background:#dbeefa;
  margin-right:5px
}

.board-list .date, .board-list .no, .board-list .hits {
  font-size: 14px;
  color: #5d5d5d;
}

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

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

.board-btn a {
  display: inline-block;
  color:#5d5d5d;
  border: 1px solid #dde2e6;
  border-radius: 5px;
  background: #fff;
  height: 37px;
  line-height: 37px;
  font-size: 14px;
  padding: 0px 15px;
}

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

.nuri img{
  display:inline-block;
  vertical-align:middle;
  height:20px
}


/*** board-view ***/
.board-view table {
  font-size: 16px;
}

.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: 20px 0 30px 0;
  font-weight: 600;
  font-size: 30px;
  line-height: 35px;
}

.board-view .subject.qna th{
  background:url(../images/view_question_icon.png) no-repeat left 23px;
  padding-left:30px
}

.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: 18px 13px;
  height: 62px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid #dde2e6;
}

.board-view pre{
  white-space: break-spaces !important;
}

.board-view .contview {
  height: 200px;
  font-weight: normal;
  border-top:0;
  white-space: normal;
}

.board-view .contview .question{
  border-bottom:1px solid #dde2e6;
  padding:20px 0
}

.board-view .contview .question .con{
  font-weight:500;
  font-size:19px;
  line-height:27px
}

.board-view .contview .answer{
  padding:20px 0
}

.board-view .contview .tit{
  display:inline-block;
  vertical-align:top;
  width:60px;
  margin-right:10px;
  border-radius:60px;
  line-height:30px;
  text-align:center;
  color:#256ef4;
  font-weight:500
}

.board-view .contview .con{
  display:inline-block;
  vertical-align:top;
  width:calc(100% - 80px)
}

.board-view-list {
  font-size: 16px;
}

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

.board-view-list li:last-child {
  border-radius: 0 0 15px 15px;
}

.board-view-list .tit {
  display: inline-block;
  vertical-align: middle;
  font-weight: 500;
  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;
  padding:20px*/
}

.board-view.write .plus-btn{
  display: inline-block;
  vertical-align:middle;
  background-color: #fff;
  border: 1px solid #dde2e6;
  width: 40px;
  line-height: 36px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  font-size: 25px;
  font-weight:300;
  color: #5d5d5d;
  box-shadow: -2px 2px 4px rgb(0 0 0 / 6%);
}

.board-view.write .plus-btn:focus{
  outline: inherit !important;
  border: 1px dashed #999 !important;
}



/*** board-toggle ***/
.board-toggle{
   width:100%;
   overflow:hidden;
   border-top:2px solid #053863;
}

.board-toggle li{
   border-bottom:1px solid #dde2e6;
}

.board-toggle li a{
   display:block;
   overflow:hidden;
   padding: 18px 11px;
}

.board-toggle li a:hover{
   background:#eff5fb;
}

.board-toggle li a div{
   display:inline-block;
   vertical-align:middle;
   font-size:16px
}

.board-toggle li a .num{
   width:50px;
   font-size:15px;
   line-height:normal;
   color:#5d5d5d;
   text-align:center;
}

.board-toggle li a .sel{
   font-weight:bold;
   text-align:center;
   width:120px;
}

.board-toggle .text{
  width:calc(100% - 70px)
}

.board-toggle .tit{
   background:url(../images/question_icon.png) no-repeat left center;
   width:calc(100% - 130px);
   padding-left:30px
}

.board-toggle .answer{
   background:#f5fafe url(../images/answer_icon.png) no-repeat 30px 35px;
   border-top:1px solid #dde2e6;
   padding:30px 30px 30px 65px;
   font-size:16px;
   text-align:left;
   color:#5d5d5d;
   display:none;
}

.board-toggle li a{
   background: url(../images/arrow_bottom_icon.png) no-repeat 98% center;
   transform:translate(0,0);
   transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.board-toggle li a:hover{
   transform:translate(20px,0);
}

.board-toggle li a.on{
   background: url(../images/arrow_top_icon.png) no-repeat 98% center;
}

.board-toggle .tit{
   background:url(../images/question_icon.png) no-repeat left center;
   padding-left:30px
}

.board-toggle .answer{
   background:#f3f8fe url(../images/answer_icon.png) no-repeat 30px 38px;
   border-top:1px solid #dfe4ea;
   display:none;
   padding:30px 30px 30px 68px;
   text-align:left;
}


/*** photo-list ***/
.photo-list {
  border-top:2px solid #053863
}

.photo-list li a{
  width:100%;
  display:block;
  border-bottom:1px solid #dde2e6;
  padding:25px 0
}

.photo-list .ymd{
  display: inline-block;
  vertical-align:middle;
  width:120px;
  text-align:center
}

.photo-list .ymd.mobile{
  display:none
}

.photo-list .ymd span{
  display:block;
  font-size:15px;
  color:#5d5d5d
}

.photo-list .ymd .date{
  font-size:45px;
  margin-bottom:10px;
  color:#000;
  font-weight:bold;
}

.photo-list .thumbnail{
  display: inline-block;
  vertical-align:middle;
  width:200px;
  height:134px;
  border-radius:10px;
  overflow:hidden;
}

.photo-list .thumbnail img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.photo-list .text{
  display: inline-block;
  vertical-align:middle;
  margin-left:2.5%;
  width:calc(100% - 360px)
}

.photo-list .text>.nb{
  margin-bottom:15px;
}

.photo-list .text>.tit{
  font-size:21px;
  font-weight:500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom:10px
}

.photo-list .text>.con{
  font-size:15px;
  line-height:21px;
  color:#5d5d5d;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: left;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


/*** photo-gallery ***/
.photo-gallery{
  display: flow-root;
}

.photo-gallery li{
  float:left;
  width:23.5%;
  border-radius:10px;
  overflow:hidden;
  margin:0 2% 2% 0;
  border:1px solid #e2e7eb
}

.photo-gallery li:nth-child(4n){
  margin-right:0
}

.photo-gallery .tit{
  padding:15px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #f5fafe;
}

.photo-gallery .thumbnail{
  display: inline-block;
  vertical-align:middle;
  width:100%;
  height:180px;
}

.photo-gallery .thumbnail img{
  width:100%;
  height:100%;
  object-fit: cover;
}


/*** photo-data ***/
.photo-data{
  display: flow-root;
}

.photo-data li{
  float:left;
  width:18.4%;
  margin:0 2% 2.5% 0
}

.photo-data li:nth-child(5n){
  margin-right:0
}

.photo-data li a{
  display: block;
  height:100%;
}

.photo-data .thumbnail{
  width:100%;
  height:145px;
  border:1px solid #e2e7eb;
  border-bottom:0;
  border-radius:15px 15px 0 0;
  overflow:hidden;
}

.photo-data .thumbnail img{
  width:100%;
  height:100%;
  object-fit: contain;
}

.photo-data .text{
  width:100%;
  padding:20px;
  position:relative;
  font-size: 14px;
  background: #fff;
  border:1px solid #e2e7eb;
  border-top:0;
  border-radius:0 0 15px 15px
}

.photo-data .text span{
  display:block;
  font-weight:300;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/*** viewer-gallery ***/
.viewer-gallery{
  display: flow-root;
}

.viewer-gallery li{
  float:left;
  width:48%;
  height:400px;
  border-bottom: 1px solid #053863;
  border-top: 2px solid #053863;
  margin:0 4% 4% 0
}

.viewer-gallery li:nth-child(2n){
  margin-right:0
}

.viewer-gallery li a{
  display: block;
  height:100%;
  transition: box-shadow 0.1s linear;
}

.viewer-gallery li a:hover{
  box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.07), 20px 20px 20px rgba(0, 0, 0, 0.07);
}

.viewer-gallery .thumbnail{
  float:left;
  width:50%;
  height:100%;
  border-right: 1px solid #dde2e6;
}

.viewer-gallery .thumbnail img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.viewer-gallery .text{
  float:left;
  width:50%;
  padding:25% 25px 25px 25px;
  position:relative;
}

.viewer-gallery .date{
  padding:20px;
  display:inline-block;
  background:#053863;
  color:#fff;
  text-align:center;
  position:absolute;
  right:0;
  top:0
}

.viewer-gallery .date span{
  display:block
}

.viewer-gallery .date>.month{
  font-weight:bold;
  font-size:28px
}

.viewer-gallery .tit{
  margin-top:20px;
  font-size:23px;
  font-weight:bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-gallery .stit{
  display:block;
  color:#97b1c4;
  font-size:13px;
  font-weight:300;
  margin-top:5px
}


/*** video-grid 격자형 ***/
.video-grid {
  display: flow-root;
}

.video-grid li {
  float: left;
  width: 48%;
  margin: 0 4% 4% 0;
  border-radius: 15px;
  overflow: hidden;
  position:relative;
  border: 1px solid #dde2e6;
}

.video-grid li:nth-child(2n){
  margin-right:0
}

.video-grid li a{
  display:block;
}

.video-grid li a:focus{
  border: 1px dashed #999 !important;
  outline: inherit !important;
}

.video-grid .tit {
  padding: 15px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #f5fafe;
}

.video-grid .date{
  padding:13px  20px;
  display: inline-block;
  background: #053863;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 0;
  bottom:44px
}

.video-grid .date span{
  display:block;
  font-size:14px;
  line-height:normal;
}

.video-grid .date>.month{
  font-weight:bold;
  font-size:24px
}

.video-grid .thumbnail{
  width:100%;
  height:300px;
  border-bottom: 1px solid #dde2e6;
}

.video-grid .thumbnail img{
  width:100%;
  height:100%;
  object-fit: cover;
}


/*** video-list ***/
.video-list{
  border-top: 2px solid #053863;
}

.video-list li a{
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #dde2e6;
  padding: 25px 0;
}

.video-list .thumbnail{
  width:240px;
  height:183px;
  border-radius:15px;
  overflow:hidden;
  float:left;
}

.video-list .thumbnail img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.video-list .text{
  float:right;
  width:calc(100% - 280px)
}

.video-list .title{
  font-size:21px;
  font-weight:500;
  margin-bottom:10px
}

.video-list .abox{
  background:none;
  padding:0
}

.video-list .abox li{
  margin-bottom:0
}

.video-list .info{
  margin-top:20px;
  padding-top:20px;
  border-top:4px dotted #e2e7eb
}

.video-list .info span{
  display:inline-block;
  padding:0px 10px 0px 20px;
  font-size:15px;
}

.video-list .info .year{
  background:url(../images/app_calendar_icon.png) no-repeat left center
}

.video-list .info .time{
  background:url(../images/app_time_icon.png) no-repeat left center
}

.video-list .info .source{
  background:url(../images/app_source_icon.png) no-repeat left center
}


/*** video-frame ***/
.video-frame{
  position: relative;
  width:100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video-frame iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*** survey ***/
.survey{
   position: relative;
   margin:auto;
   background:#fff;
   padding:20px 0;
   line-height:24px
}

.modal-content .survey{
  padding:20px 0 0
}

.survey h2{
   font-size:24px;
   font-weight:bold;
   color:#053863;
   margin-bottom:15px;
   line-height:1;
}

.survey h3{
   font-size:20px;
   font-weight:600;
   margin-bottom:10px
}

.survey .info{
   display:block;
   margin:0;
   overflow:hidden;
   background: #f5fafe;
   border: 1px solid #e2e7eb;
   border-bottom:0;
   padding:20px;
   width:100%;
   border-radius:8px 8px 0 0
}

.survey .info span{
  display:inline-block;
  margin-right:20px
}

.survey .info strong{
  margin-right:8px
}

.survey .view{
   margin-bottom:40px;
   padding:30px;
   border:1px solid #e2e7eb;
   border-radius:0 0 8px 8px
}

.survey .progress{
   display:inline-block;
   vertical-align:middle;
   margin-right:10px;
   border-radius:28px;
   line-height:28px;
   font-size:16px;
   background: #f5fafe;
   border: 1px solid #e2e7eb;
   color:#5d5d5d;
   width:80px;
   text-align:center;
}

.survey .progress.on{
   background:#fff;
   border:1px solid #256ef4;
   color:#256ef4
}
.survey .title-box{
   padding:40px 30px;
   background: #f5fafe;
   border: 3px solid #e2e7eb;
}

.survey .title-box .tit{
   font-weight:500;
   font-size:29px;
   margin-bottom:15px;
   padding-bottom:15px;
   border-bottom:1px solid #e2e7eb
}

.survey .terms-box{
   margin:40px 0;
   width:100%
}

.survey .terms-box .inner{
   background: #fff;
   border: 1px solid #dfe4ea;
   padding:20px;
   height:150px;
   overflow-y: auto;
   border-radius:8px;
   line-height:23px;
   color:#5d5d5d;
}

.survey .terms-box .agree{
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.survey .terms-box .agree ul{
   display:inline-block;
   vertical-align:middle;
}

.survey .terms-box .agree ul li{
   float:left;
   margin-right:15px;
   font-size:14px
}

.survey .terms-box .agree ul li:last-child{
   margin-right:0
}

.survey .terms-box .agree span{
   display:inline-block;
   vertical-align:middle;
   font-weight:600;
   margin-right:10px
}

.survey .list-section{
   border-top:2px solid #dfe4ea;
   padding:50px 0
}

.survey .list-section.last{
  padding-bottom:0
}

.survey .list-section:last-child{
  padding-bottom:0
}

.survey .list-section section{
   margin-bottom:40px
}

.survey .list-section section:last-child{
  margin-bottom:0
}

.survey .qtit{
   background: url(../images/question_icon.png) no-repeat left center;
   padding-left:23px;
   margin-bottom:20px;
   font-size:20px;
}

.survey .qtit strong{
   color:#f11846
}

.survey .abox{
   background: #f5fafe;
   border: 1px solid #e2e7eb;
   padding:25px;
   margin:0;
   overflow:hidden;
}

.survey .abox li{
   float:left;
   margin:0 15px 0 0
}

.survey .abox li:last-child{
   margin-right:0
}

.survey .abox li::before{
  content:none
}

.survey .abox label{
  margin-right:5px
}

.survey .i-radio .ico{
  padding:0
}

.survey .btn-wrap{
  margin-top:0
}



/*** ci-wrap ***/
.ci-wrap{
  display: inline-block;
  width:100%
}

.ci-wrap .bg{
  background:#fff url(../images/grid_bg.png) repeat left top;
  height:100%;
  width:100%;
  position:relative;
}

.ci-wrap .ci-m{
  height:280px;
  border:3px solid #e2e7eb;
  border-radius:20px;
  overflow:hidden;
  margin-bottom:30px
}

.ci-wrap .ci-m .file-download, .ci-wrap .ci-m button{
  position:absolute;
  right:30px;
  top:30px
}

.ci-wrap li{
  float:left;
  width:49%;
  margin:0 2% 2% 0;
  border:3px solid #e2e7eb;
  border-radius:20px;
  overflow:hidden;
}

.ci-wrap li:nth-child(2n){
  margin-right:0
}

.ci-wrap .type .list{
  float:left;
  width:50%;
  margin-bottom:10px
}

.ci-wrap .tbox{
  position:relative;
  border:2px solid #e2e7eb;
  border-right:0;
  height:200px;
  overflow:hidden;
}

.ci-wrap .list:nth-child(odd) .tbox{
  border-radius:20px 0 0 20px;
}

.ci-wrap .list:nth-child(even) .tbox{
  border-radius:0 20px 20px 0;
}

.ci-wrap .list:nth-child(2n) .tbox{
  border-right:2px solid #e2e7eb;
}

.ci-wrap.light .tbox{
  border:1px solid #e2e7eb;
  border-right:0;
}

.ci-wrap.light .list:nth-child(2n) .tbox{
  border-right:1px solid #e2e7eb;
}

.ci-wrap .cbox{
  position:relative;
  border-bottom:1px solid #e2e7eb;
  height:180px
}

.ci-wrap .down{
  background:#f5fafe;
  padding:15px;
  text-align:center
}


/*** nb span ***/
.nb span{
  font-size:15px;
  padding:0px 10px;
  position:relative;
  font-weight:300
}

.nb span::after{
  content:"";
  border-left:1px solid #ccc;
  height:13px;
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
}

.nb span:first-child{
  padding-left:0
}

.nb span:first-child::after{
  content:none
}


/*** p-banner ***/
.p-banner{
  border-radius:15px;
  overflow:hidden;
  padding:100px 30px;
  text-align:center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom:30px;
  position:relative;
}

.p-banner .title{
  color:#fff;
  text-align:center;
  margin:0;
  font-size:33px;
  position:relative;
  z-index:1
}

.p-banner .title .t-green{
  color:#40dddf
}

.p-banner .title span{
  display:block;
  padding:0;
  color:#fff;
  letter-spacing:-0.5px;
  font-weight:normal;
  font-size:17px;
  margin-top:15px
}

.p-banner .title span::after{
  content:none
}

.p-banner::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0));
}

.p-banner::before{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:70px;
  background:#fff;
  z-index:1
}


/*** river ***/
.river{
  background-image: url(../images/river_bg.jpg);
  border-radius:20px;
  color:#fff;
  padding:70px 60px;
  margin-bottom:30px
}

.river.sea{
  background-image: url(../images/sea_bg.jpg);
  background-position: center bottom;
  background-size: cover;
}

.river .text{
  position:relative;
  /* z-index:1; */
  font-size:30px;
  line-height:37px;
  word-break:keep-all;
  text-align:center;
}

.river .btn{
  width:100%;
  margin-top:10px;
  text-align:center;
}

.river .btn a{
  border-radius: 44px;
  border:0;
  font-weight:500
}


/*** anniversary ***/
.anniversary .p-banner{
  background-image: url(../images/pbanner_100bg.jpg);
}

.anniversary .sub-explan{
  padding:45px;
}

.anniversary .sub-explan li{
  text-align:left;
  margin-bottom:15px
}

.anniversary .sub-explan li:last-child{
  margin-bottom:0
}

.anniversary .sub-explan .tit{
  display:inline-block;
  vertical-align:top;
  font-size:19px;
  color:#063a74;
  width:12%;
  margin:0;
}

.anniversary .sub-explan .dot-text,
.anniversary .sub-explan .text{
  width:87%;
  display:inline-block;
  font-size:17px;
  color:#000
}

.anniversary .sub-explan .text .dot-text{
  width:100%;
  display:block;
}

.anniversary .sub-explan .dot-text::after{
  top:7px;
  transform:none
}

.anniversary .sub-explan .text .dot-text em{
  display:block;
  font-size:16px;
  color:#5d5d5d
}

.anniversary .file-download.view{
  font-size:19px;
  line-height:55px;
  background:#256ef4 url(../images/window_icon_w.png) no-repeat 25px center;
  border:1px solid #256ef4;
  color:#fff;
  padding: 0 25px 0 43px;
}


/*** opennuri ***/
.open-nuri {
  background: rgba(1,145,245,.1);
  padding: 20px;
  border-radius: 8px;
  max-width: 1200px;
  margin: 0 auto 70px
}

.open-nuri .mark {
  display: inline-block;
  vertical-align:middle;
  width:120px;
  margin-right: 20px
}

.open-nuri .mark img {
  width:100%;
}

.open-nuri .text {
  display: inline-block;
  width: calc(100% - 150px);
  vertical-align: middle;
  font-size: 15px;
  line-height:20px;
  color: #5d5d5d;
}

.board-view .open-nuri {
  max-width: 100%;
  margin: 30px auto 0
}


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

.btn-wrap a.btn {
  display: inline-block;
  padding: 0px 20px;
  line-height: 44px;
  border-radius: 7px;
  font-size: 15px;
  border: 1px solid #dde2e6;
}

.btn-wrap a.btn:focus{
  border: 1px dashed #999 !important;
  outline: inherit !important;
}

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

.sub-explan {
  padding: 45px 45px 45px 180px;
  background-image: url(../images/explan_dec2.png), url(../images/explan_dec1.png);
  background-repeat: no-repeat;
  background-position: 20px 100px, 65px -50px;
  font-size: 16px;
  position: relative;
  word-break: break-all;
  overflow: hidden;
  margin-bottom: 40px;
  z-index:1;
}

.sub-explan::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-image: url(../images/d_line_pattern.png) 30 stretch;
  width: 100%;
  height: 100%;
  z-index:-1
}

.sub-explan::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 55px;
  width: 74px;
  height: 68px;
  margin: auto 0;
}

.sub-explan.exp1::before {background: url(../images/explan_bg_01.png) no-repeat;}/*자발적공개목록*/
.sub-explan.exp2::before {background: url(../images/explan_bg_02.png) no-repeat; width:80px}/*정보공개안내*/
.sub-explan.exp3::before {background: url(../images/explan_bg_03.png) no-repeat;}/*우리원공공데이터*/
.sub-explan.exp4::before {background: url(../images/explan_bg_04.png) no-repeat;}/*원장일정*/
.sub-explan.exp5::before {background: url(../images/explan_bg_05.png) no-repeat;}/*조직도*/
.sub-explan.exp6::before {background: url(../images/explan_bg_06.png) no-repeat;}/*역대원장*/
.sub-explan.exp7::before {background: url(../images/explan_bg_07.png) no-repeat; width:80px}/*수산과학선 공동활용*/
.sub-explan.exp8::before {background: url(../images/explan_bg_08.png) no-repeat;}/*춤추는고래*/
.sub-explan.exp9::before {background: url(../images/explan_bg_09.png) no-repeat;}/*자유의견방*/
.sub-explan.exp10::before {background: url(../images/explan_bg_10.png) no-repeat;}/*공지사항*/
.sub-explan.exp11::before {background: url(../images/explan_bg_11.png) no-repeat;}/*수산현장기술지원*/
.sub-explan.exp12::before {background: url(../images/explan_bg_12.png) no-repeat;}/*법령정보*/
.sub-explan.exp13::before {background: url(../images/explan_bg_13.png) no-repeat;}/*민원안내*/
.sub-explan.exp14::before {background: url(../images/explan_bg_14.png) no-repeat;}/*오시는길*/
.sub-explan.exp15::before {background: url(../images/explan_bg_15.png) no-repeat;}/*우리나라고유종*/
.sub-explan.exp16::before {background: url(../images/explan_bg_16.png) no-repeat;}/*국제공인시험기관*/
.sub-explan.exp17::before {background: url(../images/explan_bg_17.png) no-repeat;}/*연근해 국내동향*/
.sub-explan.exp18::before {background: url(../images/explan_bg_18.png) no-repeat;}/*연근해 해외동향*/
.sub-explan.exp19::before {background: url(../images/explan_bg_19.png) no-repeat;}/*온실가스 인벤토리*/
.sub-explan.exp20::before {background: url(../images/explan_bg_20.png) no-repeat;}/*LCA*/
.sub-explan.exp21::before {background: url(../images/explan_bg_21.png) no-repeat;}/*기술문의*/
.sub-explan.exp22::before {background: url(../images/explan_bg_22.png) no-repeat;}/*LCA 연구 사례*/
.sub-explan.exp23::before {background: url(../images/explan_bg_23.png) no-repeat;}/*LCA DB구축*/
.sub-explan.exp26::before {background: url(../images/explan_bg_26.png) no-repeat;}/*구독*/
.sub-explan.exp27::before {background: url(../images/explan_bg_27.png) no-repeat;}/*우수기술*/

.sub-explan .tit {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px
}

.sub-explan .address {
  padding-left: 28px;
  background: url(../images/exp_address_icon.png) no-repeat left center;
  font-size: 16px
}

.sub-explan .call {
  padding-left: 28px;
  background: url(../images/exp_call_icon.png) no-repeat left center;
  font-size: 16px
}

.sub-explan .fax {
  padding-left: 28px;
  background: url(../images/exp_fax_icon.png) no-repeat left center;
  font-size: 16px
}


/*** app-surface ***/
.app-surface {
  background: linear-gradient(-75deg, #256ef4, #3daafb);
  border-radius: 35px;
  overflow: hidden;
  padding: 45px 45px 45px 400px;
  position: relative;
  z-index:1
}

/*
.app-surface::before{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-image: url(../images/d_line_pattern.png) 30 stretch;
  width: 100%;
  height:100%
}
*/
.app-surface::after {
  content: "";
  position: absolute;
  width: 330px;
  height: 244px;
  left: 35px;
  top:50%;
  transform:translateY(-50%);
  z-index: 4;
}

.app-surface.a1::after{
  background: url(../images/app_bg_01.png) no-repeat;
}

.app-surface.a2::after{
  background: url(../images/app_bg_02.png) no-repeat;
}

.app-surface.a3::after{
  background: url(../images/app_bg_03.png) no-repeat;
}

.app-surface.a4::after{
  background: url(../images/app_bg_04.png) no-repeat;
}

.app-surface .box {
  border-radius: 35px;
  padding: 50px;
  background: #fff;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
  position: relative;
  z-index: 2;
}

.app-surface .box p strong {
  font-weight: 500;
  position: relative;
  z-index: 1
}

.app-surface .box p strong::before {
  content: "";
  display: block;
  width: 99%;
  height: 10px;
  position: absolute;
  z-index: -1;
  left: 5px;
  bottom: 0px;
  background: #fff4e2;
}

.app-surface .t-cont {
  font-size: 21px;
  line-height: 30px;
  font-weight: bold;
  padding-bottom: 20px;
  border-bottom: 2px dotted #d2d8de;
  margin-bottom: 20px;
}

.app-surface .info {
  margin-top: 20px;
}

.app-surface .info a {
  display: inline-block;
  width: 100%;
  text-align: right;
  padding: 0 25px;
  height:56px;
  line-height: 56px;
  background: #fff;
  border: 1px solid #e2e7eb;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  margin:3px 0;
  border-radius:5px;
}

.app-surface .info a:focus{
  outline: 0.2rem solid #256ef4;
  box-shadow:0 0 0 0.4rem #256ef4;
  transition: outline 0s, box-shadow 0s; 
}

.app-surface .info a.tel {
  background: #fff url(../images/app_call_icon.png) no-repeat 25px center
}

.app-surface .info a.home {
  background: #fff url(../images/app_home_icon.png) no-repeat 25px center
}
/*
.app-surface .info a:last-child {
  border-top: 0;
}
*/
.app-surface .info a span {
  margin-right: 5px;
  font-size: 15px;
  color: #5d5d5d;
}

.app-surface .info a strong {
  color: #ff6407;
  font-size: 22px
}

.app-surface .info a.home strong {
  font-size: 17px;
  color: #000
}

.app-surface .btn{
  display:inline-block;
  width:100%;
  margin-top:20px
}

.app-surface .btn a,
.app-surface .btn button{
  float:left;
  margin-right:5px;
}

.app-surface .btn img{
  height: 16px;
  margin-top: -4px;
  margin-right: 5px;
}


/*** lca ***/
.lca{
  margin:auto;
  display: inline-block;
  width:100%
}

.lca .framework{
  float:left;
  width:50%;
  position:relative;
}
/*
.lca .framework::after{
  content:"";
  background-image:url(../images/dot_vertical.png);
  width:5px;
  height:100%;
  position:absolute;
  right:-20px;
  top:0
}
*/
.lca .framework::before{
  content:"";
  width:35px;
  height:35px;
  background-image: url(../images/both_arrow_lg.png);
  position:absolute;
  z-index:1;
  top:55%;
  transform: translateY(-55%);
  right:-55px;
}

.lca .framework .tit{
  font-weight:bold;
  font-size:25px;
  text-align:center;
  margin-bottom:30px
}

.lca .framework ul{
  float:left;
  width:49%;
  margin-right:8%
}

.lca .framework li{
  line-height:60px;
  border-radius:15px;
  width:100%;
  text-align:center;
  color:#fff;
  border:6px solid #e5f2f6;
  margin-bottom:40px;
  position:relative;
}

.lca .framework li::after{
  content:"";
  width:25px;
  height:25px;
  background-image: url(../images/both_arrow.png);
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  right:-40px;
}

.lca .framework li::before{
  content:"";
  width:25px;
  height:25px;
  background-image: url(../images/both_arrow_vertical.png);
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-38px;
}

.lca .framework li:last-child::before{
  content:none
}

.lca .framework li:first-child{
  background:#256ef4
}

.lca .framework li:nth-child(2){
  background:#0066d5
}

.lca .framework li:last-child{
  background:#002d52;
  margin:0
}

.lca .framework .re{
  float:right;
  width:43%;
  height:296px;
  background:#fff;
  border:4px solid #0cc7df;
  border-radius:10px;
  position:relative;
}

.lca .framework .re em{
  font-weight: bold;
  font-size:19px
}

.lca .directapp{
  float:right;
  width:44%;
  background: linear-gradient(-75deg, #08beda, #00adc3);
  border-radius:15px;
  padding:30px;
  height:296px;
  margin-top:55px;
  color:#fff
}

.lca .directapp .tit{
  font-weight:bold;
  font-size:25px;
  margin-bottom:20px
}

.lca .directapp .dot-text{
  color:#fff;
  font-size:17px;
}

.lca .directapp .dot-text::after{
  border-color:#fff;
  background:none
}


/*** cpl-process ***/
.cpl-process li{
  display:inline-block;
  vertical-align:middle;
  width:160px;
  height:160px;
  padding:20px;
  font-size:16px;
  line-height:20px;
  border-radius:160px;
  text-align:center;
  border:1px solid #e5f2f6;
  background:#fff;
  padding-top:95px;
  margin:0 35px 15px 0;
  position:relative;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
  background-position: center 40px;
  background-repeat: no-repeat;
}

.cpl-process li::after{
  content:"";
  background-image: url(../images/arrow_right_sky.png);
  background-repeat: no-repeat;
  background-position: 7px center;
  text-indent: -99999px;
  overflow: hidden;
  width:13px;
  height:13px;
  position:absolute;
  right:-21px;
  top:50%;
  transform: translateY(-50%);
}

.cpl-process li:last-child::after{
  content:none
}

.cpl-process li.c1{background-image:url(../images/cpl_icon01.png)}
.cpl-process li.c2{background-image:url(../images/cpl_icon02.png)}
.cpl-process li.c3{background-image:url(../images/cpl_icon03.png)}
.cpl-process li.c4{background-image:url(../images/cpl_icon04.png)}
.cpl-process li.c5{background-image:url(../images/cpl_icon05.png)}
.cpl-process li.c6{background-image:url(../images/cpl_icon06.png)}

.cpl-process li:last-child{
  margin-right:0
}


/*** lab-menu ***/
.lab-menu{
  width:100%;
  display: flow-root;
  padding:60px 60px 70px 60px;
  background:#f5fafe url(../images/visual_bg.png) no-repeat bottom center;
  background-size:cover;
  position:relative;
  overflow:hidden;
  border-radius:20px;
  margin-bottom:30px;
}

.lab-menu .text{
  float:left;
  width:43%;
  word-break: keep-all;
  font-weight:bold;
}

.lab-menu .text .loca{
  font-size:19px;
  font-weight:500;
  background:url(../images/loca_icon.png) no-repeat left center;
  line-height:normal;
  padding:5px 0 5px 50px;
  margin-bottom:10px
}

.lab-menu .text .about{
  font-size:40px;
  line-height:44px;
  font-weight:600;
  position:relative;
  padding-bottom:40px;
  margin-bottom:40px
}

.lab-menu .text .about::after{
  content:"";
  position:absolute;
  background:url(../images/dot_cir.png) repeat-x center center;
  width:48px;
  height:8px;
  bottom:0;
  left:0
}

.lab-menu .text span{
  display:block;
  font-size:15px;
  line-height:21px;
}

.lab-menu ul{
  display: table;
  table-layout: fixed;
  width: 52%;
  float:right;
  margin-top:20px
}

.lab-menu li{
  display: table-cell;
  vertical-align: middle;
  border:1px solid #e2e7eb;
  border-right:0;
}

.lab-menu li:first-child{
  border-radius:20px 0 0 20px
}

.lab-menu li:last-child{
  border-right:1px solid #e2e7eb;
  border-radius:0 20px 20px 0
}

.lab-menu li a{
  display:block;
  text-align:center;
  height:145px;
  color:#888;;
  position:relative;
  padding-top:100px
}

.lab-menu li a:focus{
  outline: inherit !important;
  border: 1px dashed #999 !important;
}

.lab-menu li.on a{
  color:#000;
  text-decoration: underline;
  font-weight:bold;
}
/*
.lab-menu li.on a::after{
  content:"";
  width:100%;
  height:3px;
  background:#256ef4;
  position:absolute;
  left:0;
  bottom:0
}
*/
.lab-menu li.lm1{background: #fff url(../images/lab_icon01_off.png) no-repeat center 25px}
.lab-menu li.on.lm1{background: #fff url(../images/lab_icon01.png) no-repeat center 25px}
.lab-menu li.lm2{background: #fff url(../images/lab_icon02_off.png) no-repeat center 25px}
.lab-menu li.on.lm2{background: #fff url(../images/lab_icon02.png) no-repeat center 25px}
.lab-menu li.lm3{background: #fff url(../images/lab_icon03_off.png) no-repeat center 25px}
.lab-menu li.on.lm3{background: #fff url(../images/lab_icon03.png) no-repeat center 25px}
.lab-menu li.lm4{background: #fff url(../images/lab_icon04_off.png) no-repeat center 25px}
.lab-menu li.on.lm4{background: #fff url(../images/lab_icon04.png) no-repeat center 25px}
.lab-menu li.whale{background: #fff url(../images/lab_icon05_off.png) no-repeat center 20px}
.lab-menu li.on.whale{background: #fff url(../images/lab_icon05.png) no-repeat center 20px}
.lab-menu li.whale a{padding-top:90px}

.lab-menu .odd li{
  line-height:20px
}

.lab-menu li span{
  display: block;
  font-size:14px
}



/*** abox ***/
.abox {
  padding: 25px;
  display: inline-block;
  width: 100%;
  background: #eef2f7;
  margin-top: 5px;
  font-size: 16px;
  border-radius:8px;
  position:relative;
}

.abox.yscroll{
  height:180px;
  overflow-y:auto;
}

.abox .tt {
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 5px
}

.abox li {
  position: relative;
  padding: 0;
  border: 0;
  padding-left: 10px;
  margin-bottom:5px
}

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

.abox li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  height: 2px;
  width: 5px;
  background: #aaa
}

.abox em {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  background: #256ef4;
  font-size: 13px;
  color: #fff;
  line-height: 19px;
  border-radius: 3px;
  text-align: center;
  padding: 0px 5px
}


/*** d-line ***/
.d-line{
  padding:25px 0;
  position:relative;
  width:50%;
  font-size:21px;
  margin:auto;
  text-align:center;
}

.d-line::after{
  content:"";
  background-image:url(../images/dot.png);
  height:5px;
  width:100%;
  position:absolute;
  left:0;
  top:0
}


/*** app-process ***/
.app-process {
  text-align: center;
  position: relative;
}
/*
.app-process::before{
  content:"";
  width:100%;
  height:1px;
  background:#256ef4;
  position:absolute;
  top:50%;
  transform: translateX(-50%);
}
*/
.app-process li {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid #256ef4;
  border-radius: 200px;
  background: #fff;
  margin: 0px 1%;
  position: relative;
  overflow: hidden;
}

.app-process li::before {
  content: "";
  color: #dbeefa;
  font-size: 100px;
  font-weight: 900;
  position: absolute;
  right: 0;
  bottom: 50px;
}

.app-process li:first-child::before {content: "1"}
.app-process li:nth-child(2)::before {content: "2"}
.app-process li:nth-child(3)::before {content: "3"}
.app-process li:nth-child(4)::before {content: "4"}

.app-process li .tit {
  font-weight: 500;
  line-height:22px;
  margin-bottom:5px;
  color: #256ef4
}

.app-process li .con {
  font-size: 15px;
  line-height:18px;
  color: #5d5d5d
}

.app-process li .md{
  padding:0px 15px;
  word-break:keep-all;
}


/*** contact-box ***/
.contact-box {
  border-radius: 15px;
  border: 1px solid #e2e7eb;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  height: 80px;
  overflow: hidden;
}

.contact-box .tit {
  width: 25%;
  height: 100%;
  float: left;
  position: relative;
  text-align: center;
  background: #dbeefa;
}

.contact-box .con {
  float: left;
  width: 75%;
  height: 100%;
}

.contact-box .con em {
  font-weight: 500;
  margin-right: 10px
}

.contact-box ul {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.contact-box li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
}

.contact-box li::after {
  content: "";
  border-left: 2px dotted #256ef4;
  height: 22px;
  position: absolute;
  right: 0;
  top: 35%;
  transform: translateX(-35%);
}

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


/*** calendar ***/
.calendar-wrap .calendar {
  margin-top: 30px
}

.calendar-wrap .calendar table {
  width: 100%;
  /*min-width:780px*/
}

.calendar-wrap .calendar th:first-of-type,
.calendar-wrap .calendar td:first-of-type {
  color: #f51242
}

.calendar-wrap .calendar th:last-of-type,
.calendar-wrap .calendar td:last-of-type {
  color: #256ef4
}

.calendar-wrap .calendar table th {
  line-height: 50px;
  color: #888;
  border-bottom: 1px solid #e2e7eb;
  width: 14.28%;
  font-size: 14px;
}

.calendar-wrap .calendar table td {
  height: 120px;
  padding: 15px;
  background: #fff;
  border: 1px solid #e2e7eb;
  border-left: 0;
  position: relative;
}

.calendar-wrap .calendar table td.on {
  background: #f5fafe;
  border-top: 3px solid #256ef4;
}

.calendar-wrap .calendar table td::after {
  content: none
}

.calendar-wrap .calendar table td:last-of-type {
  border-right: 0
}

.calendar-wrap .calendar table td:hover {
  background: #eef2f7;
}

.calendar-wrap .date {
  font-size: 15px;
  display: block;
  line-height: normal;
  margin-bottom:2px
}

.calendar-wrap .schedule {
  display: grid;
}

.calendar-wrap .schedule .list-wrap{
  display: grid;
  position:relative;
}

.calendar-wrap .schedule .list {
  font-size: 12px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  position: relative;
  line-height: 20px;
  padding-left: 8px;
  cursor: pointer;
}

.calendar-wrap .schedule .list::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: #256ef4;
  position: absolute;
  left: 0;
  top: 8px
}

.calendar-wrap .schedule .list >.time {
  font-size: 11px;
  display: inline-block;
  margin-right: 5px
}

.calendar-wrap .detail .tit {
  font-weight: 500;
  margin-bottom: 10px
}

.calendar-wrap .detail .scd {
  font-size: 13px;
  color: #5d5d5d
}

.calendar-wrap .detail .list {
  margin-bottom: 15px;
  padding-bottom: 15px;
  display: inline-block;
  width:100%;
  border-bottom: 1px solid #e2e7eb;
}

.calendar-wrap .detail .list:last-child {
  margin-bottom: 0
}

.calendar-wrap .rest strong {
  color: #256ef4
}

.calendar-select {
  position: relative;
  width: 250px;
  margin: auto;
}

.calendar-select .seldate {
  margin: auto;
  width: 57%;
  background: url(../images/arrow_triangle_bottom.png) no-repeat 99% center;
  cursor: pointer;
  display:block;
}

.calendar-select .seldate.on {
  background: url(../images/arrow_triangle_up.png) no-repeat 99% center;
}

.calendar-select .selbox{
  position:relative;
}

.calendar-select .selbox .close{
  background: url(../images/close_sml_btn.png) no-repeat center center;
  display: block;
  position:absolute;
  z-index:1;
  right:10px;
  top:10px;
  width:11px;
  height:11px;
  background-size:11px
}

.calendar-select .selbox select {
  height: 35px;
  line-height: 35px
}

.calendar-select .selbox ul {
  display: flex;
  width: 100%;
  padding: 10px
}

.calendar-select .selbox li {
  width: 48%;
  margin-right: 4%;
}

.calendar-select .selbox li:last-child {
  margin-right: 0
}

.calendar-select .selbox li select {
  width: 100%
}

.calendar-select .selbox {
  position: absolute;
  z-index: 1000;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  overflow-y: auto;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #e2e7eb;
  overflow: hidden;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.05);
  display: none;
}

.calendar-select .selbox.on {
  display: block;
}

.calendar-select .selbox .head {
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #e2e7eb;
  background: #f5fafe;
  padding: 5px 10px;
  position: relative;
}

.calendar-select .year,
.calendar-select .month {
  display: inline-block;
  font-size: 23px;
  font-weight: 500
}

.calendar-select .btn a {
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 35px;
  background: #fff;
  border: 1px solid #e2e7eb;
  position: absolute;
  top: -3px
}

.calendar-select .btn a.prev {
  left: 0;
  background: url(../images/sml_arrow_left.png) no-repeat center center
}

.calendar-select .btn a.next {
  right: 0;
  background: url(../images/sml_arrow_right.png) no-repeat center center
}

.calendar-wrap .modal{
  position:inherit;
  background:none;
  top:auto;
}

.calendar-wrap .modal .head{
  font-weight: 500;
  font-size: 15px;
  color: #256ef4;
  position: relative;
  box-shadow:none;
}

.calendar-wrap .modal .cont{
  padding-top:0
}

.calendar-wrap .modal-content{
  left: auto;
  top: 20px;
  right: -20px;
  height:auto;
  border-radius:8px;
  width:350px;
  transform:none
}

.calendar-wrap .modal-content.mobile{
  display:none
}


/*** org-chart ***/
.org-chart {
  margin: auto;
  display: inline-block;
  width: 95%;
  text-align: center;
  position: relative;
}

.org-chart a {
  display: inline-block;
  width: 100%;
  line-height: 65px;
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  font-size: 19px;
  position: relative;
  z-index: 1
}

.org-chart .oc-top {
  width: 220px;
  line-height: 75px;
  background: #143962;
  border: 2px solid #143962;
  color: #fff;
  margin-bottom: 50px
}

.org-chart ul {
  position: relative;
}

.org-chart ul::after {
  content: "";
  width: 89.6%;
  height: 1230px;
  background: url(../images/org_bg.png), url(../images/org_bg_vertical.png);
  background-repeat:repeat-x, repeat-y;
  background-position: top right, top right;
  position: absolute;
  right: -24px;
  top: -23px;
}

.org-chart ul::before {
  content: "";
  width: 89.6%;
  height: 100px;
  background: url(../images/org_bg.png);
  background-repeat:repeat-x;
  background-position: top right;
  position: absolute;
  right: -24px;
  top: 640px;
}

.org-chart li {
  float: left;
  width: 23%;
  height: 640px;
  margin: 1%;
  position: relative;
}

.org-chart li::before {
  content: "";
  width: .01em;
  height: 450px;
  background: #c2c6d0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -33px
}

.org-chart > ul > li:first-child{
  padding-top:130px
}

.org-chart > ul > li:first-child::before {
  height: 200px
}

.org-chart li:nth-child(6)::before,
.org-chart li:nth-child(7)::before {
  height: 170px
}

.org-chart li.float {
  height: auto;
}

.org-chart li.float.none::after {
  content: none;
}

.org-chart li.float::before {
  content: none;
}

.org-chart li.float::after {
  content: "";
  width: 50px;
  height: .01em;
  background: #c2c6d0;
  position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
}

.org-chart li.float:last-child::before {
  content:none;
  top: 0;
  height: 150px
}

.org-chart li.float:last-child::after {
  top: 35px;
  transform: none
}

.org-chart li .oc-m {
  background: #256ef4 url(../images/org_line.png) no-repeat top;
  border: 2px solid #016bdb;
  color: #fff;
  background-size:cover;
}

.org-chart li a{
  margin-bottom:10px
}

.org-chart li a:last-child{
  margin:0
}

.org-chart li .b-sky {
  background: #fff url(../images/org_wave.png) top !important;
  border-top: 2px solid #b2d2f6;
  color: #143962;
  background-size:cover;
}

.org-chart li .dashed{
  background: #c3e6ff;
  border: 2px dashed #5cbcff;
  color: #143962;
}

.org-chart li>.sgroup-wrap .sgroup{
  padding: 20px;
  background: #fff;
  border: 1px solid #e0e3e9;
  margin-top: 50px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

.org-chart li>.sgroup-wrap .sgroup a{
  margin-bottom:3px
}

.org-chart li>.sgroup-wrap .sgroup a:last-child{
  margin:0
}

.org-chart li>.sgroup-wrap .sgroup::after,
.org-chart li>.sgroup-wrap .sgroup::before,
.org-chart li>.sgroup::after,
.org-chart li>.sgroup::before {
  content: none;
}

.org-chart li>.sgroup-wrap .sgroup.nobg,
.org-chart li>.sgroup.nobg {
  background: 0;
  border: 0;
  padding: 0
}

.org-chart li>.sgroup.line li::after{
  content: "";
  width: 1px;
  height: 50px;
  background: #c2c6d0;
  position: absolute;
  left: 50%;
  top: -40px;
}

.org-chart li>.sgroup-wrap .sgroup li,
.org-chart li>.sgroup li {
  float: none;
  width: 100%;
  height: auto;
  margin: 3px 0
}

.org-chart li>.sgroup-wrap .sgroup li::before,
.org-chart li>.sgroup li::before {
  content: none
}

.org-chart li>.sgroup-wrap .sgroup li a,
.org-chart li>.sgroup li a {
  background: #c3e6ff;
  border: 2px dashed #5cbcff;
  color: #143962;
  line-height: 55px;
  font-weight: normal;
  font-size: 17px
}

.org-chart li a .tf{
  margin:auto;
  line-height:40px;
  font-size:16px;
  border-radius:0 0 5px 5px;
}

/* 230523추가 */
.org-chart li>.v3group {
  background: #c3e6ff;
  border: 2px dashed #5cbcff;
  color: #143962;
  line-height: 65px;
  font-weight: normal;
  font-size: 17px
}

.org-chart li>.sgroup-wrap .sgroup li a.l-sky,
.org-chart li>.sgroup li a.l-sky {
  background: #fff;
  border: 2px solid #256ef4;
  color: #143962
}


/*org-value*/
.org-value {
  border: 1px solid #e2e7eb;
  padding: 20px;
  display: inline-block;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 30px
}

.org-value li {
  float: left;
  position: relative;
  padding-left: 20px;
  margin-right: 30px;
}

.org-value li::after {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 5px
}

.org-value li.v1::after {
  background: #143962;
  border: 1px solid #143962
}

.org-value li.v2::after {
  background: #256ef4 url(../images/org_line.png) no-repeat top;
  border: 2px solid #016bdb;
}

.org-value li.v3::after {
  background: #c3e6ff;
  border: 2px dashed #5cbcff
}

.org-value li.v4::after {
  background: #fff;
  border: 2px solid #256ef4
}

.org-value li.v5::after {
  background: #e7f2fe url(../images/org_wave.png) no-repeat top;
  background-size: 90px 90px;
  border: 2px solid #b2d2f6;
}


/*** lab-org ***/
.lab-org{
   width:100%
}

.lab-org .inner{
   margin:auto;
   text-align:center;
   position:relative;
}

.lab-org .inner::before{
   content: "";
   height:145px;
   width:1px;
   background:#c2c6d0;
   position:absolute;
   z-index:0;
   left:50%;
   top:0px;
   transform: translateX(-50%);
}

.lab-org .l-org-1{
  width:200px;
  position:relative;
  z-index:1;
  line-height: 75px;
  background: #143962;
  border: 2px solid #143962;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  font-size: 19px;
  margin:0 auto 25px;
}

.lab-org .l-org-2{
   margin-top: 80px;
   position: relative;
   display: inline-block;
   width: 100%;
}

.lab-org .l-org-2::before{
   content: "";
   height:1px;
   width:75%;
   background:#c2c6d0;
   position:absolute;
   left:50%;
   top:-40px;
   transform: translateX(-50%);
}

.lab-org.th .l-org-2::before{
  width:66.5%
}

.lab-org .l-org-2 ul{
  width:100%;
  display: table;
  table-layout: fixed;
}

.lab-org .l-org-2 li{
   display: table-cell;
   padding:0 2%;
   position:relative;
}

.lab-org .l-org-2 li::after{
   content: "";
   height:40px;
   width:1px;
   background:#c2c6d0;
   position:absolute;
   left:50%;
   top:-40px;
   transform: translateX(-50%);
}

.lab-org .l-org-2 li:last-child{
   margin-right:0
}

.lab-org .l-org-2 .team{
   font-size:19px;
   font-weight:500;
   background: #c3e6ff;
   border-bottom:1px solid #b9e2ff;
   line-height:60px;
   border-radius:20px 20px 0 0;
   cursor: pointer;
}

.lab-org .l-org-2 .work p{
   border-left:1px solid #b9e2ff;
   border-right:1px solid #b9e2ff;
   border-bottom:1px dashed #b9e2ff;
   background:#fff;
   word-break: keep-all;
   padding:17px 30px;
}

.lab-org .l-org-2 .work p:last-child{
   border-bottom:1px solid #b9e2ff;
}


/*** vision-wrap ***/
.vision-wrap {
  text-align: center;
}

.vision-wrap .vision {
  width: 1200px;
  display: inline-block;
  margin:auto;
  padding:50px 0
}

.vision-wrap .vision:first-child{
  padding-top:50px
}

.vision-wrap .strategy{
  background:#eef2f7 url(../images/visual_bg.png) no-repeat center bottom;
  background-size: cover;
  padding:100px 0;
  position:relative;
  max-width:100%
}

.vision-wrap .mission{
  background:url(../images/vision_wrap_bg.png) no-repeat center bottom;
  background-size: contain;
}

.vision-wrap h4 {
  width: 180px;
  margin: 0 auto 20px;
  border-radius:60px;
  background:#143962;
  color:#fff;
  line-height: 60px;
  margin-bottom:40px
}

.vision-wrap .line h4{
  border-bottom:3px solid #143962;
  border-radius:0;
  background:#fff;
  color:#143962
}

.vision .title{
  font-size:40px;
  font-weight:300;
  line-height:50px;
  text-align:center;
  word-break:keep-all;
  position:relative;
  margin-bottom:40px
}

.vision .title strong{
  position:relative;
}

.vision .title .underline::after{
  content:"";
  width:100%;
  height:20px;
  background:rgba(1,145,246,.2);
  position:absolute;
  left:0;
  bottom:0;
  z-index:-1
}

.vision .title.sml{
  font-size:30px;
  line-height:35px
}

.vision .title span{
  display:block;
  font-size:20px;
  letter-spacing:-0.2px;
  line-height:normal;
  margin-top:15px
}

.vision .a-tit{
  font-size:30px;
  font-weight:300;
  color:#fff;
  display: inline-block;
  border:5px solid #fff;
  background: linear-gradient(-75deg, #256ef4, #08bcc7);
  border-radius: 100px;
  padding:25px 40px;
  line-height:38px;
  word-break:keep-all;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
}

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

.vision .logo img{
  width:350px
}

.vision .t-vision-con{
  display:inline-block;
  margin:auto;
}

.vision .t-vision-con li{
  width:190px;
  height:190px;
  border-radius:190px;
  border:1px solid #e5f2f6;
  background-color:#fff;
  background-repeat:no-repeat;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
  padding:125px 25px 20px 25px;
  word-break: keep-all;
  float:left;
  margin:0px 15px;
  text-align:center;
  position:relative;
}

.vision .t-vision-con.nm li{
  padding:25px
}

.vision .t-vision-con.nm li em{
  display:block;
  font-weight: bold;
  font-size:20px;
  margin-bottom:10px
}

.vision .t-vision-con.nm li .md{
  padding:0 15px;
}

.vision .t-vision-con li.t1{background-image:url(../images/cv_icon01.png); background-position: center 28%;}
.vision .t-vision-con li.t2 {background-image:url(../images/cv_icon02.png); background-position: center 34%;}
.vision .t-vision-con li.t3 {background-image:url(../images/cv_icon03.png); background-position: center 34%;}
.vision .t-vision-con li.t4 {background-image:url(../images/cv_icon04.png); background-position: center 34%;}
.vision .t-vision-con li.sh1{background-image:url(../images/sh_vision_01.png); background-position: center 34%;}
.vision .t-vision-con li.sh2 {background-image:url(../images/sh_vision_02.png); background-position: center 34%;}
.vision .t-vision-con li.sh3 {background-image:url(../images/sh_vision_03.png); background-position: center 34%;}
.vision .t-vision-con li.sh5 {background-image:url(../images/sh_vision_04.png); background-position: center 34%;}

.vision .t-vision-con.lg li{
  width:250px;
  height:250px;
  border-radius:250px;
  padding-top:135px
}

.vision .t-vision-md{
  width:320px;
  height:320px;
  border-radius:320px;
  background: linear-gradient(-75deg, #256ef4, #08bcc7);
  border:20px solid #f5fafe;
  color:#fff;
  font-size:30px;
  margin:auto;
  position:relative;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
}

.vision .t-vision-md.sky{
  background: linear-gradient(-75deg, #256ef4, #3daafb)
}

.vision .t-vision-md.sml{
  width:240px;
  height:240px;
  border-radius:240px;
}

.vision .t-vision-md .md{
  font-weight:bold;
}

.vision .t-vision-md span{
  display:block;
  font-size:15px;
  line-height:20px;
  word-break: keep-all;
  margin-top:10px
}

.vision .purpose li.p1{background-image:url(../images/purpose_icon01.png); background-position: center 22%;}
.vision .purpose li.p2 {background-image:url(../images/purpose_icon02.png); background-position: center 22%;}
.vision .purpose li.p3 {background-image:url(../images/purpose_icon03.png); background-position: center 22%;}

.vision .cirbox{
  display: inline-block;
  width:85%;
  padding:20px;
  border-radius:80px;
  background:rgba(1,145,246,.1)
}

.vision .cirbox ul{
  border-radius:75px;
  display: inline-block;
  vertical-align:middle;
  width:100%;
  line-height:75px;
  border:2px solid #256ef4;
  background:#fff;
  color:#256ef4;
  background:#fff;
}

.vision .cirbox.navy ul{
  border:2px solid #143962;
  color:#143962;
}

.vision .cirbox li{
  float:left;
  width:25%;
  font-weight:500;
  padding:20px 0;
  border-right:1px solid #e2e7eb;
  font-size:21px
}

.vision .cirbox li:last-child{
  border-right:0
}

.vision .vinfo-tit{
  display: inline-block;
  width:100%
}

.vision .vinfo-tit li{
  float:left;
  width:23.5%;
  padding:20px;
  margin-right:2%;
  border-radius:100px
}

.vision .vinfo-tit li:last-child{
  margin-right:0
}

.vision .vinfo-tit li .area{
  padding:30px 0;
  font-size:21px;
  line-height:27px;
  font-weight:500;
  background:#fff;
  border-radius:100px
}

.vision .vinfo-tit li.org{
  background:#fef4f2;
}

.vision .vinfo-tit li.org .area{
  border: 2px solid #f6886f;
  color: #cd4612;
}

.vision .vinfo-tit li.yell{
  background:#fff6ed;
}

.vision .vinfo-tit li.yell .area{
  border: 2px solid #f7b363;
  color: #a56301;
}

.vision .vinfo-tit li.green{
  background:#eff8f7;
}

.vision .vinfo-tit li.green .area{
  color:#008175;
  border:2px solid #6fc2b4
}

.vision .vinfo-tit li.purple{
  background:#f4f5fa;
}

.vision .vinfo-tit li.purple .area{
  border: 2px solid #6767ab;
  color: #6767ab;
}

.vision .vinfo-con > ul > li{
  float:left;
  width:23.5%;
  padding:20px;
  margin-right:2%;
  border-radius:20px
}

.vision .vinfo-con > ul > li:last-child{
  margin-right:0
}

.vision .vinfo-con > ul > li.org{
  background:#fef4f2;
}

.vision .vinfo-con > ul > li.yell{
  background:#fff6ed;
}

.vision .vinfo-con > ul > li.green{
  background:#eff8f7;
}

.vision .vinfo-con > ul > li.purple{
  background:#f4f5fa;
}

.vision .vinfo-con .list{
  padding:15px 0
}

.vision .vinfo-con .list li{
  padding:15px;
  word-break: keep-all;
}

.vision .vinfo-con .list li:first-child{
  padding-top:0
}

.vision .vinfo-con .org .list li{
  border-bottom: 1px solid #f9d2c9;
}

.vision .vinfo-con .yell .list li{
  border-bottom: 1px solid #fbdbb8;
}

.vision .vinfo-con .green .list li{
  border-bottom: 1px solid #bae0da;
}

.vision .vinfo-con .purple .list li{
  border-bottom: 1px solid #dadbea;
}

.vision-wrap .diagram{
  background:url(../images/vision_wrap_bg.png) no-repeat center -30px;
  background-size: contain;
  display:inline-block;
  width:100%
}

.vision-wrap .diagram li{
  width:23%;
  margin:0 1%;
  height:550px;
  position:relative;
  float:left;
  border:1px solid #e5f2f6;
  background:#fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
  border-radius:15px;
  padding:30px 20px
}

.vision-wrap .diagram li .way{
  width:100%;
  height:120px;
  border-radius:15px;
  border:2px solid #256ef4;
  color:#fff;
  font-size:20px;
  background:#256ef4;
  word-break:keep-all;
  font-weight:500;
  position:relative;
}

.vision-wrap .diagram li .way .md{
  padding:0px 20px
}

.vision-wrap .diagram li .way .tt{
  color:#fff
}

.vision-wrap .diagram li .tt{
  display:block;
  font-size:15px;
  font-weight:600;
  color:#256ef4;
  margin-bottom:5px
}

.vision-wrap .diagram li .list{
  margin-top:10px;
  padding:15px 0
}

.vision-wrap .diagram li .list li{
  float:none;
  border:0;
  box-shadow:none;
  margin:0;
  border-radius:0;
  width:100%;
  height:72px;
  padding:10px;
  word-break:keep-all;
  position:relative;
  border-bottom:1px dashed #c5cfd5;
}

.vision-wrap .diagram li .value{
  border:2px solid #256ef4;
  background:#fff;
  color:#256ef4;
  width:100%;
  line-height:44px;
  border-radius:44px;
}



/*type1*/
.vision.type1 .t-vision-con{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:100%;
}

.vision.type1 ul.lv1{
  float:left;
}

.vision.type1 ul.lv2{
  float:right;
}

/*type2*/
.vision.type2 article{
  max-width:1200px;
  display:block;
  margin:0 auto 70px;
}

.vision.type2 article:last-child{
  margin-bottom:0
}

.vision.type2 ul{
  display: inline-block;
  vertical-align:middle;
}

.vision.type2 .tit::before{
  content:none
}

.vision.type2 .way .tit{
  width:170px;
  height:170px;
  border-radius:170px;
  background:#fff;
  padding:0;
  border:5px solid #256ef4;
  position:relative;
  display: inline-block;
  vertical-align:middle;
  margin-right:2%
}

.vision.type2 .way.red .tit,
.vision.type2 .way.red .tit::after{
  border-color:#ff6d59
}

.vision.type2 .way.green .tit,
.vision.type2 .way.green .tit::after{
  border-color:#63c4a2
}

.vision.type2 .way .tit::after{
  content:"";
  width:45px;
  border-bottom:5px dotted #256ef4;
  position:absolute;
  z-index:100;
  top:50%;
  transform: translateY(-50%);
  right:-40px
}

.vision.type2 .way .tit span{
  display:inline-block;
  font-size:23px;
  font-weight:600;
  color:#000
}

.vision.type2 .way li{
  width:220px;
  height:220px;
  border-radius:220px;
  background:#fff;
  border: 2px solid #e5f2f6;
  position:relative;
  float:left;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 5%)
}

.vision.type2 .way li:nth-child(odd){
  background:#fff url(../images/cir_bg_blue.png) no-repeat center bottom
}

.vision.type2 .way.red li:nth-child(odd){
  background:#fff url(../images/cir_bg_red.png) no-repeat center bottom
}

.vision.type2 .way.green li:nth-child(odd){
  background:#fff url(../images/cir_bg_green.png) no-repeat center bottom
}

.vision.type2 .way li:nth-child(even){
  background:#fff url(../images/cir_bg_gray.png) no-repeat center -1px
}

.vision.type2 .way li span{
  display:inline-block;
  word-break: keep-all;
  font-size:19px;
  line-height:25px;
  padding:10px;
  font-weight:500
}

.vision.type2 .way .addition{
  position:absolute;
  top:240px;
  left:0;
}

.vision.type2 .way .addition li{
  border:0;
  width:auto;
  height:auto;
  background:none;
  border-radius:0;
  float:none;
  box-shadow:none;
  font-size:16px;
  margin-bottom:5px
}

.vision.type2 .way .addition li:last-child{
  margin:0
}

.vision.type2 .project .tit{
  position:absolute;
  left:-5px;
  top:-50px;
  font-size:23px;
  display: inline-block;
  padding:0px 20px;
  background:#256ef4;
  border:1px solid #256ef4;
  border-radius:10px 10px 0 0;
  line-height:48px;
  color:#fff;
}

.vision.type2 .project{
  background: #fff;
  border: 5px solid #256ef4;
  border-radius:0 20px 20px;
  padding: 30px;
  position:relative;
}

.vision.type2 .project ul{
  display: inline-block;
  vertical-align:middle;
}

.vision.type2 .project li{
  position:relative;
  width:18%;
  margin:2% 3%;
  word-break: keep-all;
  float:left;
  text-align:left;
}

.vision.type2 .project li .cir{
  display:block;
  vertical-align: middle;
  width: 44px;
  height: 44px;
  line-height: 34px;
  border-radius: 44px;
  color: #fff;
  border: 5px solid #e5f2f6;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  background: linear-gradient(-75deg, #256ef4, #3daafb);
  margin-bottom:15px
}

/* type3 */
.vision.type3 ul{
  max-width:1100px;
  display:inline-block;
  margin:auto;
  text-align:center
}

.vision.type3 li{
  width: 200px;
  height: 200px;
  border-radius: 200px;
  background: rgba(1,145,245,.1);
  border:1px solid #256ef4;
  position: relative;
  margin-left:-20px;
  float: left;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);
}

.vision.type3 li span{
  color:#256ef4;
  word-break: keep-all;
  font-weight:500
}

.vision-img{width:60%}






/*** inventory ***/
.inventory{
  margin:50px auto;
  text-align:center
}

.inventory ul{
  position:relative;
  display:inline-block;
  height:100px;
}

.inventory ul::after{
  content:"아래로";
  text-indent: -99999px;
  position:absolute;
  bottom:5px;
  width:20px;
  height:20px;
  left:50%;
  transform: translateX(-50%);
  background:url(../images/dot_arrow_bottom.png) no-repeat center bottom
}

.inventory li{
  float:left;
  border-radius:30px;
  border:4px solid #e2e7eb;
  background:#fff;
  line-height:50px;
  text-align:center;
  width:200px;
  margin-right:50px;
  position:relative;
}

.inventory li::after{
  content:"X";
  position:absolute;
  right:-45px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  line-height:30px;
  height:30px;
  border-radius:20px;
  color:#256ef4;
  font-weight:900;
  font-size:19px
}

.inventory li:last-child{
  margin-right:0
}

.inventory li:last-child::after{
  content:none
}

.inventory li.ct{
  border-color:#256ef4;
  color:#256ef4
}

.inventory .re{
  font-size:25px;
  margin-top:10px;
  background:url(../images/co2_icon.png) no-repeat center bottom;
  height:120px;
}


/*** donut-ig ***/
.donut-ig{
  position:relative;
  display:inline-block;
  width:100%;
  height:700px
}

.donut-ig .title{
  background:url(../images/gra_donut_bg.png);
  width:500px;
  height:500px;
  padding-top:230px;
  font-size:30px;
  font-weight:bold;
  margin:auto;
  text-align:center
}

.donut-ig .title span{
  font-size:17px;
  display:block;
  margin-top:5px;
  color:#97b1c4;
}

.donut-ig .list li{
  position:absolute;
  width:33.3%
}

.donut-ig .list li.d1{
  bottom: 280px;
  left: 0px;
}

.donut-ig .list li.d1 .tit{
  float:right;
}

.donut-ig .list li.d1 .con{
  float:left;
}

.donut-ig .list li.d2{
  bottom:0;
  left:50%;
  transform:translateX(-50%);
}

.donut-ig .list li.d3{
  bottom: 280px;
  right: 0px;
}

.donut-ig .list li.d3 .tit{
  margin:0;
  float:left;
}

.donut-ig .list li.d3 .con{
  float:right;
}

.donut-ig .list .tit{
  width: 190px;
  height: 190px;
  border-radius: 190px;
  display:block;
  position:relative;
  word-break: keep-all;
  font-size:19px;
  border: 1px solid #e5f2f6;
  background: linear-gradient(-75deg, #f5fafe, #fff);
  box-shadow: 0px 0px 20px rgb(0 0 0 / 15%);
  margin:auto;
}

.donut-ig .list .tit .md{
  padding:0px 15px;
  font-weight:600;
}

.donut-ig .list .con{
  padding: 20px 50px;
}

.donut-ig .list .con em{
  position:relative;
  float:none;
  width:100%;
  top:auto;
  left:auto;
  right:auto;
  bottom:auto;
  color:#000;
  font-size:16px
}

.donut-ig .list .con em span{
  font-size:14px;
  color:#5d5d5d
}


/*** function ***/
.function .major {
  display: flow-root;
  position: relative;
}

.function .major .tbox{
  background: url(../images/major_tit_bg.png), linear-gradient(-75deg, #eef2f7, #e8f6ff) no-repeat left 20%;
}

.function .major .con {
  width: 100%;
  display: inline-block;
  margin-top: 50px
}

.function .major .con li {
  padding: 30px 15px;
  border-radius: 80px;
  border-bottom: 1px solid #256ef4;
  width: 33.3%;
  line-height:22px;
  color: #143962;
  float: left;
  position: relative;
  display: inline-block;
  text-align: center;
  font-weight:500
}

.function .change li {
  float: left;
  width: 22%;
  position: relative;
  background: linear-gradient(-75deg, #eef2f7, #e8f6ff);
  height: 75px;
  line-height:22px;
  margin: 1.5%;
  text-align: center;
  border-radius: 15px
}

.function .change li .md{
  padding:0px 10px;
  word-break: keep-all;
}

.function .change li .year {
  display: inline-block;
  background: linear-gradient(-75deg, #256ef4, #3daafb);
  width: 70px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  position: absolute;
  left: 10px;
  top: -15px;
  border-radius: 10px;
  font-weight: bold
}


/*** process-arrow ***/
.process-arrow{
  display: inline-block;
  text-align: center;
  width:100%;
}

.process-arrow li{
  position:relative;
  width:220px;
  height:220px;
  display: inline-block;
  margin-right:40px
}

.process-arrow li:nth-child(odd){
  background:url(../images/cir_arrow_box_blue.png);
}

.process-arrow li:nth-child(even){
  background:url(../images/cir_arrow_box_navy.png);
}

.process-arrow li::before{
  content:"";
  position:absolute;
  left:46%;
  top:48.5%;
  transform:translate(-47%,-48.5%);
  width:185px;
  height:185px;
  border-radius:185px;
  background:#fff;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 35%);
}

.process-arrow li::after{
  content:"";
  position:absolute;
  right:-33px;
  top:50%;
  transform:translateY(-50%);
  background:url(../images/dot_arrow_right.png);
  width:20px;
  height:20px
}

.process-arrow li:last-child::after{
  content: none
}

.process-arrow.sml li{
  width:180px;
  height:180px;
  background-size:180px
}

.process-arrow.sml li::before{
  width:150px;
  height:150px;
}

.process-arrow .tit{
  font-size:20px;
  font-weight:bold;
  word-break: keep-all;
  padding: 0px 25px;
}

.process-arrow .tit span{
  display:block;
  font-size:15px;
  color:#5d5d5d
}

.process-arrow .con{
  position:relative;
  padding-top:25px;
}

.process-arrow .con::after{
  content:"";
  background-image:url(../images/dot.png);
  width:50px;
  height:5px;
  position:absolute;
  top:8px;
  left:50%;
  transform: translateX(-50%);
}

.process-arrow .con strong{
  color:#256ef4;
  font-size:20px
}


/*** tbox-wrap ***/
.tbox-wrap{
  position:relative;
}

.tbox-wrap .tbox {
  width: 100%;
  word-break: keep-all;
  border-radius: 15px;
  padding:60px 50px;
  font-size: 25px;
  line-height: 33px;
  margin: 0 auto 20px;
  font-weight: bold;
  text-align: center;
  color: #143962;
  background: /*url(../images/tbox_bg.png),*/ linear-gradient(-75deg, #eef2f7, #e8f6ff) no-repeat left 20%;
}

.tbox-wrap .tbox p{
   font-weight:bold;
}

.tbox-wrap h4 {
  width: 150px;
  line-height: 150px;
  background: linear-gradient(-75deg, #256ef4, #3daafb);
  color: #fff;
  text-align: center;
  border-radius: 15px;
  position: absolute;
  right: 60px;
  top: 60px;
  margin:0
}


/*** ol-box ***/
.ol-box{
  border-radius: 15px;
  padding: 30px;
  display: inline-block;
  width:100%;
  background:#fff;
  border: 1px solid #e2e7eb;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
}

.ol-box.y-scroll{
  overflow-y:auto;
  height:320px;
}

.ol-box .thumbnail{
  width:456px;
  margin:auto
}

.ol-box .thumbnail img{
  width:100%;
  height:100%
}

.ol-box .text{
  background:#eef2f7;
  padding:30px;
  margin-top:20px;
  border-radius:15px
}

.ol-box li:first-child{
  padding-top:0
}

.ol-box li:first-child::before{
  top:10px
}

.ol-box .area{
  background:#f5fafe;
  display:inline-block;
  border-top:2px solid #e5f2f6;
  border-bottom:2px solid #e5f2f6;
  border-radius:10px;
  width:100%;
  padding:30px
}

.ol-box .area li{
  display:inline-block;
  margin-bottom:20px;
}

.ol-box .area li:last-child{
  margin-bottom:0
}

.ol-box .area .tit{
  float:left;
  width:110px;
  font-size:19px;
  font-weight:bold;
  position:relative;
  z-index:1;
  padding-left:15px
}

.ol-box .area .tit::before{
  content:"";
  width:25px;
  height:25px;
  border-radius:25px;
  background:#a8dbff;
  position:absolute;
  top:0;
  left:0;
  z-index:-1
}

.ol-box .area .con{
  float:left;
  width:calc(100% - 110px)
}

.ol-box .pic{
  border-radius:10px;
  border:1px solid #a8dbff;
  padding:20px;
  text-align:center
}

.ol-box .pic span{
  display:inline-block;
  width:163px;
  height:112px;
  border-radius:5px;
  overflow:hidden;
}

.ol-box .pic img{
  width:100%;
  height:100%;
  object-fit: cover
}



/*** nb-box ***/
.nb-box{
  margin:30px 0
}

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

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

.nb-box li .nb{
  display: inline-block;
  vertical-align:middle;
  width:44px;
  height:44px;
  line-height:34px;
  border-radius:44px;
  color:#fff;
  border:5px solid #e5f2f6;
  text-align:center;
  font-weight:bold;
  font-size:18px;
  background: linear-gradient(-75deg, #256ef4, #3daafb);
  margin-right:15px
}

.nb-box li .text{
  display:inline-block;
  vertical-align:middle;
  width:calc(100% - 60px)
}

.nb-box li .dot-text{
  font-size:16px;
  color:#000
}

.nb-box .th{
  display:flex;
}

.nb-box .th li{
  width:33%;
  padding:25px;
  margin: 0px 5px;
}


/*** system-pic ***/
.system-pic{
  position:relative;
  width:100%;
  text-align:center;
  margin:auto;
}

.system-pic .tit{
  display:inline-block;
  width:29%;
  word-break: keep-all;
  height:120px;
  font-size:25px;
  line-height:33px;
  border:1px solid #063a74;
  background:#063a74;
  color:#fff;
  position:relative;
  border-radius:8px;
  margin-bottom:50px
}

.system-pic .tit::after{
  content:"";
  background:url(../images/dot_arrow_bottom.png) no-repeat center center;
  width:20px;
  height:20px;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-35px
}

.system-pic .tit:last-child::after{
  content:none
}

.system-pic .tit .md{
  font-weight:bold;
}

.system-pic ul{
  display: inline-block;
  width: 100%;
  position:relative;
  margin-bottom:50px
}

.system-pic ul::after{
  content:"";
  background:url(../images/dot_arrow_bottom.png) no-repeat center center;
  text-indent: -99999px;
  width:20px;
  height:20px;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-40px
}

.system-pic li{
  position:relative;
  height:90px;
  padding:20px;
  border:1px solid #dde2e6;
  background:#fff;
  border-radius:8px;
  float:left;
  width:29%;
  margin:0 2%;
}

.system-pic li .md{
  word-break:keep-all;
}

.system-pic li span{
  display:block;
  font-size:13px;
  color:#5d5d5d
}

.system-pic li:first-child::after{
  content:"";
  background:url(../images/dot_arrow_right.png) no-repeat center center;
  text-indent: -99999px;
  width:20px;
  height:20px;
  position:absolute;
  right:-10%;
  top:50%;
  transform: translateY(-50%);
}

.system-pic li:last-child::after{
  content:"";
  background:url(../images/dot_arrow_left.png) no-repeat center center;
  text-indent: -99999px;
  width:20px;
  height:20px;
  position:absolute;
  left:-10%;
  top:50%;
  transform: translateY(-50%);
}

.system-pic li.em{
  border:1px solid #063a74;
  background:#eff8ff;
  color:#063a74;
  font-size:19px
}

.system-pic li.em .md{
  font-weight:bold;
}

.system-pic li.full{
  float:none;
  width:100%;
  border:0;
  height:auto;
  padding:0;
  margin:0;
  background:0;
  border-radius:0;
}

.system-pic li.full .em{
  position: relative;
  height: 80px;
  padding: 20px;
  border:1px solid #063a74;
  background:#eff8ff;
  color:#063a74;
  font-size:19px;
  border-radius: 8px;
  margin-bottom:10px
}

.system-pic li.full .em .md{
  font-weight:bold;
}

.system-pic li .list ul{
  margin:0
}

.system-pic li .list li{
  width:15.6%;
  margin:0.5%
}

.system-pic li.full::after,
.system-pic li .list ul::after,
.system-pic li .list li::after{
  content:none
}


/*** photo-grid ***/
.photo-grid{
  display: flow-root;
}

.photo-grid li{
  float:left;
  margin:0 2% 2% 0;
  padding:20px;
  border:1px solid #e2e7eb;
  text-align:center;
  border-radius:20px;
}

.photo-grid li a{
  display: block;
}

.photo-grid.fo li{
  width:23.5%;
}

.photo-grid.fo li:nth-child(4n){
  margin-right:0
}

.photo-grid.th li{
  width:32%
}

.photo-grid.th li:nth-child(3n){
  margin-right:0
}

.photo-grid li p{
  height:173px;
  border:1px solid #e5f2f6;
  border-radius:15px;
  overflow:hidden;
  position:relative;
}

.photo-grid.th li p{
  height:190px
}

.photo-grid li img{
  width:100%;
  height:100%;
  object-fit: fill;
}

.photo-grid.og li p img{
  height:auto;
  object-fit: contain;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.photo-grid li .text{
  display:block;
  font-weight:500;
  font-size:16px;
  line-height:21px;
  margin-top:10px
}

.photo-grid li .text em{
  font-size:14px;
  color:#5d5d5d;
}

.photo-grid .tl .text{
  height:40px
}

.photo-grid .md-img-sel{
  width:40% !important
}





/*** slide-photo ***/
.slide-photo{
  width:500px;
  position:relative;
}

.slide-photo .thumbnail{
  width:100%;
  height:300px;
}

.slide-photo .thumbnail img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.slide-photo .list{
  width:100%;
  display: inline-block;
  margin:10px auto 0;
  position:relative;
}

.slide-photo .list ul{
  width:88%;
  margin:auto;
  position:relative;
  z-index:2
}

.slide-photo .list li{
  width:23%;
  float:left;
  margin:0 1%
}

.slide-photo .list li a{
  display:block;
  width:100%;
  height:65px;
  border:1px solid #e5f2f6
}

.slide-photo .list li.on a{
  border:2px solid #256ef4
}

.slide-photo .list li a:hover{
  border:2px solid #256ef4
}

.slide-photo .list li a img{
  width:100%;
  height:100%;
  object-fit: contain;
}

.slide-photo .control{
  position:absolute;
  width:100%;
  z-index:1
}

.slide-photo .control a{
  display:inline-block;
  position:relative;
  width:25px;
  height:40px;
  background:#eef2f7;
  text-align:center;
  background-repeat: no-repeat;
  margin-top:12px
}

.slide-photo .control a.prev{
  float:left;
}

.slide-photo .control a.prev::after{
  content:"";
  width:6px;
  height:9px;
  background-image:url(../images/arrow_left_sky.png);
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%)
}

.slide-photo .control a.next{
  float:right;
}

.slide-photo .control a.next::after{
  content:"";
  width:6px;
  height:9px;
  background-image:url(../images/arrow_right_sky.png);
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%)
}


/*** lab-history ***/
.lab-history .copy {
  font-size: 30px;
  font-weight: 300;
  text-align: center;
  margin: 30px 0 50px 0
}

.lab-history .tit {
  width: 180px;
  height: 180px;
  border-radius: 180px;
  background: #e2f3fe;
  position: relative;
  color: #256ef4;
  margin: auto;
}

.lab-history .tit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: #fff;
  border: 1px solid #256ef4;
  border-radius: 150px;
}

.lab-history .tit span {
  font-weight: bold;
  font-size: 29px;
  line-height: 32px;
  width: 100%;
  text-align: center;
  z-index: 3
}

.lab-history .history:not(.seaweed, .namdonghae, .ayeoldae) {
  position: relative;
  overflow: hidden;
  background: url(../images/history_img_2000.png), url(../images/history_img.png);
  background-repeat: no-repeat;
  background-position: 25% 20%, 77% 95%;
}

 .seaweed {
  position: relative;
  overflow: hidden;
  background: url(../images/history_img_seaweed.png), url(../images/history_img.png);
  background-repeat: no-repeat;
  background-position: 25% 20%, 77% 95%;
}

 .namdonghae {
  position: relative;
  overflow: hidden;
  background: url(../images/history_img_2000_namdonghae.png), url(../images/history_img_namdonghae.png);
  background-repeat: no-repeat;
  background-position: 50% 0%, 77% 95%;
}

 .ayeoldae {
  position: relative;
  overflow: hidden;
  background: url(../images/history_img_2000_ayeoldae.png), url(../images/history_img.png);
  background-repeat: no-repeat;
  background-position: 25% 20%, 77% 95%;
}


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

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

.lab-history .history .cont ul {
  width: 50%;
  margin-top: 30px
}

.lab-history .history .cont:nth-child(odd) ul {
  float: right;
}

.lab-history .history .cont:nth-child(even) ul {
  float: left;
  text-align: right;
}

.lab-history .history .cont li {
  display: inline-block;
  width:100%;
  position: relative;
  margin-bottom: 30px
}

.lab-history .history .cont li::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #fff;
  border: 3px solid #256ef4;
  position: absolute;
  z-index: 10;
  top: 5px;
}

.lab-history .history .cont:nth-child(odd) li::after {
  left: -4px;
}

.lab-history .history .cont:nth-child(odd) li {
  padding-left: 40px
}

.lab-history .history .cont:nth-child(even) li::after {
  right: -5px;
}

.lab-history .history .cont:nth-child(even) li {
  padding-right: 40px
}

.lab-history .history .cont li .year {
  display: inline-block;
  vertical-align: middle;
  font-size: 22px;
  font-weight: 600;
  width: 25%;
}

.lab-history .history .cont li .con {
  display: inline-block;
  vertical-align: top;
  width: 70%;
  word-break: keep-all;
}

.lab-history .history .cont li .con span{
  display:block;
  font-size:15px;
  line-height:21px;
  margin-top:5px;
  color:#5d5d5d;
}

.lab-history .history .cont:nth-child(even) li .con {
  text-align: right;
  float: left;
}


/*** plan-box ***/
.plan-box{
  margin:auto;
  text-align:center
}

.plan-box ul{
  display:inline-block;
  width:100%
}

.plan-box li{
  width:49%;
  height:220px;
  float:left;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
  border:2px solid #06467c;
  border-radius:20px;
  margin:0 2% 2% 0;
  text-align:left
}

.plan-box li:nth-child(2n){
  margin-right:0
}

.plan-box li.dot-text{
  font-size:17px
}

.plan-box .tit{
  float:left;
  width:32%;
  height:100%;
  padding:130px 20px 30px;
  word-break: keep-all;
  border-radius:20px 0 0 20px;
  text-align:center;
  background:#fff;
  font-size:19px;
  position:relative;
}

.plan-box .tit::after{
  content:"";
  position:absolute;
  right: 0;
  top:50%;
  transform: translateY(-50%);
  height: 50px;
  width: 5px;
  background:url(../images/dot_vertical.png) repeat-y
}

.plan-box .tit strong{
  display:block
}

.plan-box .list{
  float:right;
  width:68%;
  height:100%;
  padding:60px 20px;
  border-radius:0 20px 20px 0;
  background:#fff;
}

.plan-box li ul li{
  float:none;
  width:100%;
  border:0;
  margin:0;
  margin-bottom:10px;
  height:auto;
  box-shadow:none
}

.plan-box li ul li:last-child{
  margin-bottom:0
}

.plan-box .pb1{
  background:#fff url(../images/plan_icon01.png) no-repeat center 40px;
}

.plan-box .pb2{
  background:#fff url(../images/plan_icon02.png) no-repeat center 40px;
}

.plan-box .pb3{
  background:#fff url(../images/plan_icon03.png) no-repeat center 40px;
}

.plan-box .pb4{
  background:#fff url(../images/plan_icon04.png) no-repeat center 40px;
}

.plan-box .title{
  text-align:center;
  font-size:30px;
  font-family: 'GmarketSans';
  margin-top:30px
}

.plan-box .title strong{
  font-family: 'GmarketSans';
  font-weight:700;
}

.plan-box .title span{
  display:block;
  font-size:17px;
  line-height:25px;
  letter-spacing: normal;
  margin-top:15px
}

.plan-box .file-download{
  margin-top:20px;
  border:0;
  line-height:55px;
  padding:0 25px 0 55px;
  border-radius:55px;
  font-size:18px;
  background: #256ef4 url(../images/ct_down_icon_w.png) no-repeat 30px 17px;
  transition: all 0.4s;
  color:#fff;
  border:2px solid #0072c3;
  position:relative;
}

.plan-box .file-download::after{
  content: "";
  width: 0%;
  height: 100%;
  top: 0;
  position: absolute;
  left: 0;
  transition: all 0.4s;
}

.plan-box .file-download:hover{
  background:#fff url(../images/ct_down_icon.png) no-repeat 30px 17px;
  color:#000
}

.plan-box .krds-btn{
  height: var(--krds-button--size-height-large); 
  font-size: var(--krds-button--pc-font-size-large); 
  border-radius: 50px;
}

.plan .top-visual{
  display:none
}

.plan .share-cont .area{
  right:0;
  top:50px
}

.plan .sub-content{
  padding:0 0 100px 0
}

.plan .sub-title{
  border:0;
  margin:0 auto 50px;
  padding:50px 0 0 0;
  text-align:center;
}

.plan .sub-title h3{
  font-size:44px;
  font-family: 'GmarketSans';
  font-weight:700;
  display:inline-block;
  line-height:50px;
  padding:0px 40px;
  color:#fff;
  position:relative;
  z-index:1
}

.plan .sub-title h3::after{
  content:"";
  background:#06467c;
  height:20px;
  width:100%;
  position:absolute;
  z-index:-1;
  bottom:0;
  left:0;
}

.plan .content{
  background:#0082f0 url(../images/plan_bg.png) no-repeat top center;
  background-size: cover;
  padding-top:100px
}

.content.m-plan{
  background:url(../images/plan_m_bg.png) no-repeat top center;
  background-size: cover;
}



/*** list-embox ***/
.list-embox li{
  display: flex;
  flex: 1;
  margin-bottom:10px
}

.list-embox li:last-child{
  margin-bottom:0
}

.list-embox{
  margin-top:30px
}

.list-embox .tit{
  width:170px;
  word-break: keep-all;
  position:relative;
  background:#063a74;
  color:#fff;
  border-radius:15px 0 0 15px;
  display: flex;
  flex: 1;
}

.list-embox .tit span{
  display:block;
  font-size:15px;
  opacity:0.6
}

.list-embox .list{
  width:calc(100% - 170px);
  height:100%;
  background:#e7f5ff;
  word-break: keep-all;
  text-align:left;
  padding:30px;
}

.list-embox .list li{
  height:auto;
  display: inline-block;
  width: 100%;
}

.list-embox .list .dot-text{
  font-size:17px;
  color:#000;
}

.list-embox .list span{
  font-size:15px;
  color:#5d5d5d;
}


/*** attach-history ***/
.attach-history{
  position:relative;
}

.attach-history::before {
  content: "";
  width: .01em;
  height: 94%;
  background: #e2e7eb;
  position: absolute;
  top: 5px;
  left: 250px;
}

.attach-history .title{
  float:left;
  width:300px;
  font-size:28px;
  color:#063a74;
  font-weight:600;
  position:relative;
}

.attach-history .title::after{
  content:"";
  position:absolute;
  right:80px;
  top:50%;
  transform: translateY(-50%);
  background: url(../images/dot.png) repeat-x center center;
  width:100px;
  height:5px;
}

.attach-history .st{
  display:inline-block;
  width:100%;
  margin-bottom:50px
}

.attach-history .st:last-child{
  margin-bottom:0
}

.attach-history ul{
  float:right;
  width:calc(100% - 300px)
}

.attach-history li{
  position:relative;
  margin-bottom:20px
}

.attach-history li:last-child{
  margin-bottom:0
}

.attach-history li::after{
  content:"";
  width:12px;
  height:12px;
  background:#fff;
  border:3px solid #256ef4;
  border-radius:12px;
  position:absolute;
  left:-55px;
  top:8px;
  transform: translateY(-20%);
}

.attach-history li::before{
  content:"";
  background:#dbeefa;
  width:25px;
  height:25px;
  border-radius:25px;
  position:absolute;
  left:-61px;
}

.attach-history li .year {
  font-size: 21px;
  font-weight: 600;
}

.attach-history li .con {
  word-break: keep-all;
}

.attach-history.profile::after{
  content:"";
  width:400px;
  height:567px;
  background:url(../images/profile_bg.png) no-repeat;
  position:absolute;
  right:0;
  bottom:-260px
}


/*** result-detail ***/
.result-detail .d-area {
  background: #eef2f7;
  display: flow-root;
  padding: 35px;
  border-radius: 15px
}

.result-detail .thumb {
  float: left;
  width: 235px;
  /* height: 180px; */
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #e5f2f6
}

.result-detail .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-detail li {
  font-weight: 500;
  margin-bottom: 15px
}

.result-detail li.dot-text{
  font-size:17px;
  color:#000
}

.result-detail li:last-child {
  margin-bottom: 0
}

.result-detail ul {
  float: right;
  width: calc(100% - 260px)
}

.result-detail .text{
  float: right;
  width: calc(100% - 260px)
}

.result-detail .abox {
  padding: 0;
  background:none
}

.result-detail .abox ul {
  float: none;
  width: 100%;
}

.result-detail .abox li {
  font-weight: normal;
  margin: 0
}


/*** all-time ***/
.all-time li {
  float: left;
  width: 49%;
  margin: 0 2% 2% 0;
  border-radius: 15px;
  border: 1px solid #e2e7eb;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  position: relative;
}
/*
.all-time li::after {
  content: "+";
  width: 25px;
  line-height: 25px;
  border-radius: 25px;
  background: #256ef4;
  color: #fff;
  text-align: center;
  position: absolute;
  right: 30px;
  top: 30px;
}

.all-time li.none::after {
  content: none
}
*/
.all-time li:nth-child(2n) {
  margin-right: 0
}

.all-time li .thumb {
  float: left;
  width: 100px;
  height: 120px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #e5f2f6
}

.all-time li .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.all-time li .con {
  float: right;
  width: calc(100% - 130px);
  font-size: 19px;
  font-weight: 600;
  padding-top: 33px
}

.all-time li .con span {
  display: block;
  font-size: 15px;
  line-height:22px;
  word-break:keep-all;
  color: #5d5d5d;
  margin-top:5px
}

.all-time li .con strong {
  color: #256ef4
}

.all-time .list {
  width: 100%;
  display: flow-root;
}

.all-time li .list a{
  display: inline-block;
  width:100%;
  height:100%
}

.all-time li .list a:focus{
  outline: 1px dashed #999
}

.all-time .view {
  margin-top: 20px;
  background: #f5fafe;
  border-radius: 15px;
  padding: 20px;
  width: 100%;
  /*display: none*/
}

.all-time .career-detail {
  display: flow-root;
  margin-bottom: 30px
}

.all-time .career-detail:last-child {
  margin-bottom: 0
}

.all-time .career-detail .tt {
  font-weight: 500;
  color: #256ef4;
  margin-bottom: 5px
}

.all-time .career-detail .dl li {
  width: 100%;
  border: 0;
  background: 0;
  margin: 0 0 10px 0;
  padding: 0 0 0 15px;
  box-shadow: none;
  float: none;
  font-size: 15px;
  line-height: 28px
}

.all-time .career-detail .dl li:last-child{
  margin-bottom:0
}

.all-time .career-detail .dl li::after {
  content: none
}

.all-time .career-detail .dl li::before {
  content: "";
  width: 9px;
  height: 9px;
  background: #fff;
  border: 3px solid #256ef4;
  border-radius: 8px;
  position: absolute;
  left: 0;
  top: 7px
}

.all-time .career-detail .dt {
  display: block;
  font-size:18px;
  font-weight: bold;
}

.all-time .career-detail .dd {
  display: block;
  line-height: 22px
}

.all-time .krds-accordion{
  border:0;
  padding:0;
}

.all-time .krds-accordion .accordion-item{
  padding:0;
}

.all-time .krds-accordion .accordion-item .btn-accordion{
  display: flow-root;
}

.all-time .krds-accordion .accordion-item .btn-accordion::after{
  top:67px
}
    
.all-time .krds-accordion .accordion-item .cn .btn-accordion::after{
  content:none;
}

.sub-content .all-time .accordion-header{
  margin:0;
  padding:0;
}

.sub-content .all-time .accordion-header.cn{
  pointer-events: none;
}

.sub-content .all-time .accordion-header::before{
  content:none;
}

/*** viewer-downlink ***/
.viewer-downlink{
  margin: auto;
  max-width: 900px;
}

.viewer-downlink ul{
  display: table;
  table-layout: fixed;
  width: 100%;
}

.viewer-downlink li{
  display: table-cell;
  vertical-align: middle;
}

.viewer-downlink li span{
  font-size:14px;
  font-weight:300;
  display:block;
  color:#b7c8d6;
}

.viewer-downlink li a{
  height:110px;
  display:block;
  line-height:24px;
  background:#fff;
  padding:30px 30px 30px 80px;
  border:1px solid #e2e7eb;
  border-right:0;
}

.viewer-downlink li:first-child a{
  border-radius:15px 0 0 15px
}

.viewer-downlink li:last-child a{
  border-right:1px solid #e2e7eb;
  border-radius:0 15px 15px 0
}

.viewer-downlink li.hwp a{
  background-image:url(../images/hwp_icon_lg.png), url(../images/window_icon.png);
  background-position:20px center, 92% center;
  background-repeat: no-repeat;
}

.viewer-downlink li.pdf a{
  background-image:url(../images/pdf_icon_lg.png), url(../images/window_icon.png);
  background-position:20px center, 92% center;
  background-repeat: no-repeat;
}

.viewer-downlink.down li.hwp a{
  background-image:url(../images/hwp_icon_lg.png), url(../images/down_icon.png);
  background-position:20px center, 92% center;
  background-repeat: no-repeat;
}

.viewer-downlink.down li.pdf a{
  background-image:url(../images/pdf_icon_lg.png), url(../images/down_icon.png);
  background-position:20px center, 92% center;
  background-repeat: no-repeat;
}


/*** guide-detail ***/
.guide-detail .box {
  border-radius: 15px;
  padding: 30px;
  display: flow-root;
  border: 1px solid #e2e7eb;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
}

.guide-detail .thumb {
  float: left;
  width: 230px;
  height: 135px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #e5f2f6
}

.guide-detail .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-detail .intro {
  float: right;
  width: calc(100% - 260px);
}

.guide-detail .intro .tit {
  margin-bottom: 10px
}

.guide-detail .intro .text {
  font-size: 16px;
}

.guide-detail .abox {
  margin-top: 20px
}


/*** purpose-ig ***/
.purpose-ig{
  width:100%;
  display: inline-block;
  margin:50px 0
}

.purpose-ig .area{
  max-width:620px;
  margin:auto;
}

.purpose-ig .ig-1{
  float:left;
  width:calc(100% - 300px);
  position:relative;
}

.purpose-ig .ig-1::after{
  content:"";
  background:url(../images/gra_arrow_right_sml.png);
  width:69px;
  height:100px;
  position:absolute;
  right:-85px;
  top:50%;
  transform: translateY(-50%);
}

.purpose-ig .ig-1 li{
  display: inline-block;
  width:100%;
  line-height:52px;
  border-radius:52px;
  border: 1px solid #8cd0ff;
  background: #fff;
  text-align:center;
  font-weight:500;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
  margin-bottom:10px
}

.purpose-ig .ig-1 li:last-child{
  margin-bottom:0
}

.purpose-ig .ig-2{
  float:right;
  width:200px;
  height: 200px;
  border-radius: 200px;
  background: linear-gradient(-75deg, #256ef4, #08bcc7);
  border: 10px solid #f5fafe;
  color: #fff;
  font-size: 30px;
  position: relative;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
}

.purpose-ig .ig-2 li{
  font-size:17px;
  line-height:22px;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:10px;
  margin-bottom:10px
}

.purpose-ig .ig-2 li:last-child{
  margin-bottom:0;
  border:0
}


/*** ntc-process ***/
.ntc-process{
  display: flow-root;
  margin-bottom:30px
}

.ntc-process li{
  float:left;
  width:22.7%;
  height:190px;
  border:1px solid #dde2e6;
  overflow:hidden;
  border-radius:15px;
  margin-right:3%;
}

.ntc-process li:last-child{
  margin-right:0
}

.ntc-process li .tit{
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-weight: 500;
  background: #f5fafe;
}

.ntc-process li .con{
  padding:20px;
  height:73%;
  position:relative;
}

/*
.ntc-process li .con::before{
  position:absolute;
  top:-30px;
  left:0px;
  font-size:90px;
  font-style: italic;
  font-weight: bold;
  color:#256ef4
}
*/

.ntc-process li:first-child .con{
  background: url(../images/np_bg01.png) no-repeat 90% 78%;
}
/*
.ntc-process li:first-child .con::before{
  content:"1";
}
*/

.ntc-process li:nth-child(2) .con{
  background: url(../images/np_bg02.png) no-repeat 90% 78%;
}
/*
.ntc-process li:nth-child(2) .con::before{
  content:"2";
}
*/
.ntc-process li:nth-child(3) .con{
  background: url(../images/np_bg03.png) no-repeat 90% 78%;
}
/*
.ntc-process li:nth-child(3) .con::before{
  content:"3";
}
*/
.ntc-process li:last-child .con{
  background: url(../images/np_bg04.png) no-repeat 90% 78%;
}
/*
.ntc-process li:last-child .con::before{
  content:"4";
}
*/


/*** ebook-list ***/
.ebook-list {
  display: flow-root;
  margin-top: 20px;
}

.ebook-list li {
  float: left;
  width: 22%;
  margin: 0 4% 4% 0;
  text-align:center;
}

.ebook-list li:nth-child(4n) {
  margin-right: 0;
}

.ebook-list li a{
  display:block;
  border-radius:15px 15px 0 0;
  border:1px solid #dde2e6;
  overflow:hidden;
  height:auto;
}

.ebook-list li .file-download{
  border-radius: 0 0 15px 15px;
  border-top:0;
  box-shadow: none;
  background: #fff;
  padding:0;
}

.ebook-list .thumbnail {
  width: 100%;
  height: 280px;
  border-bottom: 1px solid #e5f2f6;
}

.ebook-list .thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ebook-list .tit {
  padding: 15px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  background: #f5fafe;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/*** info-box ***/
.info-box{
  border-radius:15px;
  border:1px solid #e2e7eb;
  height:60px;
  line-height:58px;
  overflow:hidden;
  background:#fff;
  margin-bottom:30px;
}

.info-box .tit{
  float:left;
  background:#f5fafe;
  height:100%;
  width:20%;
  text-align:center;
  font-weight:500
}

.info-box .tit img{
  display:inline-block;
  vertical-align:middle;
  margin-right:5px;
}

.info-box .list{
  float:left;
  width:80%;
}

.info-box .list ul{
  display: table;
  height:100%;
  table-layout: fixed;
}

.info-box .list li{
  display: table-cell;
  height:100%;
  border-right:1px solid #e2e7eb;
  padding:0px 25px;
}

.info-box .list li:last-child{
  border-right:0;
}

.info-box .list li .tt{
  float:left;
  text-align:center;
  margin-right:20px;
}

.info-box .list li .con{
  float:left;
}

.info-box .list li .dot-text{
  font-size:16px;
  display:inline-block;
  line-height: normal;
}


/*** system-box ***/
.system-box{
  width:100%;
  display:inline-block;
}

.system-box ul:first-child{
  float:left;
  width:35%;
}

.system-box ul:last-child{
  width:62%;
  float:right;
}

.system-box ul .tit{
  color:#fff;
  font-weight:bold;
  font-size:19px;
  line-height:60px;
  border-radius:8px;
  text-align:center;
  width:100%;
  margin-bottom:30px
}

.system-box ul:first-child .tit{
  background:#256ef4;
}

.system-box ul:last-child .tit{
  background:#053863;
}

.system-box strong{
  color:#256ef4;
  font-size:23px;
  display:inline-block;
  margin-right:5px;
}

.system-box ul:first-child ul,
.system-box ul:last-child ul{
  float:none;
  width:100%;
}

.system-box ul li li{
  border:1px solid #dde2e6;
  height:100px;
  float:left;
  padding:20px;
  border-radius:8px;
  position:relative;
}

.system-box ul:first-child li li{
  width:100%;
  margin-bottom:30px;
}

.system-box ul:last-child li li{
  width:47.5%;
  margin:0 5% 30px 0;
}

.system-box ul:last-child li li::after{
  content:"";
  width:37px;
  height:1px;
  background:#dde2e6;
  position:absolute;
  left:-37px;
  top:50%;
  transform: translateY(-50%);
}

.system-box ul:last-child li li:nth-child(2)::before{
  content:"";
  height:33px;
  width:1px;
  background:#dde2e6;
  position:absolute;
  left:50%;
  bottom:-33px;
  transform: translateX(-50%);
}

.system-box ul:last-child li li:nth-child(2n){
  margin-right:0;
}


/*** intro100 ***/
.intro100-wrap{
  border-radius:20px;
  width:100%;
  height:680px;
  background:url(../images/100_intro_bg.png) no-repeat center center;
  background-size: cover;
  overflow:hidden;
  position:relative;
}

.intro100-wrap::after{
  content:"100th anniversary";
  color:#fff;
  writing-mode: vertical-lr;
  /*text-orientation: upright;*/
  font-weight:300;
  position:absolute;
  right:30px;
  top:50px;
  font-size:13px;
  letter-spacing:10px
}

.intro100-wrap .tit{
  padding:70px 80px
}

.intro100-wrap .tit .mobile{
  display:none
}

.intro100-wrap .con{
  background: linear-gradient(75deg, rgba(0, 0, 0, .7), rgba(255, 255, 255, 0));
  padding:50px 80px;
  color:#fff;
  font-size:21px;
  line-height:31px;
  font-weight:200
}

.intro100-wrap .con span{
  font-weight:200
}

.intro100-wrap .logo{
  background: url(../images/logo_gray.png) no-repeat center center;
  background-size:70%;
  width:174px;
  height:41px;
  position:absolute;
  left:50px;
  bottom:50px
}

.video-visual{
  width:100%;
  border-radius:20px;
  overflow:hidden;
}


/*** hd-cont ***/
.hd-cont {
  width: 100%;
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}

.hd-cont.ab{
  width:auto;
  margin:0;
  position:absolute;
  right:0;
  top:-15px;
}

.hd-cont h3 {
  margin-top: 15px;
  margin-bottom: 0
}

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

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

.hd-btn.refresh {
  color: #5d5d5d;
  border: 1px solid #c8cbd0;
  background: #fff url(../images/refresh_icon.png) no-repeat 13px center;
  padding-left: 40px
}

.hd-btn.link {
  color: #5d5d5d;
  border: 1px solid #c8cbd0;
  background: #fff url(../images/link_icon.png) no-repeat 13px center;
  padding-left: 40px
}

.hd-cont .count {
  margin-bottom: 0
}

.hd-cont .btn{
  display:inline-block;
}

.hd-cont .btn .normal{
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #c8cbd0;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  line-height: 44px;
  padding: 0 15px;
  font-size: 15px;
}

.hd-cont .btn .normal img{
  vertical-align: middle;
}

.hd-cont .show label, .hd-cont .ltit {
  font-size:15px;
  font-weight:500;
  margin-right:5px;
  display:inline-block;
}

.hd-search {
  padding: 20px;
  background: #eef2f7;
  border: 1px solid #e8f1f6;
  text-align: center;
  border-radius:5px;
  margin-bottom: 10px
}

.hd-search select.detail{
  width:150px
}

.hd-search ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0px 7px;
  justify-content: center;
  align-items: baseline;
}

.hd-search ul.line{
  padding-top:20px;
  margin-top:20px;
  border-top:1px solid #dde2e6
}

.hd-search li{
  padding:2px;
}

.hd-search .form-btn-datepicker{
  top:24px;
  right:15px
}


/*** etc ***/
.count {
  display: inline-block;
  font-size: 15px;
  margin: 15px 0 10px 0;
}

.count strong {
  color: #256ef4
}

.area-btn {
  display: inline-block;
  line-height: 30px;
  border-radius:5px;
  font-size: 14px;
  padding: 0px 15px;
  border: 1px solid #dde2e6;
  box-shadow: -2px 2px 4px rgb(0 0 0 / 4%);
  margin: 1px
}

.area-btn img{
  display:inline-block;
  vertical-align:middle;
  margin-right:5px;
  margin-top:-1px;
  /*height:18px*/
}

.area-btn.view{
  background:#fff url(../images/view_icon.png) no-repeat 14px center;
  padding:0 15px 0 30px
}

.link-btn {
  display: inline-block;
  background: url(../images/link_icon_g.png) no-repeat left center;
  background-size: 13px;
  padding-left: 18px;
  color: #5d5d5d;
  font-size: 15px
}

.box {
  border-radius: 10px;
  padding: 20px 25px;
  border: 1px solid #9fd8ff;
  background: #fff;
  position: relative;
}

.box .tit {
  font-weight: 500;
  color: #256ef4;
  margin-bottom: 10px
}

.ntc-text {
  display: block;
  padding-left: 20px;
  background: url(../images/ntc_icon.png) no-repeat;
  background-position: left 2px;
  font-size: 15px;
  text-align:left;
  color: #5d5d5d
}

.dot-text {
  display: block;
  padding-left: 12px;
  font-size: 15px;
  color: #5d5d5d;
  text-align:left;
  position: relative;
}

.dot-text::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #fff;
  border: 2px solid #06467c;
  position: absolute;
  left: 0;
  top: 8px;
}

.color-tag{
   display:inline-block;
   vertical-align:middle;
   margin-left:20px
}

.color-tag em{
   display:inline-block;
   padding:0px 20px;
   position:relative;
}

.color-tag em::after{
   content:"";
   width:20px;
   height:20px;
   position:absolute;
   left:0;
   top:50%;
   transform: translateY(-50%);
}

.docu-btn{
  display:inline-block;
  margin:0px 5px;
  margin-bottom:-2px;
  width:16px;
  height:17px;
  background: url(../images/document_icon.png)
}

.file-download {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #c8cbd0;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  line-height: 44px;
  padding: 0 15px 0 40px;
  font-size: 15px;
  background: #fff url(../images/ct_down_icon.png) no-repeat 15px center
}

.file-download.view{
  background: #fff url(../images/window_icon.png) no-repeat 20px center;
  padding: 0 20px 0 38px;
}

.basic-btn{
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #c8cbd0;
  line-height: 44px;
  padding: 0 15px;
}

.mail {
  padding-left: 25px;
  background: url(../images/ct_mail_icon.png) no-repeat left center
}

.map{
  width:100%;
  height:auto;
  border-radius:20px;
  background:#f5fafe;
  border:8px solid #dbeefa;
  overflow:hidden;
}

.map iframe{
  width:100%;
  height:600px
}

.map img{
  width:100%
}

.map-btn{
  display: inline-block;
  border-radius: 55px;
  border: 1px solid #e2e7eb;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  line-height: 55px;
  padding: 0 25px 0 60px;
  background: #fff url(../images/naver_map_icon.png) no-repeat;
  background-position: 25px center;
  background-size:25px;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  font-size:19px;
  letter-spacing:-0.5px;
  position:absolute;
  right:40px;
  top:50%;
  transform:translateY(-50%);
  z-index:2
}

.map-btn .svg-icon.ico-go{
  mask-position: center 8px;
  mask-size: 18px;
}

.tab-content{
   display:block;
   position:relative;
}

.item-background{
  margin-bottom:20px;
  border-radius:30px;
  border:10px solid #e2e7eb;
  overflow:hidden;
}

.item-background .video-js{
  font-size:12px
}

.item-background .vjs-poster{
  background-color:#fff;
  background-size: cover
}

.picture{
  display:inline-block;
  text-align:center;
  overflow:hidden;
  margin:auto;
  width:100%
}

.picture img{
  width:100%;
  height:100%;
  border-radius:25px;
  object-fit: cover;
}

.picture span{
  font-size:14px;
  color:#5d5d5d
}

.picture.liq{
  display:block;
}

.picture.liq img{
  width:auto;
}


/*** area-list ***/
.area-list{
  margin:10px 0
}

.area-list li{
  margin:0 5px 5px 0
}

.area-list .view{
  background: #f9fdff;
  border: 1px solid #e2e7eb;
  border-radius:8px;
  padding:35px;
  margin-top:5px;
  height:400px;
  overflow-y:auto;
  /*display:none*/
  position:relative;
}


/*** theseas ***/
.theseas{
  display:inline-block;
  width:100%;
  margin-bottom:30px
}

.theseas section{
  padding:0 25px 0 0
}

.theseas .ol-box{
  padding:30px 25px
}


/*** seas-process ***/
.seas-process{
  text-align:center;
}

.seas-process .box{
  width:170px;
  height:97px;
  padding:10px 15px;
  margin:5px auto;
  position:relative;
  border:1px solid #256ef4;
  background:#e9f6ff
}

.seas-process .box.list{
  height:auto;
}

.seas-process .box.result{
  height:auto;
  border:1px solid #ff7444;
  background:#ffece6
}

.seas-process .box.result .dot-text::after{
  border:2px solid #ff7444
}

.seas-process .box span{
  font-size:15px
}

.seas-process .box .dot-text{
  color:#000
}

.seas-process .sp-1,
.seas-process .sp-2,
.seas-process .sp-3{
  position:relative;
  padding:0 5px;
  display:inline-block;
  vertical-align:middle;
}

.seas-process .sp-1,
.seas-process .sp-2{
  vertical-align:bottom;
}

.seas-process .arrow div{
  display:inline-block;
  position:relative;
  text-align:center;
  font-size:14px;
  line-height:20px
}

.seas-process .bd .bd-area{
  display:inline-block;
  position:relative;
}

.seas-process .bd .bd-area.arw{
  vertical-align:top;
  margin-top:15px;
  font-size:14px
}


/*** grid-gallery ***/
.grid figure a{
  display: block;
}

.grid figure a:focus{
  outline: 1px dashed #999;
}


/*** paging ***/
#paging {
  margin: 30px auto 0px;
  width: 100%;
  text-align: center
}

#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: 5px;
  background: #fff;
  width: 37px;
  height: 37px;
  line-height: 37px;
  font-size: 15px;
}

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



/*** modal ***/
.modal{
  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);
  display:none;
}

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

.modal-content .head{
  position:sticky;
  z-index:100;
  top:0;
  background:#fff;
  line-height:50px;
  height:50px;
  padding:0px 20px;
  font-weight:500;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
}

.modal-content .head h2{
  font-weight: 500;
  font-size: 18px;
  color: #053863;
  height:50px;
  line-height: 50px;
  position: relative;
  text-align:center;
  margin-bottom: 20px
}

.modal-content .head h2::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: url(../images/dot.png) repeat;
  height: 5px;
}

.modal-content .cont{
  padding:0 20px 40px
}

.modal-content .close {
  background: url(../images/close_sml_btn.png) no-repeat center center;
  background-size: 11px;
  width: 14px;
  height: 14px;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  border: 0;
}

.modal-content .close:focus{
  outline: 1px dashed #999;
}

.modal-content .sub_close {
  background: url(../images/close_sml_btn.png) no-repeat center center;
  background-size: 11px;
  width: 14px;
  height: 14px;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  border: 0;
}

.modal-content .md-btn{
  display: inline-block;
  text-align:center;
  width:100%;
  padding:0 20px 40px
}

.modal-content .md-btn a{
  display: inline-block;
  color: #5d5d5d;
  border: 1px solid #dde2e6;
  border-radius: 5px;
  background: #fff;
  height: 44px;
  line-height: 43px;
  font-size: 16px;
  padding: 0px 15px;
}

.modal-content .md-btn a.em{
  background:#256ef4;
  border:1px solid #256ef4;
  color:#fff;
}

.modal-content.window{
  padding:20px;
  background:none;
  box-shadow:none;
  margin:0;
  width:100%;
  height:100%
}

.modal-content.window h2{
  font-weight: 500;
  font-size: 18px;
  color: #053863;
  position: relative;
  border-bottom:1px solid #e2e7eb;
  padding-bottom:15px;
}

.modal-content.window .abox{
  margin-top:20px;
  height:200px;
  overflow-y: auto;
}

.modal-content.window .cont{
  padding:20px 0
}

.modal-content .area-tab{
  padding:0 20px;
  margin-bottom:15px
}

.modal-content .italic {
    font-style: italic;
}

/*** open-pop ***/
.open-pop {
  position: absolute;
  z-index: 1000;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  overflow-y: auto;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #e2e7eb;
  overflow: hidden;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.05);
  display: none;
}

.open-pop .close {
  background: url(../images/close_sml_btn.png) no-repeat center center;
  background-size: 9px;
  width: 14px;
  height: 14px;
  position: absolute;
  right: 10px;
  top: 10px
}

.open-pop .cont {
  padding: 10px
}

/*
.noimage img{
  width:80% !important;
}
*/

.privacylist h4 img{
  display:inline-block;
  vertical-align: middle;
    height: 50px
}


/*** tooltip ***/
.tooltip {
    position: relative;
    display: block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position:absolute;
    z-index:1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 5px;
}

.tooltip .tooltip-top {
    width: 120px;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltip-top::After {
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: black transparent transparent transparent;
}




/*** kolas ***/
.kolas .kolas-img{
  float:right;
  width:300px;
}

.kolas .kolas-img img{
  width:100%
}

.kolas .attach-history{
  float:left;
  width:calc(100% - 350px);
  margin-top:20px;
  padding:50px;
  background-color:#f5fafe;
  border: 1px solid #e2e7eb;
  border-radius:20px;
}

.kolas .attach-history::before{
  left:300px;
}

.kolas-org{
  position:relative;
}

.kolas-org::after{
  content:"";
  width:1px;
  background-color:#ccc;
  height:750px;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top:5px;
  z-index:1;
}

.kolas-org .area{
  background-color:#fff;
  min-height:70px;
  padding:20px;
  text-align:center;
  width:200px;
  border-radius:10px;
  font-size:18px;
  font-weight:500;
  margin:20px auto;
  position:relative;
  z-index:2;
}

.kolas-org .area span{
  display: block;
  font-size:14px;
}
/*
.kolas-org .area::before{
  content:"";
  width:1px;
  background-color:#ccc;
  height:50px;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top:-50px;
  z-index:1;
}
*/
.kolas-org .org-1 .navy{
  background-color:#143962;
  color:#fff
}

.kolas-org .org-1 .sky{
  background-color:#256ef4;
  color:#fff
}

.kolas-org .org-1, .kolas-org .org-2, .kolas-org .org-3{
  margin-bottom:50px;
  position: relative;
}

.kolas-org .org-2::after{
  content: "";
  width: 50%;
  height: 220px;
  border: 1px solid #ccc;
  border-bottom:0;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.kolas-org .org-3::after{
  content: "";
  width: 66%;
  height: 220px;
  border: 1px solid #ccc;
  border-bottom:0;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.kolas-org ul{
  display: flex;
  justify-content: space-around;
  position:relative;
}

.kolas-org .l-navy .area{
  background-color:#fff;
  border:2px solid #143962;
  color:#143962;
}

.kolas-org .l-sky .area{
  background-color:#fff;
  border:2px solid #256ef4;
  color:#256ef4;
}

.kolas-org .b-navy .area{
  border:1px solid #d9ebff;
  background-color:#d9ebff;
  color:#143962;
}



/*** satis-box ***/
.satis-box{
  border: 1px solid #e2e7eb;
  border-radius:5px;
  overflow:hidden;
}

.satis-box .stm{
  padding: 2.5rem;
  background-color: #f5fafe;
  border-bottom: 1px solid #e2e7eb;
  position: relative;
  display: inline-block;
  width: 100%;
}

.satis-box button{
  position: absolute;
  right:25px;
  top:50%;
  transform: translateY(-50%);
}

.satis-box .tit{
  font-weight:600;
  display: inline-block;
  vertical-align: middle;
}

.satis-box .fieldset{
  display: inline-block;
  vertical-align: middle;
  margin-left:20px
}

.satis-box .sbtm .info{
  display: flex;
  flex-wrap: wrap;
  gap: 0 15px;
  padding:2.5rem;
}

.no-data{
  border: 1px solid #dde2e6;
  background-color: #f5fafe;
  width: 100%;
  text-align: center;
  padding: 50px 0;
  border-radius: 5px;
}



@media screen and (max-width:1499px) {
  #location-bar {width: 100%;border-radius: 0;border-left: 0;border-right: 0}
  #location-bar .home { border-radius: 0}

  .sub-content {padding: 30px 0 70px}
  .sub-content.wide{padding:0 0 70px 0}
  .plan .sub-content{padding:30px}
  .plan .share-cont .area{right:30px}
  .share-cont {margin: 0; max-width: 100%}

  .open-nuri{margin:auto; border-top:1px solid #dbeefa; border-radius:0}
  .item-list .list li{width:24%}
}

@media screen and (max-width:1299px) {
  .sub-content{float:none; width:100%; max-width: var(--krds-contents-wrap-size); padding-left: var(--krds-contents-padding-x); padding-right: var(--krds-contents-padding-x);}
  .sub-title h3{max-width: var(--krds-contents-wrap-size); padding-left: var(--krds-contents-padding-x); padding-right: var(--krds-contents-padding-x);}
  .plan-box .list{padding:35px 30px}
  .plan-box .tit{font-size:18px}
  .plan-box li.dot-text{font-size:16px}

  .photo-data li{width:23.5%}
  .photo-data li:nth-child(4n){margin-right:0}
  .photo-data li:nth-child(5n){margin-right:2%}

  .vision-wrap .vision{width:100%}
  .vision.type2.add{padding:50px 0 0 0}
  .vision.type2.add .way ul{width:100%}
  .vision.type2.add .way li{width:100%; background:none; float:none; display:inline-block; height:auto; padding:25px; margin-bottom:10px}
  .vision.type2.add .way li:last-child{margin-bottom:0}
  .vision.type2.add .way li span{position:inherit; left:auto; top:auto; transform:none; width:200px; margin-right:20px; word-break:keep-all; display: inline-block; vertical-align:middle; padding:0}
  .vision.type2.add .way .addition{position:inherit; top:auto; width:calc(100% - 230px); display: inline-block; vertical-align:middle;}
  .vision.type2.add .way .addition li{padding:0 0 0 12px;}

  .board-list .subject {width: 55%}
  .area-tab{border:0; margin-bottom:30px}
  .area-tab li{width:19%; margin:0.5%;}
  .area-tab li a{width:100%; border: 1px solid #e2e7eb; border-radius:5px; line-height:40px; font-size:15px; padding:0px 5px; text-align:center;}
  .area-tab li.on a{border: 1px solid #256ef4;}
  .area-tab li.on a::after{content:none}

  .theseas section, .theseas section:last-child{float:none; width:100%}
  .theseas section{padding:0; margin-bottom:30px !important}
  .theseas section:last-child{margin:0; padding:0}
  .seas-process.x-scroll{overflow-x: auto;}
  .seas-process.x-scroll .scroll-area{min-width:716px}

  .satis-box .fieldset{display: block; width:100%; margin:20px 0 0 0}
}

@media screen and (max-width:999px) { 
  .sub-content h4{font-size:22px}
  .sub-content h4 span{font-size:15px; line-height:normal;}
  .sub-content h5{font-size:20px;}
  .sub-content h6{font-size:19px}
  .sub-content article{padding:20px 0}
  .sub-content .tbox-wrap h4{right:30px; top:30px;}
  .sub-tab{margin-bottom:30px}
  .sub-tab > ul > li{width:49.5%}
  /*.m-plan .sub-content{padding-left: var(--krds-contents-padding-x); padding-right: var(--krds-contents-padding-x);}*/

  .system-pic .tit{font-size:23px; line-height:29px}
  .system-pic li.em{font-size:17px;}
  .system-pic li .md{word-break:break-all; line-height:21px}

  .donut-ig{height:auto;}
  .donut-ig .title{width:400px; height:400px; background-size:400px}
  .donut-ig .title{padding-top:180px}
  .donut-ig .list li{width:100%; position:inherit; display: inline-block; border-bottom:1px solid #e2e7eb; padding:20px 0}
  .donut-ig .list li.d2{transform:none}
  .donut-ig .list li:nth-child(even) .tit{float:left;}
  .donut-ig .list li:nth-child(even) .con{float:right; width:calc(100% - 220px)}
  .donut-ig .list li:nth-child(odd) .tit{float:right;}
  .donut-ig .list li:nth-child(odd) .con{float:left; width:calc(100% - 220px)}
  .donut-ig .list li ul li{border:0; padding:0 0 0 12px}
  .donut-ig .list .con{padding:30px 0 0 0}

  .lca .framework::before{right:-35px}
  .lca .framework li::after{right:-30px}

  /*responsive*/
  .board-list .subject, .board-list table col{width:70% !important}
  .board-list table thead{display:none}
  .board-list table tbody tr{border-bottom:1px solid #dde2e6}
  .board-list table tbody tr td{/*width:100% !important;*/ display:-webkit-box; padding:5px 8px; border-bottom:none; font-size:14px; line-height:20px}
  .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; /*-webkit-box-flex:0; flex:0 0 70px;*/ display: table-caption; width:65px; font-weight:500; font-size:13px; color:#053863; text-align:left; content:attr(data-label)}
  .board-list .date, .board-list .no{font-size:13px}
  .board-list .subject{padding:5px 8px!important}
  .board-list .reply .subject img{display:none}
  .board-view .contview img{width:100%}
  .hd-search .btn{padding-top:10px; border-top:1px solid #e2e7eb; padding-top:15px; margin:0; margin-top:15px; width:100%}

  .photo-gallery li{width:49%;}
  .photo-gallery li:nth-child(2n){margin-right:0}
  .photo-gallery .thumbnail{height:140px}
  .photo-gallery .tit{font-size:14px; padding:7px 15px}
  .photo-data li, .photo-data li:nth-child(5n){width:48.5%; margin-right:3%}
  .photo-data .thumbnail{height:135px}
  .photo-data .text{padding:17px}
  .photo-data li:nth-child(2n){margin-right:0}
  .photo-grid li, .photo-grid.fo li, .photo-grid.th li{width:49%}
  .photo-grid.th li:nth-child(3n){margin-right:2%}
  .photo-grid li:nth-child(2n){margin-right:0 !important}

  .video-grid .thumbnail{height:220px}
  .viewer-gallery li{height:300px}
  .viewer-gallery .date{padding:10px 15px}

  .ebook-list li{width:30.6%}
  .ebook-list li:nth-child(3n){margin-right:0}
  .ebook-list li:nth-child(4n){margin-right:4%}

  .vision-wrap h4{line-height:55px; margin-bottom:30px}
  .vision-wrap .vision{padding:40px 30px}
  .vision-wrap .diagram{background:none;}
  .vision-wrap .diagram li{width:49%; margin:0 1% 1% 0}
  .vision .title{font-size:34px; line-height:43px; margin-bottom:30px}
  .vision .cirbox{width:100%;}
  .vision .vinfo-tit li .area{font-size:18px; line-height:25px}
  .vision .t-vision-md{width:250px; height:250px; font-size:28px}
  .vision .t-vision-md.sky{font-size:25px}
  .vision .t-vision-md span{font-size:13px; line-height:18px}
  .vision .t-vision-con{text-align:center; width:100%}
  .vision .t-vision-con li{float:none; display:inline-block; vertical-align:top; margin:10px; width:120px; height:120px; padding-top:85px; font-size:16px; line-height:22px}
  .vision .t-vision-con.lg li{width:31%; height:auto; border:0; box-shadow:none; background-color:inherit; padding:125px 15px 10px 15px; margin:0}
  .vision .t-vision-con.lg.nm li{width:100%; padding:0; margin-bottom:20px}
  .vision .t-vision-con.lg.nm li:last-child{margin-bottom:0}
  .vision .t-vision-con.nm li .md{position:inherit; left:auto; top:auto; transform:none; width:auto;}
  .vision .t-vision-con li.t1, .vision .t-vision-con li.t2, .vision .t-vision-con li.t3, .vision .t-vision-con li.t4{background-size:50px}
  .vision .t-vision-con li.sh1, .vision .t-vision-con li.sh2, .vision .t-vision-con li.sh3, .vision .t-vision-con li.sh3{background-size:50px; padding-top:70px; background-position:center 30%;}
  .vision .t-vision-con li.sh5{background-size:40px; padding-top:70px; background-position:center 30%}

  .vision.type2 .way .tit{margin-right:0}
  .vision.type2 .way .tit::after{transform:none; border:0; top:auto; right:auto; bottom:-30px; left:50%; transform: translateX(-50%); width:auto; height:42px; border-left:5px dotted #256ef4;}
  .vision.type2 .way li{float:none; display:inline-block;}
  .vision.type2 .way li{width:190px; height:190px; background-size:190px !important}
  .vision.type2 .project li{width:27%; height:110px}
  .vision .a-tit{font-size:27px; line-height:40px}
  .vision.type3 li{float:none; display:inline-block; width:150px; height:150px}

  .lab-menu .text{float:none; width:100%}
  .lab-menu ul{float:none; width:100%}
  .lab-history .history{background:none; margin-top:70px}
  .lab-history .history::before{content:none}
  .lab-history .tit{height:54px; border-radius:54px; width:200px;}
  .lab-history .tit::after{height:40px; border-radius:30px; width:180px}
  .lab-history .tit span{font-size:21px}
  .lab-history .history .cont{border-bottom:1px solid #e2e7eb; margin-bottom:30px}
  .lab-history .history .cont li .year{font-size:18px}
  .lab-history .history .cont li::after{top:8px}
  .lab-history .history .cont:nth-child(odd) ul, .lab-history .history .cont:nth-child(even) ul{width:100%; float:none; text-align:left;}
  .lab-history .history .cont:nth-child(odd) li::after, .lab-history .history .cont:nth-child(even) li::after{right:auto; left:0}
  .lab-history .history .cont:nth-child(odd) li, .lab-history .history .cont:nth-child(even) li{padding:0 0 0 20px}
  .lab-history .history .cont:nth-child(even) li .con{float:none; text-align:left;}

  .history-wrap .tit{padding:50px 40px; height:160px}
  .history-wrap .tit::after{right:40px; font-size:12px}
  .history-wrap .tit h4{font-size:50px}
  .history-wrap .tit span{font-size:17px;}
  .history-wrap .history .cont li .pic{width:100%}
  .attach-history.profile::after{content:none}

  .greeting-wrap .profile{float:none; width:100%; /*height:400px;*/ margin-top:0;}
  .greeting-wrap .con{margin-top:50px}
  .greeting-wrap .em{text-align:center; font-size:30px; line-height:40px; margin-bottom:30px}
  .greeting-wrap .em::after{width:100%; left:0}
  .greeting-wrap .con, .greeting-wrap .em, .org-chart li{float:none; width:100%}

  .app-surface{padding:20px}
  .app-surface::after, .org-chart li.float::after, .org-chart ul::after, .org-chart ul::before{content:none}

  .org-chart{width:100%}
  .org-chart::after{content:""; width:1px; height:98%; background:#c2c6d0; position:absolute; top:0; left:51%; transform:translateX(-51%)}
  .org-chart li{height:auto; margin-bottom:50px}
  .org-chart li::before{top:0; height:380px}
  .org-chart li>.sgroup{margin-top:30px}
  .org-chart > ul > li:first-child{padding-top:0}

  .tbox-wrap .tbox{text-align:left; padding:40px}
  .tbox-wrap .tbox p{width:68%; word-break:keep-all;}

  .system-box ul:last-child li li::after, .system-box ul:last-child li li:nth-child(2)::before{content:none}
  .system-box ul .tit{font-size:18px}

  .contact-box{height:auto; border-radius:10px}
  .contact-box .tit{float:none; width:100%; height:44px; line-height:44px}
  .contact-box .con{float:none; width:100%; padding:15px}

  .lab-org .inner::before{height:90%}
  .lab-org .l-org-1{width:180px; line-height:65px; font-size:18px}
  .lab-org .l-org-2{margin-top:30px}
  .lab-org .l-org-2::before{content:none}
  .lab-org .l-org-2 li::after{content:none}
  .lab-org .l-org-2 li{display: inline-block; width:100%; margin-bottom:30px}
  .lab-org .l-org-2 .team{font-size:16px; line-height:48px}
  .lab-org .l-org-2 .work p{padding:13px 20px}

  .info-box{height:auto; line-height:normal;}
  .info-box .tit{float:none; width:100%; height:44px; line-height:44px}
  .info-box .list{width:100%}
  .info-box .list ul{width:100%}
  .info-box .list li{padding:15px; vertical-align:top}
  .info-box .list li .tt{float:none; width:100%; margin:0 0 5px 0; text-align:left;}
  .info-box .list li .dot-text{font-size:15px}

  .anniversary .sub-explan .tit{font-size:17px; width:16%}
  .anniversary .sub-explan .dot-text, .anniversary .sub-explan .text{font-size:16px; width:80%}

  .intro100-wrap::after{content:none}
  .intro100-wrap .tit{padding:70px 40px}
  .intro100-wrap .tit img{width:100%}
  .intro100-wrap .con{padding:40px;}
  .intro100-wrap .logo{left:20px}
  .intro100-wrap .con span{font-size:21px}

  .result-detail li.dot-text{font-size:16px}
  .result-detail .abox li{font-size:15px}

  .river{padding:50px;}
  .river .text{font-size:25px; line-height:33px}
  .area-tab li{width:32%;}

  .all-time li::after{top:20px; right:20px}
  .all-time .view{background:none; padding:20px 0 0; border-top:2px dotted #e2e7eb}
  .p-banner::before{height:40px}
  .p-banner .title{font-size:30px; line-height:37px; word-break:keep-all;}

  .box-list li{float:none; width:100%; height:auto; padding:30px 60px 30px 30px}
  .item-list .list li{width:32%}
  .app-process li{width:140px; height:140px}
  .profile-list article{padding:30px; height:920px}
  .function .change li{width:30%}

  .calendar-wrap .modal-content{height:165px; right:0}
  .fluid img{width:100%}
  .nb span{font-size:13px}
  .picture.liq img{width:100%}
  .map-btn{position:inherit; transform:none; right:auto; top:auto; margin-bottom:20px; line-height:44px; font-size:15px; background-size:20px; padding:0px 20px 0 45px; background-position:20px center;}

  .kolas .attach-history .title{width:160px}
  .kolas .attach-history .title::after{right:7px}
  .kolas .attach-history::before{content:none;}
  .kolas .attach-history ul{width:calc(100% - 160px)}

  .satis-box button{position: inherit; top:auto; right:auto; transform:none; float:right; margin-top:20px}
}

@media screen and (max-width:767px) {
  .visual-wrap {height: 225px; background: linear-gradient(75deg, #256ef4, #3daafb)}
  .visual-wrap .visual {text-align: left; padding:27px 30px 0; background-image: none !important;}
  .visual-wrap .visual::after {content: none}
  .top-visual .visual h2 {font-size: 30px}
  #location-bar li {width: 25%}
  #location-bar li:nth-child(4) {border: 0}
  .share-cont {position: absolute; top: 45px; right: 20px}
  .share-cont a {border: 0}
  .share-cont .area {position: relative; bottom: auto; right: auto;}
  .plan .share-cont .area{right:auto; top:auto;}
  .share-cont .modal-content{left:-240px; top:50px; width:280px !important; height: 195px !important; border-radius:8px;}
  .share-cont .url .btn{border: 1px solid #e2e7eb;}

  .visual-wrap{height:95px}
  #location-bar{display:none}
  /*#location{display:inline-block; width:100%; margin-top:10px; text-align:right; padding:0px 20px}*/

  .share-cont{top:25px}
  .sub-content{line-height:24px}
  .sub-content.wide{padding:0 0 60px 0}
  .sub-content h4{font-size:22px; line-height:29px}
  .sub-content h4 span{font-size:13px; padding:0px 13px}
  .sub-content h4 span::after{height:13px; top:4px}
  .sub-content h5{font-size:19px;}
  .sub-content h6{font-size:17px}
  .sub-content section{margin-bottom:50px}
  .sub-content .tbox-wrap h4{width:100px; line-height:100px; font-size:18px}
  .sub-title h3{/*margin:20px 20px 0;*/ font-size:25px; line-height:30px}
  .sub-tab > ul > li{width:49.3%}
  .sub-tab > ul > li > a{padding:13px 0;}

  .plan .sub-content{padding:30px 20px 60px 20px}
  .plan .sub-title{padding:15px 0 10px 0; margin:0 !important}
  .plan .sub-title h3{font-size:33px; line-height:35px; padding:0}
  .plan-box .tit{font-size:17px; line-height:23px; background-size:60px; padding-top:110px; float:none; width:100%; border-radius:0}
  .plan-box .tit strong{display:inline-block;}
  .plan-box .tit::after{background:url(../images/dot.png); height:5px; width:170px; top:auto; transform:none; bottom:0px; left:50%; transform:translateX(-50%);}
  .plan-box .title{font-size:25px; line-height:33px;}
  .plan-box .title strong{display:block}
  .plan-box .title span{font-size:15px; line-height:22px; word-break:keep-all;}
  .plan-box .list{padding:35px 30px; float:none; width:100%; border-radius:0}
  .plan-box li{float:none; width:100%; margin-right:0; height:auto; overflow:hidden;}
  .plan-box li.dot-text{font-size:15px}

  .p-banner{padding:50px 30px}
  .p-banner .title{font-size:28px; line-height:35px}
  .purpose-ig .area{text-align:center}
  .purpose-ig .ig-1{float:none; width:100%}
  .purpose-ig .ig-1::after{background:url(../images/gra_arrow_btm_sml.png); width:100px; height:69px; right:auto; top:auto; transform:none; left:50%; transform: translateX(-50%);}
  .purpose-ig .ig-2{float:none; display:inline-block; margin-top:80px}
  .purpose-ig .ig-2 li{font-size:16px}

  .process-arrow li, .process-arrow.sml li{width:145px; height:145px; background-size:145px !important; margin-right:20px}
  .process-arrow li:nth-child(2n){margin-right:0}
  .process-arrow li::before, .process-arrow.sml li::before{width:125px; height:125px}
  .process-arrow li::after{right:-20px}
  .process-arrow li .md{width:100%;}
  .process-arrow .tit{font-size:16px; padding:0}
  .process-arrow .tit span{font-size:12px; line-height: normal;}
  .process-arrow .con{font-size:13px}
  .process-arrow .con strong{font-size:14px}

  .intro100-wrap .tit{padding:40px 30px}
  .intro100-wrap .tit .mobile{display:block}
  .intro100-wrap .tit .pc{display:none}
  .intro100-wrap .con{padding:30px; font-size:16px; line-height:24px;}
  .intro100-wrap .con p{margin-bottom:15px}
  .intro100-wrap .logo{left:0}
  .intro100-wrap .con span{font-size:16px}

  .donut-ig .title{display:none}
  .donut-ig .list li:nth-child(even) .con{width:calc(100% - 150px)}
  .donut-ig .list li:nth-child(odd) .con{width:calc(100% - 150px)}
  .donut-ig .list .tit{width:120px; height:120px; font-size:15px; line-height:20px}
  .donut-ig .list .tit .md{padding:0}
  .donut-ig .list .con{padding:0}
  .donut-ig .list .con em{font-size:15px; line-height:20px}

  .lca .framework{float:none; width:100%; display:inline-block;}
  .lca .framework::before{background-image: url(../images/both_arrow_vertical.png); width:25px; height:25px; top:auto; transform:none; bottom:-40px; left:50%; transform:translateX(-50%);}
  .lca .framework ul{width:57%}
  .lca .framework .re{width:35%;}
  .lca .framework .re em{font-size:17px}
  .lca .framework .tit{font-size:21px; margin-bottom:20px}
  .lca .directapp{float:none; width:100%; height:auto;}
  .lca .directapp .tit{font-size:21px}

  .vision-wrap .vision{padding:30px 0px}
  .vision-wrap h4{line-height:45px; width:120px; font-size:20px}
  .vision-wrap .diagram li{float:none; width:100%; height:auto; margin:0 0 10px 0}
  .vision-wrap .diagram li .way{height:auto; padding:15px 0}
  .vision-wrap .diagram li .way .md, .vision-wrap .diagram li .list li .md{position:inherit; padding:0; left:auto;}
  .vision-wrap .diagram li .list li{height:auto;}
  .vision .title{font-size:26px; line-height:35px}
  .vision .title span{font-size:17px}
  .vision .title .underline::after{content:none}
  .vision .logo{margin-bottom:20px}
  .vision .logo img{width:240px}
  .vision .cirbox{border-radius:20px; padding:12px}
  .vision .cirbox ul{line-height:65px; position:relative; border-radius:15px;}
  .vision .cirbox ul::after{content:""; width:100%; height:1px; background:#e2e7eb; position:absolute; left:0; top:50%; transform: translateY(-50%);}
  .vision .cirbox li{font-size:17px; width:50%}
  .vision .cirbox li:nth-child(2n){border-right:0}
  .vision .vinfo-tit li{width:49%; margin:0 2% 2% 0}
  .vision .vinfo-tit li:nth-child(2n){margin-right:0}
  .vision .vinfo-tit li{border-radius:15px; padding:12px}
  .vision .vinfo-tit li .area{font-size:16px; line-height:23px; border-radius:12px}
  .vision .vinfo-con .list{padding: 10px 0}
  .vision .vinfo-con > ul > li{float:none; width:100%; margin-bottom:10px}
  .vision .vinfo-con > ul > li:last-child{margin-bottom:0}
  .vision .t-vision-con.mt50{margin-top:30px !important}
  .vision .t-vision-con.lg li{padding-top:80px; float:none; width:100%;}
  .vision .t-vision-con.lg li strong{display:block;}
  .vision .t-vision-con li{margin:20px;}
  .vision .a-tit{font-size:23px; line-height:30px}
  .vision.type1 ul li:first-child{float:left; margin-left:0}
  .vision.type1 ul li:last-child{float:right; margin-right:0}
  .vision.type1 ul.lv1, .vision.type1 ul.lv2{float:none; display: inline-block; width: 100%;}
  .vision.type2 .way .tit{width:150px; height:150px;}
  .vision.type2 .way .tit span{font-size:21px}
  .vision.type2 .way li{width:150px; height:150px; background-size:150px !important}
  .vision.type2 .way li span{font-size:16px; line-height:22px; font-weight:400}
  .vision.type2.add .way li{border-radius:15px}
  .vision.type2.add .way li span{width:80px; margin-right:20px;}
  .vision.type2.add .way .addition{width: calc(100% - 110px);}
  .vision.type2.add .way .addition li{font-size:14px}
  .vision.type2 .project .tit{font-size:20px; line-height:40px; top:-47px}
  .vision.type2 .project li{width:44%; height:140px; font-size:15px; line-height:22px}
  .vision.type3 ul{padding-left:20px}
  .vision.type3 li{margin-bottom:-20px}
  .vision .purpose li.p1, .vision .purpose li.p2, .vision .purpose li.p3{background-position:center 0; background-size:75px}

  .inventory ul{height:auto;}
  .inventory li{float:none; margin:0 0 40px 0;}
  .inventory li::after{right:auto; top:60px; transform:none; left:50%; transform:translateX(-50%);}
  .inventory .re{font-size:21px}

  .viewer-downlink li{display:inline-block; width:100%; margin-bottom:10px}
  .viewer-downlink li:last-child{margin-bottom:0}
  .viewer-downlink li:first-child a, .viewer-downlink li:last-child a{border-radius:15px;}
  .viewer-downlink li a{border:1px solid #e2e7eb}

  .system-pic .tit{font-size:21px; width:55%; height:100px}
  .system-pic li{height:130px; font-size:14px}
  .system-pic li.em{font-size:15px;}
  .system-pic li .md{line-height:19px}
  .system-pic li .list li{width:24%}

  .video-list .thumbnail{float:none; width:100%; height:200px}
  .video-list .title{font-size:19px;}
  .video-list .text{float:none; width:100%; margin-top:20px}
  .video-list .info span{font-size:14px}

  .org-chart a{line-height:55px; font-size:17px}
  .org-chart li>.sgroup li a{font-size:16px; line-height:50px}
  .org-chart li.float:last-child::before{height:140px}
  .org-value li{font-size:14px}

  .item-list .item{flex:none; display:inline-block;}
  .item-list .tit{width:100%; padding:10px 0; text-align:center; font-size:17px}
  .item-list .tit .md{position:inherit; left:auto; top:auto; transform:none}
  .item-list .tit img{height:30px; display:inline-block; vertical-align:middle; margin:0 10px 0 0}
  .item-list .list{display:inline-block; width:100%}
  .item-list .blank .list{padding:20px}
  .item-list .list li{width:49%}
  .item-list .list li.full{width:99%;}
  .item-list .list li.full a{background-position:96% 48%}
  .item-list .list li a{font-size:15px; height:60px; line-height:18px}
  .item-list .list li a .md{word-break:keep-all; width:79%}
  .item-list .list li a span{display:block;}

  .anniversary .sub-explan{padding:35px 20px}
  .anniversary .sub-explan .tit{font-size:16px; display:block; width:100%; margin-bottom:10px}
  .anniversary .sub-explan .dot-text, .anniversary .sub-explan .text{font-size:15px; width:100%}

  .sub-explan{font-size:14px; line-height:21px; padding:20px; margin-bottom:30px}
  .sub-explan::before, .top-visual .visual span{display:none}
  .sub-explan .tit{font-size:17px; margin-bottom:10px}
  .sub-explan .address, .sub-explan .call, .sub-explan .fax{font-size:14px; line-height:19px; margin:3px 0}

  .river{padding:35px;}
  .river .text{font-size:19px; line-height:27px}
  .d-line{width:100%; font-size:19px}

  .system-box ul .tit{font-size:16px; line-height:50px; margin-bottom:10px}
  .system-box ul li li{line-height:21px; height:130px}
  .system-box ul:first-child li li, .system-box ul:last-child li li{margin-bottom:10px}
  .system-box strong{display:block; margin:0 0 10px 0; font-size:19px}

  .modal-content{width:100% !important; height:100% !important; border-radius:0; left:0; top:0; right:0; bottom:0; transform:none}
  .modal-content .auto img{width:100% !important}

  .app-surface .info a span, .dot-text, .hd-cont .count, .link-btn, .ntc-text, .sub-content h5 span{font-size:13px; line-height:normal;}
  .app-surface{padding:0;border-radius:15px;background:0 0}
  .app-surface .box{padding:25px; border-radius:15px; line-height:20px; font-size:14px}
  .app-surface .t-cont{font-size:17px;line-height:24px}
  .app-surface .info a{width:100%}
  .app-surface .info a strong{font-size:19px}
  .app-surface .info a.home strong{font-size:15px}
  .app-surface .btn a, .app-surface .btn button{width:48%; padding:0; text-align:center; margin:1%; font-size:14px}

  .hd-cont .count{margin: 10px 0; width:100%}
  .hd-cont .r-cont{float:none;width:100%}
  .hd-cont input,.hd-cont select{height:38px;font-size:13px;margin-bottom:1%}
  .hd-cont select,.hd-cont select.cate,.hd-cont select.org{width:100%; background-position:97% center !important}
  .hd-cont input.catesch{width:80%;margin:0}
  .hd-cont .show label{font-size:13px}
  .hd-cont .cal-input{width:46.5%}
  .hd-cont .hd-btn, .hd-cont .btn a{line-height:38px; font-size:14px}
  .hd-btn.refresh{background-size:18px; padding-left:33px}
  .hd-cont .btn{padding-top:10px; border-top:1px solid #e2e7eb; padding-top:15px; margin-top:15px; width:100%}
  .hd-search{padding:15px}
  .hd-search .form-btn-datepicker{top:20px; right:10px}
  .hd-cont .hd-search input, .hd-cont .hd-search select{margin-bottom:0}
  .hd-cont .hd-search select{background-position:90% center}
  .hd-cont .hd-search select.cate{width:30%}
  .hd-cont .hd-search select.detail{width:48.5%; background-position:92% center}
  .hd-cont .hd-search input.catesch{width:68%}
  .hd-cont input.full, .hd-cont select.full{width:99%; background-position:97% center}
  /*.hd-search li{display:block; width:100%; text-align: left;}*/
  .hd-search li.btn{text-align:center;}

  .board-btn{position:inherit; display:inline-block; width:100%; text-align:right; bottom:auto; margin-top:10px}
  .board-btn a{font-size:13px}

  .tbox-wrap .tbox{font-size:19px; line-height:26px; padding:30px}
  .tbox-wrap .tbox p.tt{display:none}

  .ol-box, .theseas .ol-box{padding:25px;}
  .ol-box .text{padding:25px 20px}
  .ol-box .thumbnail{width:100%}
  .ol-box .area{padding:20px}
  .ol-box .area .tit{margin-bottom:10px; font-size:16px}
  .ol-box .area .tit, .ol-box .area .con{float:none; width:100%}
  .ol-box .pic{padding:15px}
  .ol-box .pic span{width:30%; height:90px}

  .info-box .list li .tt{font-size:14px}
  .info-box .list li .dot-text{font-size:14px; line-height: 19px;}

  .nb-box .th{display:inline-block;}
  .nb-box .th li{width:100%; padding:20px; margin-bottom:10px}
  .nb-box .th li:last-child{margin-bottom:0}
  .nb-box li .dot-text{font-size:15px}

  .cont-table table, .info-table table{font-size:14px}
  .cont-table td,.cont-table th,.cont-table thead th, .info-table td,.info-table th,.info-table thead th{padding:11px; line-height:20px; height:auto;}

  .all-time .career-detail .dt{font-size:17px}
  .all-time li{float:none; width:100%}
  .all-time li .con span{font-size:14px;}

  .profile-list article{float:none; width:100%; height:auto; margin-bottom:20px}
  .profile-list article:last-child{margin-bottom:0}
  .profile-list .list .tt{font-size:18px}

  .open-nuri .mark{width:100%; margin:0}
  .open-nuri .mark img{width:auto;}
  .open-nuri .text{font-size:14px; display:block; width:100%; margin-top:10px}
  .open-nuri{text-align:center;}

  .board-list .label{font-size:12px; line-height:24px}
  .board-view table{font-size:15px}
  .board-view .tt{display:none}
  .board-view .subject th{font-size:27px}
  .board-view input, .board-view select{height:38px; font-size:13px}
  .board-view .input-file{width:84%}
  /*.input-file .file-name{width: calc(100% - 70px);}*/
  .board-view .input-file .file-name{height:38px; font-size:13px}
  .input-file .file-label{height:38px; line-height:38px;font-size:13px; padding:0 5px}
  .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}
  .board-view.write .plus-btn{line-height:34px; height:38px;}

  .board-toggle .tit{background:none; padding:0; width:100%}
  .board-toggle .text{background: url(../images/question_icon.png) no-repeat left center; padding-left: 30px;}
  .board-toggle .answer{font-size:14px; line-height:21px; padding: 20px 20px 20px 68px;}
  .board-toggle li a:hover{transform:translate(0,0);}
  .board-toggle li a .sel{width:100%; margin-bottom:5px; text-align:left;}
  .board-toggle li a div{font-size:15px; line-height:22px}

  .photo-list li a{padding:20px 0}
  .photo-list .ymd{display:none}
  .photo-list .ymd.mobile{display:inline-block; width:auto; font-size:13px; color:#999}
  .photo-list .thumbnail{width:120px; height:85px;}
  .photo-list .text{width: calc(100% - 150px);}
  .photo-list .text>.tit{margin-bottom:2px; font-size:17px}
  .photo-list .text>.nb{margin-bottom:10px}
  .photo-list .text>.con{display:none}

  .video-grid li{float:none; width:100%}
  .video-grid li:last-child{margin-bottom:0}
  .video-grid .date{padding:13px; line-height:1;}
  .video-grid .date>.month{font-size:21px}
  .video-grid .date span{font-size:12px;}
  .video-grid .thumbnail{height:200px}
  .video-grid .tit{font-size:15px; padding:10px 15px}

  .viewer-gallery li{width:100%; float:none}
  .viewer-gallery li:last-child{margin-bottom:0}
  .viewer-gallery .tit{font-size:19px;}
  .viewer-gallery .stit{margin:0}
  .viewer-gallery .date{padding:10px 10px 12px; line-height:1;}
  .viewer-gallery .date>.month{font-size:21px; margin-bottom:5px}
  .viewer-gallery .date span{font-size:12px;}

  .survey h2{font-size:22px}
  .survey h3{font-size:18px;}
  .survey .qtit{margin-bottom:10px}
  .survey .info{padding:15px}
  .survey .view{padding:15px}
  .survey .terms-box .inner{padding:15px; line-height:21px}
  .survey .abox{padding:15px}
  .survey .abox li{float:none; width:100%; margin:0 0 5px 0; padding:0}
  .survey .abox li:last-child{margin-bottom:0}
  .survey textarea{padding:15px}

  .ebook-list li{width:48%}
  .ebook-list li:nth-child(2n){margin-right:0 !important}
  .ebook-list li:nth-child(3n){margin-right:4%}
  .ebook-list .thumbnail{height:225px}
  .ebook-list .tit{font-size:14px; padding:7px 15px}

  .photo-grid li{padding:10px}
  .photo-grid li p, .photo-grid.th li p{height:100px}
  .photo-grid li .text{font-size:14px; margin-top:5px}
  .photo-grid li .text em{font-size:12px; line-height:17px}

  .ci-wrap .ci-m img, .ci-wrap .tbox img, .ci-wrap .cbox img{width:80%}
  .ci-wrap .ci-m{height:200px}
  .ci-wrap .ci-m .file-download, .ci-wrap .ci-m button{top:15px; right:15px;}
  .ci-wrap .tbox, .ci-wrap .cbox{height:100px}

  .function .major .con{margin-top:0}
  .function .major .con li{width:50%}
  .function .change li{width:47%}

  .area-tab li{width:48%; margin:1%}
  .area-tab li a{font-size:14px}

  .lab-menu{padding:0; background:none}
  .lab-menu ul{margin:0}
  .lab-menu .text .loca{font-size:17px; line-height:22px; margin:0}
  .lab-menu .text{display:none}
  .lab-menu ul{position:relative;}
  .lab-menu ul::after{content:""; height:1px; background:#e2e7eb; width:100%; position:absolute; left:0; top:50%; transform:translateY(-50%);}
  .lab-menu li{display:inline-block; width:50%; border-bottom:0}
  .lab-menu li:nth-child(2n){border-right:0}
  .lab-menu ul.odd::after{top:33.3%; transform:translateY(-33.3%);}
  .lab-menu ul.odd::before{content:""; height:1px; background:#e2e7eb; width:100%; position:absolute; left:0; top:66.6%; transform:translateY(-66.6%);}
  .lab-menu .odd li{border-right:0}
  /*.lab-menu ul.odd::after{content:none}*/
  .lab-history .history .cont li .year{font-size:18px}

  .box-list li{padding:20px 60px 20px 20px; line-height:20px}
  /*.box-list li::before{font-size:70px}*/

  .attach-history{overflow:hidden;}
  .attach-history .title{width:100%; float:none; background:#fff; padding:10px 0; margin-bottom:20px; font-size:25px}
  .attach-history .title::after{right:auto; left:120px; width:80%}
  .attach-history::before{left:12px; top:15px; height:100%}
  .attach-history ul{width:100%; float:none}
  .attach-history li{padding-left:35px}
  .attach-history li::before{left:0}
  .attach-history li::after{left:6px}

  .history-wrap .history .cont::before{height:100%; top:0}
  .history-wrap .history .cont li .year{font-size:28px; margin-bottom:15px}
  .history-wrap .history .cont li .pic{margin-top:15px}
  .history-wrap .history .cont li .con{line-height:20px}
  .history-wrap .history .cont li .con span{font-size:13px; line-height:18px}
  .history-wrap .history .cont li:nth-child(odd) .area{padding-left:20px}
  .history-wrap .history .cont li:nth-child(even) .area{padding-right:20px}
  .history-wrap .tit h4{font-size:44px}
  .history-wrap .tit::after{content:""}
  .history-wrap .tit span{margin-top:15px}

  .guide-detail .thumb{float:none; margin:auto; width:100%; height:155px}
  .guide-detail .intro{float:none; width:100%; margin-top:20px; padding-top:20px; border-top:2px dotted #e2e7eb}
  .guide-detail .intro .text{font-size:15px}
  .guide-detail .box{padding:20px}

  .result-detail .d-area{padding:25px}
  .result-detail .thumb{float:none; margin:auto; width:100%}
  .result-detail ul{float:none; width:100%; margin-top:20px; padding-top:20px; border-top:1px solid #e2e7eb}
  .result-detail li.dot-text{font-size:15px}
  .result-detail .abox ul{margin:0; padding:0; border:0}
  .result-detail .abox li{font-size:14px}

  .ntc-process li{width:48.9%; margin:0 2% 2% 0}
  .ntc-process li:nth-child(2n){margin-right:0}

  .cpl-process ul{display:inline-block; width:100%; text-align:center}
  .cpl-process li{width:125px; height:125px; font-size:14px; background-position:center 25px; padding-top:75px}
  .cpl-process li:last-child{margin-right:35px}

  .list-embox{margin:0}
  .list-embox li{flex:none; display:inline-block; width:100%;}
  .list-embox .tit{width:100%; display:block; flex:none; border-radius:15px 15px 0 0; padding:10px 0; margin:0; font-size:16px; text-align:center; }
  .list-embox .tit .md{position:inherit; top:auto; left:auto; transform:none}
  .list-embox .list{width:100%; line-height:22px; padding:20px}
  .list-embox .list .dot-text{font-size:15px;}
  .list-embox .list span{font-size:14px; line-height:19px}

  .contact-box .con{padding:0px 15px}
  .contact-box ul{table-layout:inherit;}
  .contact-box li{width:100%; display: inline-block; padding:15px 0}
  .contact-box li::after{border-bottom:2px dotted #256ef4; height:2px; width:100%; top:auto; bottom:0; transform:none}

  .cir-list li{padding:14px 0 14px 13px; line-height:22px; font-size:14px}
  .cir-list li::before{top:22px}
  .cir-list li ul li{padding:0 0 0 10px; line-height:20px}
  .cir-list .tt{font-size:16px; line-height:22px}
  .cir-list.api li .form-list li{padding:2px}
  .cir-list li .abox li::before{top:10px}

  .calendar-select{width:230px}
  .calendar-select .seldate{width:54%}
  .calendar-select .month, .calendar-select .year{font-size:19px}
  .calendar-wrap .schedule .list{display:none}
  .calendar-wrap .calendar table th{font-size:13px; line-height:33px}
  .calendar-wrap .calendar table td{height:55px; padding:10px; border:0; border-bottom:1px solid #e2e7eb}
  .calendar-wrap .calendar table td.on{border-top:2px solid #256ef4}
  .calendar-wrap .calendar table td.on::after{content:""; width:5px; height:5px; border-radius:5px; background:#256ef4; position:absolute; right:8px; bottom:8px}
  .calendar-wrap .date {font-size: 13px; /*height: 100%*/}
  .calendar-wrap .modal{position:fixed;}
  .calendar-wrap .modal-content {display:none;}
  .calendar-wrap .modal-content .close{top:25px}
  .calendar-wrap .modal-content.mobile{display:block; width:100%; height:100%; border-radius:0; left:0; top:0; right:0; bottom:0; transform:none}
  .calendar-wrap .modal .head{line-height:70px}
  .calendar-wrap .detail .tit {line-height: 21px; margin-bottom: 5px}

  .slide-photo{width:100%}
  .slide-photo .thumbnail{height:200px}
  .slide-photo .list li a{height:48px}
  .slide-photo .control a{margin-top:4px; width:20px}

  .board-view .contview .tit, .board-view .contview .con{display:block; width:100%; text-align:left;}
  .board-view .contview .question .con{font-size:17px; line-height:25px}

  .anniversary .file-download.view{line-height:50px; font-size:17px}
  .greeting-wrap .em{font-size:25px; line-height:34px}
  .app-process li .con{font-size:14px}
  .area-btn{font-size:13px; line-height:28px; padding:0px 10px}
  .area-btn.view{padding:0 10px 0 25px; background: #fff url(../images/view_icon.png) no-repeat 10px center;}
  .file-download{line-height: normal; font-size: 12px; background-size: 15px; padding: 5px 15px 5px 35px;}
  .mail{background-size:16px}
  .map iframe{height:400px}
  .dot-text::after{top:7px}
  .btn-wrap a.btn{font-size:13px; line-height:38px; float:none; padding:0px 15px}

  .box{padding:20px}
  .box .bd{display: block; margin-top:5px}
  .box .bd a{margin-left:0 !important}
  .abox{line-height:20px; padding:20px; font-size:14px}
  .abox .tt{font-size:16px}

  #paging li a {width: 30px; height: 30px; line-height: 30px; font-size: 12px;}
  #paging li img {height: 9px}

  .modal-content .md-btn a{font-size:15px; padding:0px 15px}
  .modal-content.window .abox{height:150px}
  .share-cont .modal-content{left:-235px;}
  .map-btn{text-align:right; display:block;}
  .area-list .view{padding:25px}
  .vision-img{width:100%}
  .lbicon{width:60px}

  .kolas .attach-history{background:none; border-radius:0; border:0; padding:0; margin-bottom:20px;}
  .kolas .attach-history, .kolas .kolas-img{float:none; width:100%}
  .kolas .attach-history .title{background:none; width:100%}
  .kolas .attach-history ul{width:100%}
  .kolas-org .area{width:auto; margin:10px; padding:15px; font-size:16px; line-height:20px; border-radius:5px;}
  .kolas-org .area span{font-size:13px; line-height:14px; margin-top:5px}
  .kolas-org::after{height:650px;}
  .kolas-org .org-2::after{height:200px;}
}

@media screen and (max-width:374px) {
  .sub-content h6{font-size:17px}
  .sub-tab li a{font-size:14px}
  .area-tab li a{font-size:13px; line-height:38px}

  .hd-cont .hd-btn {font-size: 13px; line-height: 35px}
  .hd-cont input.catesch {width: 78%}
  .hd-cont select, .hd-cont input {height: 35px;}
  .hd-cont .cal-input{width:46%}
  .hd-search{padding:15px 10px}

  .app-surface .info a {padding: 15px 10px; text-align: center; background: #fff !important}
  .process-arrow li{margin-right:0}

  .vision.type2.add .way li{padding:20px}
  .vision.type2.add .way li span{display:block; width:100%; margin-bottom:10px}
  .vision.type2.add .way .addition{display:block; width:100%}

  #paging ul {padding: 0px 4px}
  #paging li a {width: 26px; height: 26px; line-height: 26px;}
}