*{margin:0;padding:0; font-family:"¸¼Àº°íµñ","Malgun Gothic","µ¸¿ò",Dotum;}
img{ display:inline-block; vertical-align:middle;}
.teaser {overflow:hidden;}
.teaser .cnt .innerBox {width: 1080px; margin: 0 auto; position: relative; text-align: center;}
.teaser .float {position: absolute;}
.teaser .blind {text-indent: 1000000em; opacity: 0; font-size: 0;}
.teaser .event_btn {display: inline-block; position: relative; transition: all 0.5s;}

/*****
	keyframes 
*****/
@keyframes pencil {
	0% {
		-webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0);
	}
	10% {
		-webkit-transform: translate(50px,35px); -ms-transform: translate(50px,35px); transform: translate(50px,35px);
	}
	20% {
		-webkit-transform: translate(-4px,45px); -ms-transform: translate(-4px,45px);  transform: translate(-4px,45px);
	}
	30% {
		-webkit-transform: translate(45px,83px); -ms-transform: translate(45px,83px); transform: translate(45px,83px);
	}
	40% {
		-webkit-transform: translate(30px,90px); -ms-transform: translate(30px,90px); transform: translate(30px,90px);
	}
	50% {
		-webkit-transform: translate(42px,96px); -ms-transform: translate(42px,96px); transform: translate(42px,96px);
	
	}
	75% {
		-webkit-transform: translate(42px,96px); -ms-transform: translate(42px,96px); transform: translate(42px,96px);
	}
	100% {
		-webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0);
	
	}
}

@keyframes img_cnt_02_ani {
	100% {
		-webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px);
	}
}

@keyframes leftAni {
	100% {
		-webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px);
	}
}

/*****
	layout commmon
*****/
.teaser .event_btn:hover {box-shadow: 10px 10px 10px rgba(0,0,0,0.2);}
.teaser .event_btn:hover .arrow { animation: leftAni 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;}


/*****
	bg 
*****/
.teaser .cnt_1 {background:url(images/bg_cnt_01.jpg) center center no-repeat;}
.teaser .cnt_2 {background:url(images/bg_cnt_02.jpg) center center no-repeat;}
.teaser .cnt_3 {padding-bottom: 104px;}
.teaser .cnt_4 {background: #cce9ff; padding-bottom: 115px;}

/*****
	layout 
*****/
/* .cnt_1 */
.teaser .cnt_1 .subTitle1 {top: 105px; left: 46px;}
.teaser .cnt_1 .title {top: 153px; left: 41px;}
.teaser .cnt_1 .subTitle2 {top: 500px; left: 148px;}
.teaser .cnt_1 .fighting {top: 336px; left: -80px;}
.teaser .cnt_1 .fighting1 {top: -20px; left: -33px;}
.teaser .cnt_1 .fighting2 {top: -35px; left: -15px;}
.teaser .cnt_1 .fighting3 {top: -40px; left: 13px;}
.teaser .cnt_1 .pencil {top: 164px; left: 681px; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0);}
.teaser .cnt_1 .starWrap {padding: 18px 0 15px 24px; text-align: left;}
.teaser .cnt_1 .listWrap {top: 131px; left: 925px; width: 262px; height: 369px; background: url(images/bg_list.png) top left no-repeat;}
.teaser .cnt_1 .listWrap ul li {height: 98px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 20px; box-sizing: border-box;}
.teaser .cnt_1 .listWrap ul li a {display: block; width: 100%; height: 51px; overflow: hidden;}
.teaser .cnt_1 .listWrap ul li:first-child a {background: url(images/list1.png) top -51px left 27px no-repeat;}
.teaser .cnt_1 .listWrap ul li:nth-child(2) a {background: url(images/list2.png) top -51px left 27px no-repeat;}
.teaser .cnt_1 .listWrap ul li:nth-child(3) a {background: url(images/list3.png) top -51px left 27px no-repeat;}

