@charset="euc-kr";

@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }
@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; }
@font-face { font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; }

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


/* visual */
.visual{position:relative; background-color:#181884;}
#wrapper .visual .inner{position:absolute; top:0; left:50%; transform:translateX(-50%); width:1300px; height:100%; padding-top:213px; text-align:center;}
#wrapper .visual .inner:before{content: ""; position: absolute; left:50%; top:calc(50% + 8px); transform:translate(-50%,-50%); width:830px; height:842px; background:url(img/visual_clock_bg.png) 0 0 no-repeat; z-index: 10;}
.visual .clock{position: absolute; top:calc(50% + 14px); left:50%; transform:translate(-50%,-50%); width: 804px; height: 804px; overflow: hidden; border-radius: 50%;}
.visual .clock:before{content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, rgba(81,102,250,1), rgba(238, 15, 255, 1), transparent 58%); animation: rotate 4s linear infinite;}
.visual .clock:after{content: "";  position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; background: url(img/visual_bg.png) center center no-repeat; border-radius: 50%;}
.visual .tit{position:relative; z-index:10;}
.visual .tit p{font-size:40px; color:#fff; letter-spacing:-2px;}
.visual .tit strong{display:block; margin-top:-1px; font-size:44px; color:#e41618; line-height:1;}

/* confidence */
.confidence .tit{position:absolute; top:149px; left:89px; text-align:left;}
.confidence .tit p{font-family:"GmarketSansLight"; font-size:45px; color:#222; line-height:1;}
.confidence .tit p strong{display:block; margin-top:11px; font-family:"GmarketSansBold"; line-height:44px;}

/* check */
.check{position:relative; background-color: #33335e;}
#wrapper .check .inner{position:absolute; top:0; left:50%; height:100%; transform:translateX(-50%);}
.check .inner .con{position:absolute; top:500px; right:134px; text-align:left;}
.check .inner .con li{position:relative; margin-bottom:79px; font-weight:500; font-size:30px; font-style:italic; color:#ed1941; letter-spacing:-2px; line-height:1;} 
.check .inner .con li:nth-child(2){margin-bottom:70px;}
.check .inner .con li:before{content:""; display:block; position:absolute; top:6px; left:-100px; width:17px; height:17px; background-color:#ed1941; border-radius:50%;}

/* banner */
.banner1,
.banner2{background-color:#222;}

/* review */
.review{padding-bottom:214px; background-color:#e5f7fc;}
.review .slider{overflow:hidden; text-align:left;}
.review .slider .swiper-slide p{margin:10px 0 0 18px; font-size:22px; color:#222; letter-spacing:-1px;}
.review .slider .swiper-slide p strong{font-weight:900;}
.review .slider .swiper-slide p strong span{color:#ed1941;}
.review .swiper-pagination-progressbar{bottom:-91px; overflow:hidden; width:100%; height:8px; background-color:#fff; border-radius:10px;}
.review .swiper-pagination-progressbar span{background-color:#e41618; border-radius:10px;}

/* cheatKey °øÅë */
.cheatKey{padding:80px 0; text-align:left;}
.cheatKey .tit{display:flex; align-items:center; overflow:hidden; padding:32px 0 32px 40px; background-color:#fff; border:30px solid #e41618; letter-spacing:-2.5px; line-height:1;}
.cheatKey .tit p{font-family:"GmarketSansLight"; font-size:45px; color:#222;}
.cheatKey .tit p strong{display:block; margin-top:2px; font-family:"GmarketSansBold"; line-height:50px;}
.cheatKey .tit p strong span{color:#e41618;}

/* cheatKey1 */
.cheatKey1{background-color:#fff8e7;}
.cheatKey1 .con{overflow:hidden; position:relative;}
.cheatKey1 .con:before{content:""; display:block; position:absolute; top:0; left:0; width:1300px; height:100%; background:url(img/cheatKey01_book02.png) center 0 no-repeat; background-attachment:fixed;}
.cheatKey1 .con .percent{display:flex; align-items:center; justify-content:center; position:absolute; top:50%; left:50%; width:400px; height:400px; margin:-200px 0 0 -200px; background-color:#e41618; border-radius:50%; text-align:center; box-shadow:0px 0px 10px 3px rgb(0 0 0 / 50%);}
.cheatKey1 .con .percent:before{content:""; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:460px; height:460px; background-color:#de1517; border-radius:50%; opacity: .4; z-index:-1;}
.cheatKey1 .con .percent p{font-family:"GmarketSansBold"; font-size:34px; color:#222;}
.cheatKey1 .con .percent p strong{display:block; margin:-26px 0 -43px; font-size:127px; color:#fff;}
.cheatKey1 .con .percent p strong span{font-size:64px;}
.cheatKey1 canvas{display:none;}

/* cheatKey2 */
.cheatKey2{background-color:#fddfbb;}
.cheatKey2 .video{position:absolute; bottom:105px; left:78px; overflow:hidden; width:622px; height:347px; border-radius:10px;}

/* cheatKey3 */
.cheatKey3{background-color:#fde8ec;}
.cheatKey3 .btn{display:block; position:absolute; bottom:88px; right:80px; width:432px; height:120px; text-indent:-9999px;}

/* cheatKey4 */
.cheatKey4{background-color:#fbd1d9;}
.cheatKey4 .tit p span{position:relative;}
.cheatKey4 .tit p span:before{content:"¼ö/»ç/°ú Àü¿ë"; display:block; position:absolute; top:4px; right:-147px; width:134px; height:35px; background-color:#222; border-radius:20px; font-family:"GmarketSansMedium"; font-size:18px; color:#fff; line-height:38px; text-align: center;}

/* cheatKey5 */
.cheatKey5{background-color:#fff1d0;}
.cheatKey5 .tit p span{position:relative;}
.cheatKey5 .tit p span:before{content:"Á¾ÇÕ¹ÝÀü¿ë"; display:block; position:absolute; top:4px; right:-147px; width:134px; height:35px; background-color:#e41618; border-radius:20px; font-family:"GmarketSansMedium"; font-size:18px; color:#fff; line-height:38px; text-align: center;}
.cheatKey5 .con{position:relative;}
.cheatKey5 .con .slide_wrapper{position:absolute; top:60px; left:204px; width:364px;}
.cheatKey5 .con .slide_wrapper .title{width:320px; margin:0 auto 46px auto;}
.cheatKey5 .con .slide_wrapper .title .swiper-slide{width:100px; height:50px; padding-top:2px; background-color:#b2b2b2; border-radius:50px; font-weight:700; font-size:30px; color:#666; text-align:center; cursor:pointer;}
.cheatKey5 .con .slide_wrapper .title .swiper-slide-thumb-active{background-color:#222; color:#fff;}
.cheatKey5 .con .slide_wrapper .slider{overflow:hidden;}
.cheatKey5 .con .arr{position:absolute; left:-129px; bottom:301px; width:613px; z-index:15;}
.cheatKey5 .con .arr .swiper-button-next:after,
.cheatKey5 .con .arr .swiper-button-prev:after{display:none;}
.cheatKey5 .con .pen{position:absolute; bottom:273px; left:208px; z-index:10;}


/* answer */
.answer {background-color: #f9f9fc;}
.answer .slider {margin:10px 0 80px; background: url(img/teacher_bg.png) no-repeat center bottom; height: 800px; overflow: hidden;}
.answer .slider .swiper-container {position: relative; width: 1200px; margin: 0 auto; overflow: visible;}
.answer .slider .swiper-slide {opacity: 0 !important; transition: opacity ease .5s;}
.answer .slider .swiper-slide-active {opacity: 1 !important;}
.answer .slider .button_arrow {top: auto; bottom: 325px; width: 30px; height: 49px; margin: 0; background: url(/promotion/lecture/2022/1206_fullRange/img/con04_slider_arr.png) 0 0 no-repeat;}
.answer .slider .button_arrow:after {display: none;}
.answer .slider .button_arrow.swiper-button-prev {left: 0;}
.answer .slider .button_arrow.swiper-button-next {right: 0; background-position: -30px 0;}

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

/* floating */
.floatingUi{position: fixed; top:27%; right:2%; width:165px; height:476px; padding-top:145px; background:url(img/navigation.png) 0 0 no-repeat; z-index:100;}
.floatingUi ul li a{display:block; height:66px; text-indent:-9999px;}

@media screen and (max-width:1600px){

	/* floating */
	.floatingUi{position: fixed; top:31%; right:1%; width:135px; height:390px; padding-top:145px; background:url(img/navigation_min.png) 0 0 no-repeat; z-index:100;}
	.floatingUi ul li a{display:block; height:54px; text-indent:-9999px;}
}


/* ------------------------------ 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 rotate {
  100% {
    transform: rotate(1turn);
  }
}