@charset="euc-kr";

/* °øÅë */
#wrapper{overflow:hidden; min-width:1300px; width:auto; margin:0 auto;}
#wrapper > div > img{position:relative; left:50%; transform:translateX(-50%);}
#wrapper > div > .inner{width:1200px; margin:0 auto; text-align:center;}


/* visual */
.visual .inner{position:absolute; top:0; left:50%; height:1389px; transform:translateX(-50%);}
.visual .inner:before{content:""; display:block; position:absolute; top:277px; right:287px; width:20px; height:20px; background-color:#f10000; border-radius:50px; animation:blinker 1s ease-in infinite alternate;}
.visual .inner .light{position:absolute; top:99px; left:598px; animation:blinker 1s ease-in infinite alternate;}
.visual .inner .gif{overflow:hidden; position:absolute; bottom:183px; left:50%; transform:translateX(-50%); border-radius:23px;}
.visual .inner .gif:before{content:""; display:block; position:absolute; bottom:18px; right:44px; width:97px; height:38px; background:url(img/only1_logo.png) 0 0 no-repeat;}

/* con1 */
.con1{background-color:#f5f5f5;}

/* con2 */
.con2{position:relative; background-color:#03efdc;}
.con2 .inner{position:absolute; bottom:108px; left:50%; transform:translateX(-50%);}
.con2 .inner .rolling{position:relative; overflow:hidden; height:572px;}
.con2 .inner .rolling .roller.original{animation: 60s linear 0s infinite normal forwards running rollingTop1;}
.con2 .inner .rolling .roller.clone{animation: 60s linear 0s infinite normal none running rollingTop2;}

/* con3 */
.con3{background-color:#1b1444;}

/* con4 */
.con4{background-color:#f5f5f5;}
.con4 .inner{position:relative; padding-top:68px;}
/* .con4 .inner:before{content:""; display:block; position:absolute; top:88px; right:1px; width:148px; height:148px; background:url(img/con04_badge.png) 0 0 no-repeat; z-index:5;} */
.con4 .inner .bg{position:relative; left:50%; transform:translateX(-50%);}
.con4 .inner .list{display:flex; position:absolute; top:678px; left:0; padding:0 50px;}
.con4 .inner .list .rolling{width:540px; height:437px; padding:50px 35px; background-color:rgba(34,37,60,.9); border-radius:12px; text-align:center;}
.con4 .inner .list .rolling:first-child{margin-right:20px;}
.con4 .inner .list .rolling p{margin-bottom:35px; font-family:"Noto Sans KR"; font-weight:700; font-size:30px;}
.con4 .inner .list .rolling:nth-child(1) p{color:#ffea00;}
.con4 .inner .list .rolling:nth-child(2) p{color:#41d1d2;}
.con4 .inner .list .rolling div{overflow:hidden; height:266px;}
.con4 .inner .list .rolling div ul{position:relative; padding:5px 0; text-align:left;}
.con4 .inner .list .rolling div ul.roller1.original{animation:120s linear 0s infinite normal forwards running rollingTop1;}
.con4 .inner .list .rolling div ul.roller1.clone{animation:120s linear 0s infinite normal none running rollingTop2;}
.con4 .inner .list .rolling div ul.roller2.original{animation:60s linear 0s infinite normal forwards running rollingTop1;}
.con4 .inner .list .rolling div ul.roller2.clone{animation:60s linear 0s infinite normal none running rollingTop2;}
.con4 .inner .list .rolling div ul li{font-family:"Noto Sans KR"; font-weight:400; font-size:20px; color:#fff; letter-spacing:-1px}
.con4 .inner .list .rolling div ul li:not(:first-child){margin-top:9px;}
.con4 .inner .list .rolling div ul li span{display:inline-block; width:81px; height:46px; margin-right:12px; background-color:#fd5650; border-radius:24px; font-weight:700; line-height:46px;  vertical-align:middle; text-align:center;}
.con4 .inner .publishing{position:relative;}
.con4 .inner .publishing .rolling{display:flex; overflow:hidden; position:absolute; top:233px; left:0; width:1200px;}
.con4 .inner .publishing .rolling div.roller.original{animation:86s linear 0s infinite normal forwards running rollingRight1;}
.con4 .inner .publishing .rolling div.roller.clone{animation:86s linear 0s infinite normal none running rollingRight2;}

/* con5 */
.con5 .inner{position:relative; padding-top:116px;}
.con5 .inner:before{content:""; display:block; position:absolute; bottom:93px; left:170px; width:72px; height:84px; background:url(img/click_ico.png) 0 0 no-repeat; animation:click 1s ease-in infinite alternate;}
.con5 .inner:after{content:""; display:block; position:absolute; bottom:93px; right:213px; width:72px; height:84px; background:url(img/click_ico.png) 0 0 no-repeat; animation:click 1s ease-in infinite alternate;}
.con5 .inner .badge{position:absolute; top:103px; left:20px;}

/* con6 */
.con6{background-color:#f5f5f5;}
.con6 .inner{padding-top:136px;}
.con6 .inner > div{position:relative;}
.con6 .inner > div .ani{position:absolute; bottom:186px; width:329px; height:184px; border:1px solid #989aa7;}
.con6 .inner > div .ani.a1{left:66px;}
.con6 .inner > div .ani.a2{left:435px;}
.con6 .inner > div .ani.a3{right:67px;}
.con6 .inner > div .ani.a4{left:66px;}
.con6 .inner > div .ani.a5{left:435px;}

/* con9 */
.con9{background-color:#07184f;}


/* lectureList */
#lectureList{width:1200px; margin:0 auto;}

/* floating(remove: °­Á ¸®½ºÆ® µµ´Þ ½Ã »ç¶óÁü) */
.floating{position:fixed; top:50%; right:1%; z-index:100;}
.floating.remove{position:absolute; top:50%; right:1%;}


/* ------------------------------ animation css ¡é ---------------------------------------------
	animation:60s linear 0s infinite normal forwards running rollingTop1;
	animation:60s linear 0s infinite normal forwards running rollingTop2;
	animation:click 1s ease-in infinite alternate;
	animation:blinker 1s ease-in infinite alternate;
------------------------------------------------------------------------------------------ */

/* ÇÑÂÊÀ¸·Î È帣´Â ¾Ö´Ï¸ÞÀ̼Ç(top:À§·Î, right:¿À¸¥ÂÊÀ¸·Î) */
@keyframes rollingTop1 { 
    0% {transform: translateY(0);}
    50% {transform: translateY(-100%);}
    50.01%{transform: translateY(100%);}
    100%{transform: translateY(0);}
}

@keyframes rollingTop2 {
    0% {transform: translateY(0);}
    100% {transform: translateY(-200%);}
}

@keyframes rollingRight1 { 
	0% {transform: translateX(0);}
	50% {transform: translateX(100%);}
	50.01%{transform: translateX(-100%);}
	100%{transform: translateX(0);}
}

@keyframes rollingRight2 {
	0% {transform: translateX(-200%);}
	100% {transform: translateX(0);}
}

/* ¼Õ°¡¶ô Ŭ¸¯ À¯µµ ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes click{
	0% {transform:translate(0,0);}
	100% {transform:translate(10%,10%);}
}

/* ±ô¹Ú°Å¸®´Â ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes blinker {
	50%{opacity:0;}
}