@charset="euc-kr";

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


/* visual */
.visual{position:relative;}
.visual .inner{position:absolute; top:0; left:50%; transform:translateX(-50%); width:1200px; height:100%; padding:187px 0 0 87px; text-align:left;}
.visual .inner .tit img:last-child{margin-top:12px;}
.visual .inner .step{display:flex; position:relative; margin-top:193px; z-index:50;}
.visual .inner .step li{position:relative;}
.visual .inner .step li:not(:first-child){margin-left:-30px;}
.visual .inner .step li:nth-child(1){z-index:30;}
.visual .inner .step li:nth-child(2){z-index:20;}
.visual .inner .step li:nth-child(3){z-index:10;}
.visual .inner .woman{position:absolute; bottom:103px; left:-141px;}
.visual .inner .man{position:absolute; bottom:73px; right:-331px;}

/* zone common */
.zone > .tit{display:flex; align-items:center; justify-content:center; position:relative; height:300px;}
.zone > .tit:before{content:""; display:block; position:absolute; bottom:-80px; left:50%; transform:translateX(-50%); width:160px; height:80px;}
.zone .txt1{margin-bottom:60px; font-weight:700; font-size:35px; color:#000; line-height:45px;}
.zone .inner{padding:90px 0 100px;}

/* zone1 */
.zone1 .tit{background:url(img/zone01_tit_bg.png) center top no-repeat;}
.zone1 .tit:before{background:url(img/zone01_arr.png) 0 0 no-repeat;}
.zone1 .inner{padding:90px 0 100px;}
.zone1 .inner .txt2{margin-top:60px; font-weight:800; font-size:40px; color:#000; line-height:50px;}
.zone1 .inner .txt2 span{color:#008CF0;}
.zone1 .inner .con{position:relative;}
.zone1 .inner .con:before{content:""; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:402px; height:1014px; background:url(img/zone01_ani.png) 0 0 no-repeat;  animation: fadeBlink 1.6s ease-in-out infinite;}
.zone1 .inner .con img{position:relative; z-index:10;}

/* zone2 */
.zone2 .tit{background:url(img/zone02_tit_bg.png) center top no-repeat;}
.zone2 .tit:before{background:url(img/zone02_arr.png) 0 0 no-repeat;}
.zone2 .inner .con .table{position:relative; margin-bottom:60px;}
.zone2 .inner .con .table:before{content:""; display:block; position:absolute; bottom:-2px; left:-72px; width:1277px; height:159px; background:url(img/zone02_ani.png) 0 0 no-repeat;  animation: fadeBlink 1.6s ease-in-out infinite;}

/* zone3 */
.zone3 > .tit{background:url(img/zone03_tit_bg.png) center top no-repeat;}
.zone3 > .tit:before{background:url(img/zone03_arr.png) 0 0 no-repeat;}
.zone3 > .inner .con .link{position:relative; margin-bottom:100px;}
.zone3 > .inner .con .link .move{display:flex; gap:98px; position:absolute; bottom:154px; left:44px;}
.zone3 > .inner .con .link .move a{display:block; width:206px; height:57px; text-indent:-9999px;}
.zone3 .introduction{background:#EAF6FF;}
.zone3 .introduction .inner{width:1200px; margin:0 auto; padding:100px 0;}
.zone3 .introduction .inner .tit{margin-bottom:40px;}
.zone3 .introduction .inner .step div{position:relative;}
.zone3 .introduction .inner .step div:not(:first-child){margin-top:40px;}
.zone3 .introduction .inner .step div video{position:absolute; top:151px; right:41px; border-radius:4px;}

/* zone4 */
.zone4 .tit{background:url(img/zone04_tit_bg.png) center top no-repeat;}
.zone4 .tit:before{background:url(img/zone04_arr.png) 0 0 no-repeat;}
.zone4 .txt1{font-weight:800; font-size:40px; line-height:50px;}
.zone4 .txt1 span{color:#9336DB;}


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

/* floating */
.floatingUi1{position:fixed; top:10%; left:5%; width:180px; z-index:100;}
.floatingUi1 ul{overflow:hidden; margin-top:10px; border:1px solid #000; border-radius:10px;}
.floatingUi1 ul li:not(:last-child) a{border-bottom:1px dashed #ccc;}
.floatingUi1 ul li a{display:flex; justify-content:center; flex-direction:column; height:64px; padding:0 15px; background:#fff; font-weight: 700; font-size:16px; color:#4b4b4b; text-align:left; line-height:18px;}
.floatingUi1 ul li a span{font-size:14px;}
.floatingUi1 ul li.on a{background:#FF4B4B; border-bottom:none; color:#fff;}
.floatingUi1 ul li.on a span{font-weight:800;}


/* ------------------------------ 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;}
}

@keyframes fadeBlink {
    0%   { opacity: 1;}
    50%  { opacity: 0;}
    100% { opacity: 1;}
}