@charset "utf-8";

.clearfix:after {content:'';display:block;clear:both;}
.container {width: 1200px;margin: 0 auto;}
.sub-contents {margin-bottom:80px;padding:50px 0;}
.page-tit {
  font-size:35px;
  color:#101e3c;
  font-weight:500;
  padding:32px 0 60px;
  background:#f8f8f8;
  text-align:center;
  position:relative;
}
.page-tit:after {content:'';display:block;width:3px;height:38px;background:#007dc6;position:absolute;left:50%;bottom:0;}
#skipnav {
  z-index: 9999;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
#skipnav a {
  display: block;
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/*animation*/
.img-fade {
  opacity: 0;
  animation: fadeIn ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  width: 100%;
}

/*table style*/
.tbl-style1 {border-top:2px solid #1a5bb1;width:100%;}
.tbl-style1 td,.tbl-style1 th {padding:16px;}
.tbl-style1 th {background:#f0f3f8;color:#444;border-bottom:1px solid #c6c6c6;border-right:1px solid #c6c6c6;border-bottom:1px solid #c6c6c6;}
.tbl-style1 td {color:#555;border-right:1px solid #c6c6c6;border-bottom:1px solid #c6c6c6;}
.tbl-style1 tr th:last-child,.tbl-style1 tr td:last-child {border-right:none;}
.tbl-style1 thead th {background:#f0f3f8;color:#124d9a;border-bottom:1px solid #c6c6c6;}

.tbl-style1.tbl1-small td,.tbl-style1.tbl1-small th {padding:8px 12px;font-size:14px}



/*align*/
.center {text-align:center;}

/*board*/
.board-tit,.board-tit2,.board-tit3 {opacity:0;width:100%;border:10px solid #e5e5e5; position:relative;padding:45px 0;text-align:center;width:1200px;margin:45px auto 40px auto}
.board-tit:before,.board-tit2:before,.board-tit3:before {content:'';display:block;position:absolute;left:-10px;top:-10px;width:240px;height:60px;
border-top:10px solid #2ea7df;border-left:10px solid #2ea7df;}
.board-tit h1,.board-tit2 h1 {color:#0c2e4a;font-size:28px;font-weight:600;}
.board-tit h2,.board-tit2 h2 {color: #3c4b57;margin-top: 16px;font-size: 15px;}
.board-tit2:before {border-top:10px solid #8fc53b;border-left:10px solid #8fc53b;}
.board-tit3 {width:1000px;padding:45px 55px;}
.board-tit3:before {border-top:10px solid #f4624e;border-left:10px solid #f4624e;}
.board-tit,.board-tit2,.board-tit3 {
  animation: fadeIn ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  border-radius:0 50px;
}




/*==================== 미디어쿼리 ====================*/
@media screen and (max-width: 1220px) {
.page-tit:after {content:'';display:block;width:3px;height:38px;background:#007dc6;position:absolute;left:0;bottom:0;}
.page-tit:before {content:'';display:block;width:38px;height:3px;background:#007dc6;position:absolute;left:0;bottom:0;}
}

@media screen and (max-width: 1200px) {
  .board-tit, .board-tit2 {width:100%;}

}

@media screen and (max-width: 1240px) {
  .container {width:100%;}

}
@media all and (max-width:768px){
  #body {margin-top:60px;}
  .board-tit, .board-tit2 {padding:20px 0;margin:25px 0 20px;}
  .board-tit h1, .board-tit2 h1 {font-size: 22px;font-weight: 500;}

}
@media all and (max-width:480px){
  .board-tit, .board-tit2 {padding:15px 0;}
  .board-tit h1, .board-tit2 h1 {font-size: 20px;}
  .sub-contents {margin-bottom:20px;}
}
/*==================== amimation ====================*/
@keyframes fadeIn {
    0% {
		opacity: 0;
    }
    100% {
		opacity: 1;
    }
}

@keyframes sliderFadein {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
}


@keyframes slidedown {
  0% {
  opacity: 0;
  margin-top:-100px;
  }
  100% {
  opacity: 1;
  margin-top:0;
  }
}
@keyframes slidedown2 {
  15% {
  opacity: 0;
  margin-top:-100px;
  }
  100% {
  opacity: 1;
  margin-top:0;
  }
}
@keyframes slidedown3 {
  30% {
  opacity: 0;
  margin-top:-100px;
  }
  100% {
  opacity: 1;
  margin-top:0;
  }
}
@keyframes slidedown4 {
  45% {
  opacity: 0;
  margin-top:-100px;
  }
  100% {
  opacity: 1;
  margin-top:0;
  }
}
@keyframes slidedown5 {
  60% {
  opacity: 0;
  margin-top:-100px;
  }
  100% {
  opacity: 1;
  margin-top:0;
  }
}
@keyframes slidedown6 {
  75% {
  opacity: 0;
  margin-top:-100px;
  }
  100% {
  opacity: 1;
  margin-top:0;
  }
}
