* {margin:0;padding:0}
.teaser {overflow:hidden;position:relative}
.teaser .centerBox {width:1080px;margin:0 auto; position: relative;}
.teaser .abs {position: absolute;}

/* Áö³­È£º¸±â */
.topNavi {position:absolute;top:0;left:50%;z-index:10;width:1080px;margin-left:-540px}
.topNavi .centerBox {position:relative;height:110px;}
.topNavi .centerBox .btn_news {display:block;position:absolute;top:50%;right:0;margin-top:-8px}
.cnt_top .centerBox {position:relative;height:307px}

/* °Ô½ÃÆÇ ´ñ±Û */
.comment_write {width:1080px;margin:0 auto;padding:40px;box-sizing:border-box;background-color:#fff}
.comment_list {padding:0 40px 50px 40px;box-sizing:border-box;background-color:#fff}
.comment_area table{width: 100%; border-spacing:0}
.comment_area table th{font-size: 26px; font-weight: bold; color:#2a2a30; text-align: center;  border-top: 2px solid #000; border-bottom: 1px solid #ccc; padding: 25px 0px;}
.comment_area table td{font-size: 26px;  color:#2a2a30; text-align: center; border-bottom: 1px solid #ccc; padding: 25px 0px; font-family: 'Noto Sans CJK KR', NotoSans; letter-spacing:-0.03em;}
.comment_area table td:nth-child(3){text-align: left;}
.comment_area form {overflow:hidden;width:1080px;margin:0 auto;box-sizing:border-box}
.comment_area textarea{float:left; background: #fff; height: 190px; border: none; font-size: 20px; outline: 0 none; width: 778px; padding: 10px; box-sizing: border-box; font-family: 'Noto Sans CJK KR', NotoSans; color:#111; resize:none; border: 1px solid #aaa; border-right: 0 none;}
.comment_area input[type="button"]{width:222px; background-color: #0e6443; height: 190px; border: none; font-size: 36px; outline: 0 none;-webkit-appearance: none; vertical-align: bottom; line-height:190px; font-weight: bold; color:#fff; font-family:'Noto Sans CJK KR', NotoSans; cursor: pointer; letter-spacing: -.05em;}
.comment_txt{padding-top:20px;}
.comment_txt:after{clear:both; content:''; display:block;}
.comment_txt p{color:#999; font-size:24px; letter-spacing:-2px;}
.comment_txt .txt1{float:left;}
.comment_txt .txt2{float:right;}

/* °Ô½ÃÆÇ ´ñ±Û ÆäÀÌ¡ */
.pg_wrap{clear: both; margin-top:50px; text-align: center;}
.pg_wrap .pg > strong{font-size: 26px; color:#2a2a30; margin: 0px 10px; font-weight: bold; vertical-align: middle;}
.pg_wrap .pg > a {font-size: 26px; color:#2a2a30; margin: 0px 10px; vertical-align: middle;}
.pg_start, .pg_end{width: 30px; height: 30px; border: 1px solid #ccc; display: inline-block; text-indent:-9999px}
.pg_start {background:url('../images/btn_pg_nav.jpg')no-repeat left top;}
.pg_end {background:url('../images/btn_pg_nav.jpg')no-repeat right top;}

.teaser .btn_hov:hover {animation: btn_evt .5s forwards linear;}

.float_bnr{position:fixed; right:50px; top:200px; z-index:9;}

/* cnt_ : ºñÁÖ¾ó */
.teaser .cnt_1 {background: url(../images/bg_cnt_01.jpg) 50% 0 no-repeat; max-width: 1920px; overflow: hidden;}
.teaser .cnt_1 .title1 {top: 240px; left: 0; opacity: 0; transition: all 1s linear;}
.teaser .cnt_1 .title2 {top: 475px; left: 0; opacity: 0;}
.teaser .cnt_1 .top_character1 {top: 548px; right: 220px; opacity: 0;}
.teaser .cnt_1 .top_character2 {top: 433px; right: 144px; opacity: 0;}
.teaser .cnt_1 .top_character3 {top: 304px; right: 214px; opacity: 0;}
.teaser .cnt_1 .top_character4 {top: 255px; right: 140px; opacity: 0;}
.teaser .cnt_1 .top_txt {top: 80px; right: 0; transform: translateX(10%); opacity: 0;}

.teaser .cnt_1 .title1.on {opacity: 1;}
.teaser .cnt_1 .title2.on {animation: title2 .8s forwards;}
.teaser .cnt_1 .top_character.on, .teaser .cnt_1 .top_txt.on {animation: bounce-top 0.9s both;}

.teaser .cnt_2 {background: url(../images/bg_cnt_02.jpg) 50% 0 no-repeat;}
.teaser .cnt_2 .cloud1 {top: 285px; left: 0; animation: cloud 1s linear infinite alternate;}
.teaser .cnt_2 .cloud2 {bottom: 65px; right: 35px; animation: cloud 1s linear infinite alternate;}

.teaser .cnt_3 {background-color: #e7e7e7;}

.teaser .cnt_4 {background-color: #eac840;}
.teaser .cnt_4 .character4 {bottom: 200px; right: -15px; animation: decoAni steps(2) 1s infinite;}

.teaser .cnt_5 {background-color: #1a9b3d;}
.teaser .cnt_5 .character5 {top: 720px; right: 66px; animation: decoAni steps(2) 1s infinite;}

.teaser .cnt_6 {background-color: #f0efef; padding-bottom:90px;}

.teaser .cnt_7 {background-color: #114e37; padding-bottom:90px;}
.teaser .cnt_7 .btn_wrap {width: 100%; left: 0; top: 197px;}
.teaser .cnt_7 .btn_wrap:after {content:""; display: block; clear: both;}
.teaser .cnt_7 .btn_wrap li {float: left; margin-bottom: 12px;}
.teaser .cnt_7 .btn_wrap li a {display: block;}
.teaser .cnt_7 .btn_wrap li:nth-child(2n-1) {margin-right: 20px;}
.teaser .cnt_7 .character7 {bottom: 0px; right: -130px; animation: decoAni steps(2) 1s infinite;}

@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}

@keyframes title2 {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
		opacity: 1;
  }
}

@keyframes decoAni {
	0% {transform: rotate(-6deg);}
	100% {transform: rotate(3deg);}
}

@keyframes cloud {
	0% {
		margin: 0;
	}
	10% {
		margin: -3px -4px 0 0;
	}
	20% {
		margin: 0;
	}
	30% {
		margin: -3px -4px 0 0;
	}
	40% {
		margin: 0;
	}
	100% {
		margin: 0;
	}
}

@keyframes btn_evt {
	50%{transform: translateY(-8px)}
	100%{transform: translateY(0); opacity: 1;}
}