@charset "UTF-8";

/* 본문 */
.top {
  background: #0c0c0c;
  padding: 35px 0;
  display: flex;
  -ms-display: flex-box;
  align-items: center;
  justify-content: center;
  -ms-flex-align: center;
  position: relative;
}

.top:hover {
  cursor: pointer;
}

.top .logo {
  width: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -600px;
}

.top .top-text {
  width: auto;
}

.section01.container {
  background: url(../images/section01_bg_03.jpg) no-repeat center center / cover;
  padding: 70px 0 125px 0;
}

.section01 .btnWrap{margin-top: 40px;}
.section01 .title_effect_02{position: absolute; top: 30px; right: -168px}
.section01 .title_effect_03{position: absolute; top: 450px; left: -130px}

.dung {
  animation: dung 2s infinite alternate;
  animation-delay: 0.5s;
}
@keyframes dung{
  0%{transform:translate(0,0);}
  100%{transform:translate(0,50px);}
}  

.shakeY {
  animation: shakeY 10s infinite alternate;
}

@keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}

.effect_delay_01 { animation-delay: 0.5s; margin: 65px 0 47px;}
.effect_delay_02 { animation-delay: 1s;}
.effect_delay_03 { animation-delay: 1.5s; margin: 42px 0 20px;}
.effect_delay_04 { animation-delay: 2s; }
.effect_delay_05 { animation-delay: 2.5s; margin: 100px 0 0 0;}
.effect_delay_06 { animation-delay: 3s; }

.section02{background: #008932;}
.section03.container{padding: 0; background: #fff;}
.section04{background: #d9f3e3;}
.section04 .content{margin: 0 0 40px 0;}
.section05.container{background: #004d43; padding: 0;}
.section06.container{background: #fefefe; padding: 0;}
.section07 .wrapper {display: flex; justify-content: center; align-items: center; background-color: #044039;}
/*information*/
.information{background: #282828;width: 100%;}
.information .inner{width: 1100px; margin: 0 auto;}
.information h1{margin-bottom:40px; color:#fff; text-align: left; line-height: 32px; font-size: 20px; word-break: keep-all;}
.information dl{margin-bottom:40px; color:#fff; text-align: left; line-height: 32px; overflow: hidden;}
.information dl:last-child{margin-bottom: 0;}
.information dl dt{float: left; width: 25%; font-size: 18px; font-weight: 700; word-break: keep-all;}
.information dl dd{width: 75%; font-size: 16px; line-height: 24px; display: inline-block; float: right;}
.information dl dd.mainTit{font-size: 16px; font-weight: 600; margin:10px 0 5px;}
.information dl dd.mainTxt{position: relative; padding-left: 10px;}
.information dl dd.mainTxt:before{content:''; width: 4px; height: 4px; border-radius: 50%; background: #fff; position: absolute; top:10px; left:0;}
.information dl dd.mainTxt.numbering::before{display: none;}
.information dl dd.subTxt{line-height: 24px; color:#8e8e8e; position: relative; padding-left:25px;}
.information dl dd.subTxt:before{content:''; width: 10px; height:1px; background: #8e8e8e; position: absolute; top:13px; left:10px;}
.information dl dd.subTxt.numbering::before{display: none;}
.information dl dd.important{color:#fde28d; position: relative; padding-left:30px;}
.information dl dd strong{color:#fde28d;}
.information dl dd a.link:hover,
.information dl dd a.link.f-grey:hover{color:#fde28d;}
.information dl dd a.link{color:#fff;}
.information dl dd a.link.f-grey{color:#8e8e8e;}

/* quick-banner */
.banner_right {position: fixed;top:300px;right:20px;z-index:99;}