* {margin:0;padding:0}
.teaser {overflow:hidden;position:relative}
.teaser .centerBox {width:1080px;margin:0 auto}
.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:0 0 55px 0;box-sizing:border-box;background-color:#fff}
.comment_list {padding:0 0 50px 0;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(4){text-align: left;}
.comment_area form {overflow:hidden;width:1080px;margin:0 auto;border: 1px solid #000;box-sizing:border-box}
.comment_area textarea{float:left; background-color: #f4f4f4; height: 80px; border: none; font-size: 20px; outline: 0 none; width: 940px; padding: 10px; box-sizing: border-box; font-family: 'Noto Sans CJK KR', NotoSans; color:#111; resize:none}
.comment_area input[type="button"]{width:138px; background-color: #000; height: 80px; border: none; font-size: 26px; outline: 0 none; vertical-align: bottom; line-height:80px; color:#fff; font-family:"Malgun Gothic";}

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


/* cnt_1 : ºñÁÖ¾ó */
.cnt_1 {height: 822px; overflow: hidden; background: #35adf9 url(../images/bg_cnt_01.jpg) center top no-repeat;}
.cnt_1 .centerBox {height: 100%; position: relative;}
.cnt_1 .road {left: 50%; margin-left: -960px; bottom: 0;}
.cnt_1 .wall {left: 50%; margin-left: -960px; bottom: -1px;}
.cnt_1 .roadLine1 {top: 400px; left: 0px; overflow: hidden; height: 425px; opacity: .3;}
.cnt_1 .roadLine2 {top: 400px; left: 380px; overflow: hidden; height: 425px; opacity: .3;}
.cnt_1 .panel {top: 0; left: 47px;}
.cnt_1 .light {top: -136px; left: 50%; margin-left: -1100px; opacity: .5; transform-origin: bottom center;}
.cnt_1 .deco3 {top: 120px; left: 50%; margin-left: -420px;}
.cnt_1 .subTit1 {top: 108px; right: 217px; opacity: 0;}
.cnt_1 .mainTit1 {top: 83px; left: 230px; opacity: 0; animation-fill-mode: both;}
.cnt_1 .mainTit2 {top: 155px; left: 364px; opacity: 0; animation-fill-mode: both;}
.cnt_1 .slogan {top: 316px; left: 144px; opacity: 0;}
.cnt_1 .subTit2 {top: 472px; left: 335px; opacity: 0;}
.cnt_1 .deco1 {top: 604px; left: 459px; opacity: 0;}
.cnt_1 .deco2 {top: 695px; left: 140px; opacity: 0;}
.cnt_1 .evtWrap {top: 643px; left: 190px; opacity: 0; cursor:pointer;}
.cnt_1 .evtAni1 {top: 0; left: 1px; width: 0; overflow: hidden;}
.cnt_1 .evtAni2 {top: 25px; left: 25px; width: 0; overflow: hidden;}

.cnt_1 .roadLine1.on, .cnt_1 .roadLine2.on { animation: roadLine .7s;}
.cnt_1 .light.on {animation: light .2s infinite alternate;}
.cnt_1 .panel.on {animation: panel .2s infinite alternate;}
.cnt_1 .mainTit1.on {animation: lightSpeedInRight ease-out .25s forwards;}
.cnt_1 .mainTit2.on {animation: lightSpeedInRight ease-out .25s .1s forwards;}
.cnt_1 .slogan.on {animation: pulse .2s forwards .5s;}
.cnt_1 .evtAni1.on {animation: evtAni .4s forwards;}
.cnt_1 .evtAni2.on {animation: evtAni .7s forwards;}

@keyframes panel {
	0% {
		opacity: .5;
		transform: scale(1.01);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes light {
	0% {
		opacity: .5;
		transform: scale(1);
	}
	100% {
		opacity: .2;
		transform: scale(.95);
	}
}

@keyframes roadLine {
	0% {
		height: 0;
		opacity: .1;
	}
	50% {
		opacity: .3;
	}
	80%,100% {
		height: 100%;
		opacity: 0;
	}
}

@keyframes lightSpeedInRight {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  50% {
    transform: skewX(20deg);
    opacity: 1;
  }

  65% {
    transform: skewX(-10deg);
  }

  to {
    transform: translate3d(0, 0, 0);
		opacity: 1;
  }
}

@keyframes pulse{
  0%{
    opacity: 0;
    transform: rotate(-2deg) scale(.5);
  }
  10%{
    opacity:.50;
    transform-origin: 50% 50%;
    transform: rotate(-2deg) scale(.2);
    transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100%{
    opacity:1;
    transform: rotate(0) scale(1);
  }
}

@keyframes evtAni {
	0% {width: 0;}
	100% {width: 100%;}
}

.cnt_2 {background: #eee;}

.cnt_3 {padding-bottom: 88px;}
.cnt_3 .rollingWrap {position: relative;}
.cnt_3 .btn_rolling {position: absolute; z-index: 10; font-size: 0; text-indent: -9999em; width: 35px; height: 62px; position: absolute; top: 50%; margin-top: -31px;}
.cnt_3 .btn_rollingPrev {background: url(../images/btn_rollingPrev.png) top left no-repeat; left: 34px;}
.cnt_3 .btn_rollingNext {background: url(../images/btn_rollingNext.png) top left no-repeat; right: 34px;}

.cnt_4 {background: #2384ef url(../images/bg_cnt_04.jpg) center top no-repeat;}
.cnt_4 .centerBox {position: relative;}
.cnt_4 a {display: block; font-size: 0; text-indent: -9999em;}
.cnt_4 ul {top: 290px; left: 0; width: 100%;}
.cnt_4 ul:after {content:""; display: block; clear: both;}
.cnt_4 ul li {float: left; width: 50%; margin-bottom: 40px; position: relative; z-index: 1;}
.cnt_4 ul li a {height: 656px;}
.cnt_4 ul li:before {content:""; display: block; width: 41px; height: 26px; background: url(../images/txt_go.png) top left no-repeat; position: absolute; right: 30px; bottom: 40px; z-index: -1;}
.cnt_4 ul li:nth-child(3) a, .cnt_4 ul li:nth-child(4) a {height: 676px;}
.cnt_4 .btn_qnaMore {width: 572px; height: 108px; bottom: 90px; left: 50%; margin-left: -286px;}
.cnt_4 ul li:hover:before {animation: tada 1s;}

.cnt_5 {background: #ffd02d;}

.cnt_6 .centerBox {position: relative;}
.cnt_6 .cmtDeco1 {top: 256px; left: -114px; animation: decoAni steps(2) 1s infinite;}
.cnt_6 .cmtDeco2 {top: 274px; right: -93px; animation: decoAni steps(2) 1s .7s infinite;}
.cnt_6 .btn_sns1 {width: 334px; height: 87px; display: block; font-size: 0; text-indent: -9999em; top: 270px; left: 196px;}
.cnt_6 .btn_sns2 {width: 334px; height: 87px; display: block; font-size: 0; text-indent: -9999em; top: 270px; left: 550px;}

.cnt_7 {background: #211f1f;}
.cnt_7 .centerBox {position: relative;}
.cnt_7 ul {width: 100%; top: 290px; left: 0;}
.cnt_7 ul:after {content:""; display: block; clear: both;}
.cnt_7 li {float: left; width: 346px;}
.cnt_7 li:not(:last-child) {margin-right: 21px;}
.cnt_7 li a {display: block; height: 330px; font-size: 0; text-indent: -9999em;}

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

@keyframes tada {
	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);
	}
}