.teaser .cnt_1 .listWrap ul li.on a {background-position: top left 27px; transition: all 0.5s;}
.teaser .cnt_1 .pencil.on {animation: pencil 1.7s linear forwards;}

/* .cnt_2 */
.teaser .cnt_2 .img_cnt_02_ani {top: 648px; left: 14px; animation: img_cnt_02_ani 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;}

/* .cnt_3 */
.teaser .cnt_3 .main_slideWrap {height: 755px; padding-bottom: 52px;}
.teaser .cnt_3 .main_slideWrap:after {content: ''; display: block; clear: both;}
.teaser .cnt_3 .slide_thumbWrap {float: left; width: 264px; height: 100%;}
.teaser .cnt_3 .slide_thumbWrap ul {width: 100%; height: 100%;}
.teaser .cnt_3 .slide_thumbWrap .swiper-container {height: 100%; overflow: visible;}
.teaser .cnt_3 .slide_thumbWrap li {cursor: pointer; height: 33.333%; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; background: #f3f4eb center center no-repeat;}
.teaser .cnt_3 .slide_thumbWrap li:not(:last-child):before {content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #d2d3cf; transition: 0s;}
.teaser .cnt_3 .slide_thumbWrap li:after {content: ''; display: block; position: absolute; top: 0; right: 0; width: 28px; height: 100%; background-color: #105448;}

.teaser .cnt_3 .slide_thumbWrap li.thumb1 {background-image: url(images/slide_thumb1.png);}
.teaser .cnt_3 .slide_thumbWrap li.thumb2 {background-image: url(images/slide_thumb2.png);}
.teaser .cnt_3 .slide_thumbWrap li.thumb3 {background-image: url(images/slide_thumb3.png);}
.teaser .cnt_3 .slide_thumbWrap li.thumb1.swiper-slide-thumb-active {background-image: url(images/slide_thumb1_on.png);}
.teaser .cnt_3 .slide_thumbWrap li.thumb2.swiper-slide-thumb-active {background-image: url(images/slide_thumb2_on.png);}
.teaser .cnt_3 .slide_thumbWrap li.thumb3.swiper-slide-thumb-active {background-image: url(images/slide_thumb3_on.png);}

.teaser .cnt_3 .slide_thumbWrap .swiper-slide {transition: all 0.3s;}
.teaser .cnt_3 .slide_thumbWrap .swiper-slide.swiper-slide-thumb-active {background-color: #105448; box-shadow: -3px 6px 10px rgba(7,38,33,0.6); z-index: 100;}
.teaser .cnt_3 .slide_thumbWrap .swiper-slide.swiper-slide-thumb-active:before {display: none;}
.teaser .cnt_3 .slide_listWrap {float: right; width: calc(100% - 264px); height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 33px solid #105448; border-bottom: 33px solid #105448; border-right: 30px solid #105448; box-shadow: -3px 6px 15px rgba(7,38,33,0.6);}
.teaser .cnt_3 .slide_wrap {height: 100%;}
.teaser .cnt_3 .slide_wrap .swiper-container {height: 689px; background: url(images/bg_slide_wrap.jpg) top left;}

.teaser .cnt_3 .icon_img03 {top: 51px; left: 720px;}

/* .cnt_4 */
.teaser .cnt_4 ul {left: 818px; top: 235px;}
.teaser .cnt_4 ul li:first-child {padding-top: 28px;}
.teaser .cnt_4 ul li:nth-child(2) {padding-top: 106px;}
.teaser .cnt_4 ul .event_btn:hover {box-shadow: none;}
.teaser .cnt_4 .icon_img04_01 {top: 38px; left: 71px;}
.teaser .cnt_4 .icon_img04_02 {top: 51px; left: 680px;}

/* À̺¥Æ®¸¶°¨ */
.layer_deadline {position: absolute; width: 100%; height: 465px; background: rgba(255,255,255,0.8); top: 234px; left: 0;}
.layer_deadline p {font-size: 33px; font-weight: bold; color: #000; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}