@charset "utf-8";

/* ------------------------	info.css	-----------------------------------------*/

/***** part01_02 *****/
.tg1{ line-height: 1.9; border-collapse:collapse;border-spacing:0;}
.tg1 td{border-color:#d5d5d5;border-style:solid;border-width:0.5px;
  font-size:16.5px;  overflow:hidden;padding:6px 15px;word-break:normal;}
.tg1 .tgleft{ width: 15%; text-align: center;}
.tg1 .tgright1, .tg1 .tgright2{width: 40%;text-align: left;padding:6px 15px;}

/*******************/

.inforBox {  position: relative;  display: block;  margin: 0 auto;  width: 90%;
  padding: 0px 50px;  overflow: hidden;  box-sizing: border-box;  text-align: center;}
.inforBox ul {  position: relative;  display: block;  width: 100%; margin: 0 auto; box-sizing: border-box; }
.inforBox ul li { position: relative; display: block;  float: left;  width: 48.5%;
  padding: 5px; margin: 10px 5px; text-align: center;  overflow: hidden;  box-sizing: border-box;}
.inforBox ul li a { position: relative; display: block; width: 99.4%; vertical-align: top;border: 1px solid #d5d5d5;}

.inforBox ul li a .info { display: inline-block; width: 95%; padding: 10px 0;  text-align: left;
  border-collapse: collapse;}
.inforBox ul li a .info .name, .inforBox ul li a .info .txt{display: inline-block; }
.inforBox ul li a .info .name{ font-size: 43px; }
.inforBox ul li a .info .txt { font-size: 20px; margin: 7px 0 0 8px; color: #333;  word-break: keep-all;}
/* .inforBox ul li a .info .txt2 { font-size: 16px; color: #124e87;  word-break: keep-all;
display: block; margin-top: 3px;} */

h2.info-title {  font-size: 36px;  line-height: 2em; text-align: center; vertical-align: middle;  height: auto;}
@media (max-width: 1089px){
h2.info-title{font-size: 26px;  line-height: 1.5em; padding: 0 10px;}
.inforBox {width: 99.5%;}
.inforBox ul li{padding: 0px;}
.inforBox ul li a .info {width: 100%; padding:5px;}
.inforBox ul li a .info .name { font-size: 24px;  line-height: 1.4;}
.inforBox ul li a .info .txt { margin: 0px 0 0 3px; font-size: 18px;  line-height: 1.4; }
}
@media all and (max-width:768px){
.inforBox{ padding: 0 10px;}
.inforBox ul li { width: 100%; margin: 8px 0px;}
.inforBox ul li a .info{width: 100%;  padding: 5px 0 5px 5px;}
}
/**********   List *********/
#information .inforBox ul li a:hover {
  cursor: pointer; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
  border-style: solid;
  border-image: linear-gradient(to right, rgba(74, 192, 238, 0.8), rgba(0, 76, 152, 0.8) );
  border-image-slice: 40;
  /* -webkit-transition: all 0.6s ease-out;  -moz-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;  transition: all 0.5s ease-out; */
}
#information .inforBox ul li a:hover .info .name{ text-shadow: 2px 2px 2px #000; color:#fff;}

/*****          ********/
#infoInner{ margin-bottom: 50px;}
.infoIn2{margin: 0 50px 50px 50px;}
@media all and (max-width:1089px){
  .infoIn2{margin: 0 0 50px 0;}
}

.infoInnerBox{ display: block; width: 98%; margin: 0 auto;}
.infoInnerBox ul li{  display: inline-block;  width: calc(50% - 12px);  vertical-align: top;}
.infoInnerBox ul li:nth-child(1) { margin-right: 10px;}
.infoInnerBox ul li:nth-child(2){ margin-left: 10px;}

.info01L tr td.tg-img, .info01R tr td.tg-img{  width: 24%; padding: 0 3px;}
.info01L tr td.tg-img p, .info01R tr td.tg-img p{ display: inline-block; width: 104px; height: 111px;
  vertical-align: middle;}


/********************/
#infoInner .tg-wrap{position: relative;}
#infoInner .tg  { text-align: center;  width: 100%;  border-collapse:collapse; border-spacing:0; word-break: keep-all;}
#infoInner .tg td{ padding:5px; font-size:17px; border-color:#d5d5d5; border-style:solid; border-width:0.5px;
  font-family:'NanumSquare', 'sans-serif'; overflow:hidden; word-break:normal;
  border-left: none; border-right: none;
border-collapse:collapse; border-spacing:0; }
#infoInner .tg th{ padding:15px 10px; font-size:18px; line-height: 1.6; font-weight:400;
  background-color: #8bd5e9;
  color:#333333; border-color:#8bd5e9;  border-style:solid; border-width:0.5px; overflow:hidden; word-break:normal;
   font-family:'NanumSquare', 'sans-serif'; }
#infoInner .tg th span{padding: 0 3px; color:rgba(74, 192, 238, 1);}
/* #infoInner .tg .tg-title{ font-size: 17px;} */
#infoInner .tg .tg-name{font-family:'Noto Sans KR','NanumSquare', 'sans-serif';word-break: keep-all;}
#infoInner .tg .tg-name, #infoInner .tg .tg-title{ line-height: 1.2; padding:10px; }
#infoInner .tg .tg-name, #infoInner .tg .tg-img, #infoInner .tg .tg-title,
#infoInner .tg .tg-date{ border-color:#d9d9d9;  text-align:center; vertical-align:middle;
  border-collapse:collapse; border-spacing:0;}
#infoInner tr.lh2em td{ line-height: 2em !important; color: #092265;}

