* {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: 220px; border: none; font-size: 20px; outline: 0 none; width: 778px; border-radius: 15px 0 0 15px; 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: #0e7771; height: 220px; border: none; font-size: 36px; outline: 0 none;-webkit-appearance: none; vertical-align: bottom; line-height:220px; font-weight: bold; color:#fff; font-family:'Noto Sans CJK KR', NotoSans; border-radius: 0px 15px 15px 0px; cursor: pointer; letter-spacing: -.05em;}

/* °Ô½ÃÆÇ ´ñ±Û ÆäÀÌ¡ */
.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;}

/* cnt_ : ºñÁÖ¾ó */
.teaser .cnt_1 {height: 832px; background: url(../images/bg_cnt_01.jpg) 50% 0 no-repeat; max-width: 1920px; overflow: hidden;}
.teaser .cnt_1 .centerBox {height: 100%;}
.teaser .cnt_1 .top_txt1 {top: 97px; left: 0; opacity: 0; transition: all 1s linear;}
.teaser .cnt_1 .top_txt2 {top: 186px; left: 0; opacity: 0;}
.teaser .cnt_1 .top_txt3 {top: 388px; left: 0; opacity: 0;}
.teaser .cnt_1 .top_subTxt3 {top: 648px; left: 50%; margin-left: -470px; width: 943px; overflow: hidden;}
.teaser .cnt_1 .top_subTxt3 img {transform: translateX(100%); opacity: 0;}
.teaser .cnt_1 .top_subTxt1 {top: 96px; left: 707px; opacity: 0;}
.teaser .cnt_1 .top_subTxt2 {top: 90px; left: 856px; opacity: 0;}
.teaser .cnt_1 .top_mic {top: 147px; right: 36px; transform: translateX(10%); opacity: 0;}

.teaser .cnt_1 .top_txt1.on {opacity: 1;}
.teaser .cnt_1 .top_txt2.on, .teaser .cnt_1 .top_txt3.on {animation: top_txt .8s forwards;}
.teaser .cnt_1 .top_mic.on {animation: top_mic3 .8s forwards cubic-bezier(0.215, 0.61, 0.355, 1);}
.teaser .cnt_1 .top_subTxt1.on, .teaser .cnt_1 .top_subTxt2.on {animation: top_subTxt .5s forwards;}
.teaser .cnt_1 .top_subTxt3.on img {animation: top_subTx2 1s forwards;}

.teaser .cnt_2 {background: url(../images/bg_cnt_02.jpg) 50% 0 no-repeat;}
.teaser .cnt_2 .btn_evt {display: block; top: -64px; left: 0;}
.teaser .cnt_2 .btn_wrap {width: 100%; left: 0; top: 1168px;}
.teaser .cnt_2 .btn_wrap:after {content:""; display: block; clear: both;}
.teaser .cnt_2 .btn_wrap li {float: left;}
.teaser .cnt_2 .btn_wrap li a {display: block;}
.teaser .cnt_2 .btn_wrap li:nth-child(2) {margin: 0 20px;}
.teaser .cnt_2 .icon_mic1 {top: 915px; left: -189px; animation: decoAni steps(2) 1s infinite;}
.teaser .cnt_2 .youtube {display: block; width: 1080px; height: 610px; font-size: 0; left: 0; top: 406px;}

.teaser .cnt_3 {background: url(../images/bg_cnt_03.jpg) 50% 0 repeat-y; padding-bottom: 100px;}
.teaser .cnt_3 .icon_mic2 {top: 470px; right: -180px; z-index: 10; animation: comment 1s linear infinite alternate;}

.teaser .cnt_4 {height: 685px; background: url(../images/bg_cnt_04.jpg) 50% 0 no-repeat;}
.teaser .cnt_4 .btn_wrap {width: 100%; left: 0; top: 197px;}
.teaser .cnt_4 .btn_wrap:after {content:""; display: block; clear: both;}
.teaser .cnt_4 .btn_wrap li {float: left; margin-bottom: 12px;}
.teaser .cnt_4 .btn_wrap li a {display: block;}
.teaser .cnt_4 .btn_wrap li:nth-child(2n-1) {margin-right: 20px;}
.teaser .cnt_4 .icon_mic3 {top: 225px; left: -220px; animation: decoAni steps(2) 1s infinite;}


@keyframes top_mic3 {
	100%{transform: translateX(0); opacity: 1;}
}

@keyframes top_subTxt{
	50%{transform: translateY(-10%)}
	100%{transform: translateY(0); opacity: 1;}
}

@keyframes top_subTx2{
	50%{transform: translateX(100%)}
	100%{transform: translateX(0); opacity: 1;}
}

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

@keyframes top_txt {
  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 comment {
	0% {
		margin: 0;
	}
	10% {
		margin: -3px -4px 0 0;
	}
	20% {
		margin: 0;
	}
	30% {
		margin: -3px -4px 0 0;
	}
	40% {
		margin: 0;
	}
	100% {
		margin: 0;
	}
}