@font-face { font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; }

#wrapper.wide{width:auto;min-width:1300px;overflow:hidden;margin:0 auto;}
#wrapper .inner{position:relative; width:1200px; margin:0 auto;}

.mask{
	width: 1200px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	min-height: 50px;
}
.mask > img{	
	position: relative;
	left:50%;
	transform:translateX(-50%);
}

/* visual */
.visual{background:url(img/visual.png) center top no-repeat;}
.youtube{position:absolute; top:872px; left:50%; height:722px; transform:translateX(-50%); box-shadow:20px 20px 15px 0 rgb(0 0 0 / 30%);}

/* con1 */
.con1{background-color:#c91b23;}
.con1 .inner{padding-top:453px;}

/* con2 */
.con2{background-color:#f0f2ff;}
.con2 .inner{padding-bottom:70px;}
.con2 .rolling{overflow:hidden; height:828px;}
.con2 .rolling .roller.original{animation: 60s linear 0s infinite normal forwards running rollingTop1;}
.con2 .rolling .roller.clone{animation: 60s linear 0s infinite normal none running rollingTop2;}
@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%);}
}

/* con3 */
.con3{background-color:#222;}

/* con4 */
.con4 .inner > div{position:relative;}
.con4 div .gif1{display:flex; position:absolute; bottom:120px; left:0;}
.con4 div .gif1 img:not(:first-child){margin-left:10px;}
.con4 div .gif2{position:absolute; bottom:159px; left:36px;}
.con4 .slider2{position:absolute; bottom:0; left:50%; width:1260px; height:655px; transform:translateX(-50%);}
.con4 .slider2 .swiper-slide{opacity:0 !important; transition:opacity ease .5s;}
.con4 .slider2 .swiper-slide.swiper-slide-active{opacity:1 !important;}
.con4 .slider2 .swiper-slide a{position:absolute; bottom:-35px; right:0;}
.con4 .slider2 .swiper-slide a img{width:auto; height:25px;}
.con4 .slider2 > div{top:auto; bottom:340px; width:30px; height:49px; margin:0; background:url(img/con04_slider_arr.png) 0 0 no-repeat;}
.con4 .slider2 > div:after{display:none;}
.con4 .slider2 > div.swiper-button-prev{left:30px;}
.con4 .slider2 > div.swiper-button-next{right:30px; background-position:-30px 0;}

/* con5 */
.con5{background-color:#d6daf7;}
.con5 .inner{padding-bottom:77px;}
.con5 .rolling1{display:flex; margin-bottom:45px;}
.con5 .rolling1 .roller.original{margin-right:12px; animation:100s linear 0s infinite normal forwards running rollingLeft1;}
.con5 .rolling1 .roller.clone{animation:100s linear 0s infinite normal none running rollingLeft2;}
.con5 .rolling2{display:flex;}
.con5 .rolling2 .roller.original{margin-right:12px; animation:100s linear 0s infinite normal forwards running rollingRight1;}
.con5 .rolling2 .roller.clone{animation:100s linear 0s infinite normal none running rollingRight2;}
@keyframes rollingLeft1 { /* ¿øº»¿ë */
    0% {transform: translateX(0);}
    50% {transform: translateX(100%);}
    50.01%{transform: translateX(-100%);}
    100%{transform: translateX(0);}
}

@keyframes rollingLeft2 { /* Å¬·Ð¿ë */
    0% {transform: translateX(-200%);}
    100% {transform: translateX(0);}
}

@keyframes rollingRight1 { /* ¿øº»¿ë */
    0% {transform: translateX(0);}
    50% {transform: translateX(-100%);}
    50.01%{transform: translateX(100%);}
    100%{transform: translateX(0);}
}

@keyframes rollingRight2 { /* Å¬·Ð¿ë */
    0% {transform: translateX(0);}
    100% {transform: translateX(-200%);}
}
.con5 .tab{margin-bottom:22px;}
.con5 .tab ul{display:flex; justify-content:center;}
.con5 .tab ul li{width:268px;}
.con5 .tab ul li:first-child{margin-right:20px;}
.con5 .tab ul li a{display:block; height:58px; background-color:#6c708c; border-radius:15px; font-family:"Noto Sans KR"; font-weight:500; font-size:28px; color:#fff; line-height:58px; text-align:center;}
.con5 .tab ul li a span{font-family:"GmarketSansBold"; vertical-align:middle;}
.con5 .tab ul li.on a{background-color:#4e00ae;}
.con5 .tab_con{display:none;}
.con5 .tab_con.active{display:block;}

/* con6 */
.con6 .slider3{position:relative; height:763px; overflow:hidden;}
.con6 .slider3 .swiper-wrapper{position:relative; height:763px;}
.con6 .slider3 .swiper-pagination{top:144px; left:0px !important; transform:inherit; width:155px;}
.con6 .slider3 .swiper-pagination-bullet{width:155px; height:106px; text-indent:-9999em; background:url(img/con06_nav.png) no-repeat; opacity:1 !important; margin:0 !important; border-radius:0 !important;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(1){background-position:0 0 !important;;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(2){background-position:0 -106px !important;;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(3){background-position:0 -216px !important;;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(4){background-position:0 -326px !important;;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(5){background-position:0 -432px !important;;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active{background-position:-160px 0 !important;;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active{background-position:-160px -106px !important;;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active{background-position:-160px -216px !important;;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active{background-position:-160px -326px !important;;}
.con6 .slider3 .swiper-pagination-bullet:nth-child(5).swiper-pagination-bullet-active{background-position:-160px -432px !important;;}

/* con7 */
.con7{background-color:#eef3ff;}

/* con8 */
.con8{background-color:#f5f5f5;}
.con8 .inner:before{content:""; display:block; position:absolute; top:278px; left:497px; width:208px; height:208px; background:url(img/con08_rotate.png) 0 0 no-repeat; animation:rotate_image 6s linear infinite; transform-origin:50% 50%;}
@keyframes rotate_image{
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}

/* con9 */
.con9{background-color:#292626;}

/* floating */
.floatingUi {
	position: fixed;
	overflow: hidden;
	right:20px;
	top:50%;
	width:211px;
	z-index: 9;
	margin: 0 0 0 0;	
	background-repeat:no-repeat;
	transform:translateY(-50%);
}
.floatingUi .f_inner{position:absolute; left:0; top:0; z-index:9999;}
.floatingUi .f_inner > ul{position:relative;}
.floatingUi .f_inner > ul li{display:block; width:211px; height:71px;}
.floatingUi .f_inner > ul li:nth-child(1){height:75px;}
.floatingUi .f_inner > ul li:nth-child(2){height:77px;}
.floatingUi .f_inner > ul li:nth-child(3){height:76px;}
.floatingUi .f_inner > ul li:nth-child(4){height:72px;}
.floatingUi .f_inner > ul li:nth-child(5){height:56px;}
.floatingUi .f_inner > ul li a{display:block; background:url(img/floating.png) no-repeat; width:100%; height:100%; text-indent:-9999em;}
.floatingUi .f_inner > ul li a.s1{background-position:0 0;}
.floatingUi .f_inner > ul li a.s2{background-position:0 -75px;}
.floatingUi .f_inner > ul li a.s3{background-position:0 -152px;}
.floatingUi .f_inner > ul li a.s4{background-position:0 -228px;}
.floatingUi .f_inner > ul li a.s5{background-position:0 -300px;}
.floatingUi .f_inner > ul li.on a.s1{background-position:-211px 0;}
.floatingUi .f_inner > ul li.on a.s2{background-position:-211px -75px;}
.floatingUi .f_inner > ul li.on a.s3{background-position:-211px -152px;}
.floatingUi .f_inner > ul li.on a.s4{background-position:-211px -228px;}
.floatingUi .f_inner > ul li.on a.s5{background-position:-211px -300px;}
.floatingUi .anchor{display:block; margin-top:5px; text-align:center;}

/* popup */
.popup1{margin-top:50px;}
.popup1 > img{border:3px solid #383838;}
.popup1 .b-close{position:absolute; top:17px; right:35px; cursor:pointer;}

/* °­ÁÂ */
#lectureList{width:1200px; margin:0 auto;}
