/*****
commmon
*****/
:root {margin:0;padding:0; font-family:"¸¼Àº°íµñ","Malgun Gothic","µ¸¿ò",Dotum;}
.teaser {overflow:hidden;}
.teaser .cnt {position: relative;}
.teaser .cnt .innerBox {width: 1108px; margin: 0 auto; position: relative; text-align: center;}
.teaser .float {position: absolute;}
.teaser .blind {text-indent: 1000000em; opacity: 0; font-size: 0;}
.teaser .btn_detail {display: block; background: #333; padding: 12px 22px 12px 28px; border-radius: 12px 12px 0 0;}
.teaser .btn_detail img:nth-child(2) {padding-left: 18px;}
.teaser .btn_detail:hover img:nth-child(2){animation: btn_detail 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;}

/*****
keyframes
*****/
@keyframes btn_detail{
	to{
		-webkit-transform: translateX(5px) rotate(.002deg); transform: translateX(5px) rotate(.002deg);
	}
}
@keyframes ani_title {
  from {
    opacity: 0;
		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
	to {
		opacity:1;
	}
}

@keyframes ani1 {
	100% {
		-webkit-transform: scale(1) rotate(.002deg); transform: scale(1) rotate(.002deg);
		opacity :1;
	}
}

@keyframes nameRotate{
	to {
		transform: rotate(20deg);
	}
}

@keyframes y10 {
	to {
		opacity: 1;
		-webkit-transform: translateY(0); transform: translateY(0);
	}
}

@keyframes star {
	to {
		-webkit-transform: translate(0, 0); transform: translate(0, 0);
	}
}

/*****
bg
*****/
.teaser .cnt_1 {background:url(images/bg_cnt_01.jpg) center center no-repeat; overflow: hidden;}
.teaser .cntBg2 {top: 0; left: 0;}
.teaser .cntBg3 {top: 220px; left: 0; transition: all 1s;}
.teaser .cntBg4 {top: -353px; right: -8%; opacity: 0; transition: all 1s;}

.teaser .cnt_3.on .cntBg3 {top: 280px;}
.teaser .cnt_4.on .cntBg4 {right: 0; opacity: 1;}

/*****
layout
*****/
.teaser {padding-bottom: 90px; background-color: #e5fffc;}
.teaser .cnt_1 .innerBox {height: 737px; width: 1094px;}
.teaser .cnt_1 .mainTitle {top: 34px; left: 27px; font-size: 0;}
.teaser .cnt_1 .mainTitle > * {display: inline-block;}
.teaser .cnt_1 .mainTitle .ani1 {position: relative; top: 8px; -webkit-transform: scale(2) rotate(.002deg); transform: scale(2) rotate(.002deg); opacity: 0;}
.teaser .cnt_1 .mainTitle .ani2 {width: 136px; height: 145px; position: relative; top: 82px;}
.teaser .cnt_1 .mainTitle .ani2 > div {width: 0; overflow: hidden; transition: all 0.5s;}
.teaser .cnt_1 .mainTitle .ani3 {margin-left: -11px;}
.teaser .cnt_1 .mainTitle .ani4 {margin-left: -3px; position: relative; top: 25px;}
.teaser .cnt_1 .mainTitle .ani3, .teaser .cnt_1 .mainTitle .ani4 {opacity: 0;}
.teaser .cnt_1 .mainTitle .ani5 {display: block; text-align: left;; margin: -15px 0 0 66px; width: 566px; height: 195px;}
.teaser .cnt_1 .mainTitle .ani5 > div {width: 0; overflow: hidden; transition: all 1s;}
.teaser .cnt_1 .mainTitle .ani6 {top: 248px; left: 513px; opacity: 0; transition: opacity 0.3s;}
.teaser .cnt_1 .mainTitle .star {width: 44px; height: 67px; top: 50px; left: -50px; overflow: hidden;}
.teaser .cnt_1 .mainTitle .star img {-webkit-transform: translate(100%, 100%); transform: translate(100%, 100%);}
.teaser .cnt_1 .event {top: 490px; left: 94px; opacity: 0; -webkit-transform: translateY(5px); transform: translateY(5px);}
.teaser .cnt_1 .teachWrap {bottom: -15px; left: 530px; z-index: 3; width: 690px; height: 718px;}
.teaser .cnt_1 .teachWrap .teach_y {top: 100px; left: 400px; z-index: -1;}
.teaser .cnt_1 .teachWrap .teach_j {top: 250px; left: 585px; z-index: -1;}
.teaser .cnt_1 .teachWrap .teach_w {top: 435px; left: 455px;}

.teaser .cnt_1 .mainTitle .ani1.on {animation: ani1 0.3s forwards;}
.teaser .cnt_1 .mainTitle .ani2 > div.on {width: 136px;}
.teaser .cnt_1 .mainTitle .ani3.on, .teaser .cnt_1 .mainTitle .ani4.on {animation: ani_title 0.8s; animation-fill-mode: both;}
.teaser .cnt_1 .mainTitle .ani5 > div.on {width: 566px;}
.teaser .cnt_1 .mainTitle .ani6.on {opacity: 1;}
.teaser .cnt_1 .event.on {animation: y10 0.5s forwards;}
.teaser .cnt_1 .teachIni.active {animation: nameRotate 1s steps(2); animation-iteration-count:2;}
.teaser .cnt_1 .mainTitle .star.on img {animation: star .25s cubic-bezier(0.415, 0.547, 0, 0.809) forwards;}

.teaser .cnt_2 {margin-top: -30px; position: relative; z-index: 5; height: 1342px;}
.teaser .cnt_2 .player {width: 692px; height: 388px; top: 388px; left: 271px;}
.teaser .cnt_2 .player iframe {display: block; width: 100%; height: 100%;}

.teaser .cnt_3 {height: 1631px;}

.teaser .cnt_4 {height: 1371px;}

.teaser .cnt_5 {height: 1384px;}
.teaser .btn_detail1 {top: 597px; left: 240px;}
.teaser .btn_detail2 {top: 597px; left: 584px;}
.teaser .btn_detail3 {top: 1003px; left: 240px;}
.teaser .btn_detail4 {top: 1003px; left: 584px;}