@media screen and (max-width: 890px) {
.infoInnerBox ul li{width: 100%; margin-bottom: 15px;}
.infoInnerBox ul li:nth-child(1) {  margin-right: 0px;}
.infoInnerBox ul li:nth-child(2){  margin-left: 0px;}
.info01L tr td.tg-img p, .info01R tr td.tg-img p{ width: 100%;  height: 22vw;}
#infoInner .tg {width: 80% !important;}
.tg col {width: auto !important;}
#infoInner .tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}
}

@media all and (max-width:500px){
.infoInnerBox ul li{margin: 10px 0;}
#infoInner .tg th{padding: 10px; font-size: 18px;}
#infoInner .tg .tg-name, #infoInner .tg .tg-title,
#infoInner .tg .tg-date{font-size: 14px;padding: 5px;}

#infoInner .tg {width: 98% !important; }
#infoInner .tg td{font-size: 14px; font-family: '맑은 고딕','Malgun Gothic', 'sans-serif';}
#infoInner .infoInnerBox2 .tg .tg-name, #infoInner .tg .tg-title{font-size: 14px;padding: 3px;}
#infoInner .infoInnerBox2 .tg .tg-title2,
#infoInner .infoInnerBox2 .tg .tg-date{font-size: 13px; padding: 3px;}
}

/*************    information_03        *************/
.info03Box{ position: relative; display: block; width: 95%; margin: 0px auto; margin-bottom: 50px;}
#infoInner .info03Box .tg td{font-size: 17px; line-height: 1.5;}
#infoInner .info03Box .info03th td{  padding: 20px 0px !important; font-size: 20px; line-height: 1.6;
  font-weight: 400; background-color: #334054; color: #fff; border-color: #334054; border-width: 0.5px;
  border-style: solid; overflow: hidden;  word-break: normal; font-family: 'NanumSquare', 'sans-serif';}
#infoInner .info03Box .info03th span{ padding: 0 3px;
  color: rgba(74, 192, 238, 1);}
#infoInner .info03Box .tg td.tg-name{font-family:'Noto Sans KR','NanumSquare', 'sans-serif';}
.info03Box .tg td.tg-name2{text-align: left;}
.info03Box .tg td p{line-height: 1.2;margin-bottom: 5px;}
.info03Box .tg td p:last-child{margin-bottom: 0;}
#infoInner .info03Box .tg td, .info03Box .tg .tg-date, .info03Box .tg td.tg-name2{ padding: 10px 6px;}
.info03Box .wid1{width: 12%;}
.info03Box .wid2{width: 12%;}
.info03Box .wid3{width: 18%;}
.info03Box .wid4{width: 25%;}
.info03Box .wid5{width: 30%;}

.info03Box .tg td p::before{ content: '·'; display: inline; padding-right: 2px;}
.info03Box .tg-date span:nth-child(1):after{  content: '~';  display: block;}

@media screen and (max-width: 890px) {
#infoInner .info03Box .tg{width: 100% !important;}
#infoInner .info03Box{width: 99.5%;}
#infoInner .info03Box .infoInnerBox{width: 100% !important;}
}
@media all and (max-width:768px){
#infoInner .info03Box .tg td, .info03Box .tg .tg-date, .info03Box .tg td.tg-name2{
  font-size: 15px; font-family: 'Nanum Gothic','나눔고딕','Noto Sans KR';}
#infoInner .info03Box .tg td.tg-name{font-size: 15px; font-family:'Noto Sans KR','Nanum Gothic','나눔고딕';}
}
@media all and (max-width:500px){
#infoInner .info03Box .tg td, #infoInner .info03Box .tg .tg-date, .info03Box .tg td.tg-name2{
  padding: 2px;  font-size: 12px;  font-family:'맑은 고딕','Malgun Gothic','sans-serif';}
#infoInner .info03Box .tg td.tg-name{font-size: 14px; font-family:'Noto Sans KR';}
.info03Box .tg td p{margin-bottom: 2px;}
#infoInner .info03Box .info03th td{ padding:10px 0 !important; font-size: 14px;font-family: 'Noto Sans KR';}
}

/*********      information_04   **********/
.info04btn, .info05btn{display: inline-block; margin: 10px;}
.info06btn, .info07btn, .info08btn{display: inline-block; margin: 10px 0; }
.infopdfbtn a{ display: inline-block;  padding: 8px 15px; font-size: 18px; border: 1px solid #000;}

.infopdfbtn a::before{ content: ''; display: inline-block; width: 28px; height: 28px;vertical-align: middle;
  margin-right: 5px; background: url(../images/pdf1.png) no-repeat center/85%;}

/*********      information_06   **********/
.info06txt01, .info07txt01{ text-decoration: underline;  text-decoration-color: #4c4c4c;
  text-underline-position: under;  color: rgb(47, 59, 228);}

/*********      information_08   **********/
#infoInner .info08Box{max-width: 1000px;}
#infoInner .info08Box .tg th{padding: 8px 10px;}
.info08Box .tg td.tg-name2{text-align: center;}
.info08bgc{background-color: #8bd5e9;  padding: 0.8px !important;}

@media all and (max-width:450px){
.info08Box .tg td.tg-name2{  font-size: 11px !important;}
}
/*********      information_10   **********/
#infoInner .info10Box{max-width: 1000px;}
#infoInner .info10Box .tg th{padding: 10px 10px;}
.info10 .tg-name2{word-wrap: break-word !important;word-break: break-all !important;}
.info10Box .tg td.tg-name2{text-align: center;}
.info10bgc{background-color: #334054; padding:1px !important;}
.info10tb tr:nth-child(1){ font-weight: bold;  color: #334054;
  background-color: rgba(121, 176, 212, 0.4);}
.info10tb tr:nth-child(2){  background-color: rgba(173, 170, 170, 0.1);}

@media all and (max-width:450px){
.info10Box .tg td.tg-name2{  font-size: 11px !important;}
}