* {margin:0;padding:0}
img { display:inline-block; vertical-align:middle;}
.teaser {overflow:hidden}
.centerBox {width:1080px;margin:0 auto}

.cnt_1 {overflow:hidden;position:relative;height:983px;background:#1eb2ff url(../images/bg_cnt_01.jpg) 50% 0 repeat}
.cnt_1 .bg_wave_01 {position:absolute;bottom:-1px;left:0;z-index:10;width:100%;height:124px;background:url(../images/wave_01.png) -570px 0 repeat-x}
.cnt_1 .bg_wave_02 {position:absolute;bottom:0;left:50%;z-index:9;width:1920px;height:280px;margin-left:-960px;background:url(../images/wave_02.png) 0 0 no-repeat}
.cnt_1 .centerBox {position:relative;height:983px}
.cnt_1 .ball {position:absolute;bottom:193px;left:-85px;z-index:11}
.cnt_1 .tube {position:absolute;bottom:12px;right:-73px;z-index:11}
.cnt_1 .teacher_01 {position:absolute;bottom:104px;left:0;z-index:20;width:512px;height:431px;background:url(../images/teacher_01.png) 0 0 no-repeat}
.cnt_1 .teacher_01 .face {position:absolute;top:82px;left:141px;padding-bottom:100px;}
.cnt_1 .teacher_02 {position:absolute;top:382px;right:0;z-index:21;width:662px;height:450px;background:url(../images/teacher_02.png) 0 0 no-repeat}
.cnt_1 .teacher_02 .face {position:absolute;top:0;right:164px;z-index:1;padding-bottom:100px;}
.cnt_1 .teacher_02:before {display:block;position:absolute;top:119px;right:213px;z-index:2;width:79px;height:51px;background:url(../images/teacher_02_acc.png) 0 0 no-repeat;content:''}
.cnt_1 .teacher_03 {position:absolute;top:104px;right:-158px;width:223px;height:271px;background:url(../images/teacher_03.png) 0 0 no-repeat}
.cnt_1 .teacher_03 .face {position:absolute;bottom:-45px;left:66px;padding-bottom:100px;}
.cnt_1 .title {position:relative;width:100%;height:100%;}
.cnt_1 .title img {position:absolute;top:0;left:0;z-index:2}
.cnt_1 .title:before {position:absolute;top:325px;left:70px;width:238px;height:32px;background:rgba(15,142,255,0.8);content:''}

.cnt_2 {padding-top:75px}
.cnt_2 .centerBox {position:relative;}
.cnt_2 .btn_coupon {display:block;position:absolute;bottom:148px;left:313px;width:472px;height:90px;border-radius:313px;font-size:0;transition:0.2s}
.cnt_2 .btn_coupon:hover {box-shadow:3px 3px 3px #aaa}
.cnt_2 .link_list {position:absolute;top:243px;left:0;width:1080px}
.cnt_2 .link_list li {position:relative;height:272px;margin-bottom:46px;}
.cnt_2 .link_list li a {position:absolute;top:51px;right:68px;width:182px;height:163px;border-radius:10px 76px 74px 90px;font-size:0;background:url(../images/btn_link_txt.png) 56% 60% no-repeat;transition:0.2s}
.cnt_2 .link_list li:hover a {box-shadow:3px 3px 3px #6fafca}
.cnt_2 .link_list li .trickle {display:block;position:absolute;top:56px;right:67px;width:178px;height:161px;background:url(../images/btn_link.png) 0 0 no-repeat;}

.cnt_3 {background-color:#ffeb44}
.cnt_3 .centerBox {position:relative}
.cnt_3 .link_list {overflow:hidden;position:absolute;bottom:169px;left:80px;}
.cnt_3 .link_list li {float:left}
.cnt_3 .link_list li:first-child {margin-right:79px;}
.cnt_3 .link_list li a {display:block;position:relative;width:420px;height:170px;box-sizing:border-box;font-size:0;background:url(../images/btn_coupon.png) 0 0 no-repeat;transition:0.2s}
.cnt_3 .link_list li a:before {display:block;position:absolute;top:74px;left:74px;width:24px;height:16px;background:url(../images/btn_coupon_arr.png) 0 0 no-repeat;content:''}
.cnt_3 .link_list li a:hover {background-position:0 5px}

.cnt_4 {background-color:#24beff}
.cnt_4 .centerBox {position:relative;}
.cnt_4 .btn_coupon {display:block;position:absolute;bottom:207px;right:108px;width:540px;height:70px;font-size:0;transition:0.2s}
.cnt_4 .btn_coupon:hover {box-shadow:3px 3px 3px #aaa}

.cnt_5 {background-color:#292929}
.cnt_5 .centerBox {position:relative}
.cnt_5 .btn_link {display:block;position:absolute;bottom:100px;left:0;width:100%;height:150px;font-size:0}
.cnt_5 .btn_link img {position:absolute;top:64px;left:306px;transition:0.3s}
.cnt_5 .btn_link:hover img {left:266px}

.cnt_6 .centerBox {position:relative}
.cnt_6 .arrow {overflow:hidden;position:absolute;top:236px;left:0;}
.cnt_6 .arrow span {display:block;float:left;width:50px;height:50px;margin-left:225px;background:url(../images/img_cnt_06_arr.png) 50% 50% no-repeat}
.cnt_6 .arrow span.arr1 {margin-left:240px;}
.cnt_6 .btn_link {display:block;overflow:hidden;position:absolute;bottom:154px;left:30px;width:196px;height:40px;border-radius:196px;font-size:0;line-height:40px;text-align:center;background-color:#000;transition:0.2s}
.cnt_6 .btn_link:hover {box-shadow:3px 3px 3px #af9d04}



/* ani */
.cnt_1 .title:before {animation:line 3s ease-in-out infinite}
@keyframes line{ 0% {width:0} 20% {width:238px;left:70px} 80% {width:238px;left:70px} 100% {width:0;left:308px}}

.cnt_1 .bg_wave_01 {animation:wave_01; -webkit-animation:wave_01; animation-duration:35000s; -webkit-animation-duration:35000s;}
@keyframes wave_01 { 0% {background-position:-570px bottom;}	100% {background-position:10000000px bottom;}}

.cnt_1 .bg_wave_02 {animation:wave_02; -webkit-animation:wave_02; animation-duration:2s; -webkit-animation-duration:2s; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate}
@keyframes wave_02 { 0% {bottom:0}	100% {bottom:-20px}}

.cnt_1 .tube {animation:tube; -webkit-animation:tube; animation-duration:2s; -webkit-animation-duration:2s; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate}
@keyframes tube { 0% {bottom:12px} 100% {bottom:0px}}

.cnt_1 .face {-webkit-animation:face 0.5s linear infinite alternate; animation:face 0.5s linear infinite alternate;}
@keyframes face{ 0% {transform:rotate(-5deg)} 100% {transform:rotate(0deg)}}

.cnt_2 .link_list li:hover .trickle {animation:trickle 0.5s ease-in-out}
@keyframes trickle{ 0% {transform:rotate(0)} 50% {transform:rotate(10deg)} 60% {transform:rotate(0deg)} 70% {transform:rotate(10deg)} 80% {transform:rotate(0deg)} 90% {transform:rotate(5deg)} 100% {transform:rotate(0)}}

.cnt_3 .link_list li a:before {animation:download 0.4s ease-in-out infinite alternate}
@keyframes download { 0% {top:64px} 100% {top:74px} }

.cnt_6 .arrow span {animation:arrow 0.5s ease-in-out infinite alternate}
.cnt_6 .btn_link img {animation:join 0.5s ease-in-out infinite alternate}
.cnt_6 .btn_link:hover img {animation-play-state:paused}
.cnt_6 .btn_link:hover + .arrow span {animation-play-state:paused}
@keyframes arrow { 0% {background-position:40% 50%} 100% {background-position:60% 50%} }
@keyframes join { 0% { margin-left:-10px } 100% {margin-left:10px}}