@charset "euc-kr"; @font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@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;
}


/* common */
#wrapper.wide { overflow-x:hidden; width:auto; min-width:1200px; margin:0; }
#wrapper .mid > div { position:relative; }
#wrapper .btn { display:block; text-indent:-9999px; }
#wrapper .swiper-button-prev, #wrapper .swiper-button-next { display:block; text-indent:-9999px; }
.mid .mask { width:1200px; position:relative; margin:0 auto; min-height:50px; text-align:center; }
.mask .thumb { position:relative; left:50%; transform:translateX(-50%); }
.swiper-button-next:after, .swiper-button-prev:after { display:none; }
#layerPopv02 { opacity:1 !important; }
.btn a { display:block; }


/* anchor */
.anchor { position:fixed !important; left:5%; top:229px; z-index:15; }
.anchor { overflow:hidden; background-color:#fff; border:1px solid #ECECED; border-radius:16px; }
.anchor ul li { width:159px; }
.anchor ul li:not(:last-child) { border-bottom:1px solid #ECECED; }
.anchor ul li a { display:flex; align-items:center; justify-content:center; height:87px; text-align:center; }
.anchor ul li a * { font-family:"Pretendard"; color:#333; }
.anchor ul li a.on { background:#2d16ff; }
.anchor ul li a.on * { color:#fff; }
.anchor ul li a p { font-weight:600; font-size:20px; line-height:22px; }
.anchor ul li a p span { display:block; margin-bottom:4px; font-weight:900; font-size:16px; }
/*
.anchor ul li.last a { background:#c8ceff; }
.anchor ul li.last a * { color:#333; }
.anchor ul li.last a.on { background:#FFBD7C; color:#333; }
*/


/* visual */
.visual {overflow:hidden;background:#250d71;height: 966px;}
.visual .mask {height:100%;}
.visual .con {display:flex;flex-direction:column;flex-wrap:wrap;position:absolute;top: 0;left:50%;transform:translateX(-50%);width:1434px;height:100%;}
.visual .con .bg { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);}
.visual .con .record {display:flex;justify-content:center;gap:11px;margin-top: 45px;}
.visual .con .tit {position:absolute;top: 230px;left:50%;margin-left: -645px;z-index:10;}
.visual .con .train1 {position: absolute;top: 0;left: 0;top: 441px;left:50%;margin-left: -984px;z-index:10;width: 1893px;height: 453px;mix-blend-mode: screen;}
.visual .con .train2 {position: absolute;top: 0;left: 0;top: 441px;left:50%;margin-left: -984px;z-index:10;width: 1893px;height: 453px;mix-blend-mode: hard-light;}
.visual .con .light1 {position:absolute;top: 601px;left:50%;margin-left: -1285px;z-index:10;mix-blend-mode: screen;}
.visual .con .light2 {position: absolute;top: 537px;left: 50%;margin-left: -1285px;z-index: 10;mix-blend-mode: screen;}
.visual .con .light3 {position: absolute;top: 481px;left: 50%;margin-left: 104px;z-index: 10;mix-blend-mode: screen;}
.visual .con .light4 {position: absolute;top: 438px;left: 50%;margin-left: -165px;z-index: 10;mix-blend-mode: screen;}
.visual .con .light5 {position: absolute;top: 531px;left: 50%;margin-left: 314px;z-index: 10;mix-blend-mode: screen;}
.visual .con .btn {position:absolute;top: 719px;left:50%;margin-left: -400px;z-index:10;width: 801px;height: 135px;background: url(img/visual_btn.png) 0 0 no-repeat;}
.visual .con .btn a {width:686px;height:91px; }


/* banner1 */
.banner1 {position:relative;background: #20218a;}
.banner1 .badge { position:absolute; top:-41px; left:-3px; }


/* event1 */
.event1 { background:#FFEAEA url(img/event01_bg.png) no-repeat 0 0 / cover; }
.event1 .mask { padding:100px 0; }
.event1 .con { margin-left:-20px; }
.event1 .tit { margin-bottom:60px; }
.event1 .btn { margin-top:20px; }
.event1 .btn a { position:absolute; left:0; right:0; bottom:120px; width:553px; height:93px; margin:0 auto; }
.event1 .btn a::after { content:''; display:block; position:absolute; bottom:-33px; right:25px; width:74px; height:93px; background:url(img/click_ico.png) 0 0 no-repeat; animation:blinker 1s ease-in infinite alternate; z-index:1; }


/* event2 */
.event2 { background:#fff url(img/event02_bg.png) no-repeat 0 0 / cover; }
.event2 .mask { padding:100px 0; }
.event2 .tit { margin-bottom:80px; }
.event2 .cnt { display:flex; justify-content:center; position:relative; }
.event2 .cnt .event2_num { left:97px; bottom:233px; position:absolute; display:flex; gap:9px; }
.event2 .cnt .event2_num span { position:relative; font-size:95px; color:#fff; font-family:"Pretendard"; font-weight:900; width:104px; height:142px; }
.event2 .cnt .event2_num span:nth-last-child(3n+4) { margin-right:14px; }
.event2 .cnt .event2_num span:nth-last-child(3n+4)::after { content:''; display:block; position:absolute; bottom:-9px; right:-19px; width:12px; height:22px; background:url(img/comma.png) 0 0 no-repeat; }
.event2 .btn { margin-top:20px; }
.event2 .btn a { position:absolute; left:0; right:0; bottom:119px; width:607px; height:93px; margin:0 auto; }
.event2 .btn a::after { content:''; display:block; position:absolute; bottom:-33px; right:49px; width:74px; height:93px; background:url(img/click_ico.png) 0 0 no-repeat; animation:blinker 1s ease-in infinite alternate; z-index:1; }


/* event3 */
.event3 {background: #edebff;}
.event3 .mask { padding:100px 0; }
.event3 .mask > .tit { margin-bottom:50px; }
.event3 .mask > .con { margin-left:-20px; }
.event3 .btn { margin-top:20px; }
.event3 .btn a {position:absolute;left:0;right: 0;top: 782px;width: 694px;height:93px;margin:0 auto;}
.event3 .btn a::after {content:'';display:block;position:absolute;top: 28px;right: 43px;width:74px;height:93px;background:url(img/click_ico.png) 0 0 no-repeat;animation:blinker 1s ease-in infinite alternate;z-index:1;}
.event3 .obj { position:absolute; }
.event3 .obj1 {top:100px;left:-158px;opacity: 0.4;}
.event3 .obj2 {top:216px;right:-282px;opacity: 0.4;}
.event3 .obj3 {top:800px;left:-300px;opacity: 0.4;}
.event3 .obj4 {top:1133px;right:-330px;opacity: 0.4;}

.notice_wrap { position:relative; margin-top:70px; }
.notice_wrap > .tit { display:block; height:70px; background-color:#111111; border-radius:40px; font-family:"GmarketSansBold"; font-size:28px; color:#fff; line-height:74px; }
.notice_wrap > .tit span { position:relative; padding-right:30px; }
.notice_wrap > .tit span:before { content:""; display:block; position:absolute; top:8px; right:0; width:20px; height:13px; background:url(/promotion/common/benefit/experience/img/notice_arr.png) 0 0 no-repeat; transition:transform .5s; }
.notice_wrap > .tit.on span:before { transform:rotate(180deg); }
.notice_wrap .con { display:none; padding:50px; background-color:#f6f6f6; border-radius:40px; text-align:left; letter-spacing:-1px; }
.notice_wrap .con .tit { margin-bottom:10px; padding-left:10px; font-weight:900; font-size:20px; color:#333; }
.notice_wrap .con ul + p { margin-top:25px; }
.notice_wrap .con ul li { position:relative; padding-left:10px; font-weight:500; font-size:16px; color:#777; }
.notice_wrap .con ul li:not(:first-child) { margin-top:4px; }


/* worry */
.worry { height:1388px; background:url(img/worry_bg.png) center center no-repeat; }
.worry .mask { padding:45px 0 100px; }
.worry .mask .con { position:relative; }
.worry .mask .con .tit { margin-bottom:60px; }
.worry .mask .con .btns { position:absolute; top:210px; left:50%; transform:translate(-50%, 0); display:flex; flex-direction:column; gap:15px; }
.worry .mask .con .btns a { display:block; width:1000px; height:100px; border-radius:38px; }


/* banner2 */
.banner2 {display:flex;align-items:center;position:relative;height:300px;background: #1862d1;}
.banner2:before { content:""; display:block; position:absolute; bottom:-80px; left:50%; transform:translateX(-50%); width:160px; height:80px; background:url(img/banner02_arr.png) 0 0 no-repeat; z-index:10; }


/* lineup */
.lineup {padding:0 0 100px;background-color: #1F2235;}
.lineup .badge { position:absolute; top:80px; right:-115px; left:auto; z-index:2; }
.lineup .mask { padding-top:80px; text-align:inherit; }
.lineup .txt_box { position:relative; width:971px; height:195px; margin:40px auto 0; background:#4A5382; border-radius:30px; text-align:center; }
.lineup .txt_box .bg { position:absolute; top:0; right:0; opacity:.3; display:none;}
.lineup .txt_box .swiper-container { height:195px; }
.lineup .txt_box .swiper-wrapper .swiper-slide { display:flex; flex-direction:column; justify-content:center; align-items:center; height:195px; }
.lineup .txt_box .swiper-wrapper .swiper-slide p { margin-bottom:25px; font-family:"TmoneyRoundWindRegular", sans-serif; font-size:28px; color:#fff; letter-spacing:-2px; }
.lineup .txt_box .swiper-wrapper .swiper-slide span { font-family:"Pretendard", sans-serif; font-weight:500; font-size:24px; color:#B2B9FF; }
.lineup .slider { margin:0 0 -238px 0; width:1200px; overflow:hidden; }
.lineup .slider .swiper-container { position:relative; width:1200px; margin:0 auto; overflow:visible; }
.lineup .slider .swiper-slide { opacity:0 !important; transition:opacity ease .5s; }
.lineup .slider .swiper-slide-active { opacity:1 !important; }
.lineup .slider .swiper-button-next { top:50%; right:0; left:auto; width:30px; height:49px; }
.lineup .slider .swiper-button-prev { top:50%; left:0; right:auto; width:30px; height:49px; }
.lineup .slider .swiper-button-next a { display:block; width:100%; height:100%; background:url(/promotion/event/2023/1221_11780/img/slide_next_arr.png) 0 0 no-repeat; }
.lineup .slider .swiper-button-prev a { display:block; width:100%; height:100%; background:url(/promotion/event/2023/1221_11780/img/slide_prev_arr.png) 0 0 no-repeat; }


/* reward */
.reward { background: #14071e;}


/* proof */
.proof {background: #f6e2fd;}
.proof .con { padding:100px 0 50px; position:absolute; top:0; left:50%; width:1200px; height:100%; transform:translateX(-50%); }
.proof_con { margin-top:60px; }
.proof .slide_top { margin-top:60px; position:relative; }
#proofSlideTop { width:1090px; }
#proofSlideTopPrev, #proofSlideTopNext { background:url(img/proof_arr.png) 0 0 no-repeat; width:31px; height:54px; margin:0; transform:translate(0, -50%); }
#proofSlideTopPrev { left:5px; }
#proofSlideTopNext { transform:translate(0, -50%) scaleX(-1); right:5px; }
.proof .slide_btm { margin-top:60px; }
#proofSlideBtm { overflow:visible; }
#proofSlideBtm .swiper-wrapper { transition-timing-function:linear; }
#proofSlideBtm .swiper-slide { width:280px; }


/* banner4 */
.banner4 {background: #5700a7;}


/* course1 */
.course1 { height:1187px; background:#bbe4f5 url(img/course1_bg.png) 0 0 no-repeat; }
.course1 .mask { padding:60px 0 100px; }
.course1 .tit { margin-bottom:60px; }
.course1 #course1_slide { overflow:visible; }
.course1 #course1_slide .swiper-pagination { position:absolute; top:0; left:0; right:0; display:flex; bottom:auto; }
.course1 #course1_slide .swiper-pagination .swiper-pagination-bullet { width:100%; height:101px; border-radius:0; margin:0; opacity:0; }
.course1 .course1_left { position:absolute; left:21px; top:372px; width:335px; border-radius:5px; height:200px; }
.course1 .course1_mid { position:absolute; left:433px; top:372px; width:335px; border-radius:5px; height:200px; }
.course1 .course1_right { position:absolute; right:6px; top:372px; width:335px; border-radius:5px; height:200px; }
.course1 .book_rolling { position:absolute; left:17px; top:352px; width:360px; height:229px; overflow:hidden; }
.course1 .book_rolling ul { position:relative; display:flex; gap:15px; height:481px; justify-content:center; }
.course1 .book_rolling ul li:nth-of-type(1) .original { animation:120s linear 0s infinite normal forwards running rollingUp1; }
.course1 .book_rolling ul li:nth-of-type(1) .clone { animation:120s linear 0s infinite normal none running rollingUp2; }
.course1 .book_rolling ul li:nth-of-type(2) .original { animation:120s linear 0s infinite normal forwards running rollingDown1; }
.course1 .book_rolling ul li:nth-of-type(2) .clone { animation:120s linear 0s infinite normal none running rollingDown2; }
.course1 .book_rolling ul li:nth-of-type(3) .original { animation:60s linear 0s infinite normal forwards running rollingUp1; }
.course1 .book_rolling ul li:nth-of-type(3) .clone { animation:60s linear 0s infinite normal none running rollingUp2; }
.course1_vdo1 { position:absolute; top:380px; left:222px; width:335px; border-radius:4px; }
.course1 #course1_2_1_slide img { width:100%; height:100%; }
.course1 #course1_2_2_slide img { width:100%; height:100%; }


/* course2 */
.course2 { background:#EAFFDA; }
.course2 .mask { padding:60px 0 100px; }
.course2 .tit { margin-bottom:60px; }
.course2 #course2_slide { overflow:visible; }
.course2 #course2_slide .swiper-pagination { position:absolute; top:0; left:0; right:0; display:flex; bottom:auto; }
.course2 #course2_slide .swiper-pagination .swiper-pagination-bullet { width:100%; height:101px; border-radius:0; margin:0; opacity:0; }


/* course3 */
.course3 { background:#fff; }
.course3 .mask { padding:60px 0 100px; }
.course3 .tit { margin-bottom:60px; }
.course3 #course3_slide { overflow:visible; }
.course3 #course3_slide .swiper-pagination { position:absolute; top:0; left:0; right:0; display:flex; bottom:auto; }
.course3 #course3_slide .swiper-pagination .swiper-pagination-bullet { width:100%; height:101px; border-radius:0; margin:0; opacity:0; }
.course3 .coupon1 { position:absolute; top:496px; left:47px; width:220px; height:51px; font-size:0; }
.course3 .coupon2 { position:absolute; top:496px; left:654px; width:220px; height:51px; font-size:0; }


/* course4 */
.course4 { height:1133px; background:#FFEFF3 url(img/course4_bg.png) center center; }
.course4 .mask { padding:60px 0 100px; }
.course4 .tit { margin-bottom:60px; }
.course4 #course4_slide { overflow:visible; }
.course4 #course4_slide .swiper-pagination { position:absolute; top:0; left:0; right:0; display:flex; bottom:auto; }
.course4 #course4_slide .swiper-pagination .swiper-pagination-bullet { width:100%; height:101px; border-radius:0; margin:0; opacity:0; }


/* curriculum */
.curriculum { background:linear-gradient(180deg, #760808, #270000); }
.curriculum .mask { padding:100px 0; }
.curriculum .mask h2 { margin-bottom:90px; }
.curriculum .mask .swiper-pagination { display:flex; gap:12px; position:static; margin-bottom:30px; }
.curriculum .mask .swiper-pagination span { flex:1; position:relative; height:90px; margin:0 !important; background:#272B30; border-radius:30px; font-family:"Pretendard"; font-weight:900; font-size:34px; color:#868B93; opacity:1; }
.curriculum .mask .swiper-pagination span.swiper-pagination-bullet-active { background:linear-gradient(90deg, rgba(236,0,86,1) 0%, rgba(255,49,21,1) 100%); color:#fff; }
.curriculum .mask .swiper-pagination span.swiper-pagination-bullet-active:after { content:""; display:block; position:absolute; bottom:-17px; left:50%; transform:translateX(-50%); width:34px; height:27px; background:url(img/curriculum_tab_arr.png) 0 0 no-repeat; }
.curriculum .mask .swiper-pagination span:before { content:""; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; }
.curriculum .mask .swiper-pagination span:nth-child(1):before { content:"±¹¾î"; }
.curriculum .mask .swiper-pagination span:nth-child(2):before { content:"¿µ¾î"; }
.curriculum .mask .swiper-pagination span:nth-child(3):before { content:"¼öÇÐ"; }
.curriculum .mask .swiper-pagination span:nth-child(4):before { content:"»çÈ¸/¿ª»ç"; }
.curriculum .mask .swiper-pagination span:nth-child(5):before { content:"°úÇÐ"; }
.curriculum .mask .swiper-container .swiper-slide img:not(:first-child) { margin-top:20px; }


/* system */
.system { padding:100px 0; background:#2a3051; }
.system #cont1_1_slide { margin-top:60px; }
.system #cont1_1_slide > .swiper-pagination { position:static; margin-bottom:50px; }
.system #cont1_1_slide > .swiper-pagination .swiper-pagination-bullet { width:318px; height:201px; border-radius:0; position:relative; margin:0; opacity:1; }
.system #cont1_1_slide > .swiper-pagination .swiper-pagination-bullet:nth-of-type(1) { background:url(img/system_tab_off.png) no-repeat 0 0; }
.system #cont1_1_slide > .swiper-pagination .swiper-pagination-bullet:nth-of-type(2) { background:url(img/system_tab_off.png) no-repeat -395px 0; }
.system #cont1_1_slide > .swiper-pagination .swiper-pagination-bullet:nth-of-type(3) { background:url(img/system_tab_off.png) no-repeat -790px 0; }
.system #cont1_1_slide > .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(1) { background:url(img/system_tab_on.png) no-repeat 0 0; }
.system #cont1_1_slide > .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(2) { background:url(img/system_tab_on.png) no-repeat -395px 0; }
.system #cont1_1_slide > .swiper-pagination .swiper-pagination-bullet-active:nth-of-type(3) { background:url(img/system_tab_on.png) no-repeat -790px 0; }
.system #cont1_1_slide > .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet { margin-left:81px; }
.system #cont1_1_slide > .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet::before { content:''; width:24px; height:100%; background:url(img/system_tab_off.png) no-repeat -743px 0; display:block; position:absolute; left:-50px; top:0; }
.system #cont1_1_slide .tabs { margin-bottom:60px; display:flex; padding-left:46px; gap:27px; align-items:flex-start; }
.system #cont1_1_slide .tabs .tab1_btn,
.system #cont1_1_slide .tabs .tab2_btn,
.system #cont1_1_slide .tabs .tab3_btn { position:relative; }
.system #cont1_1_slide .tabs .tab2_arrow,
.system #cont1_1_slide .tabs .tab3_arrow { position:relative; margin-top:96px; opacity:0; transition:.5s; }
.system #cont1_1_slide .tabs2 .tab2_btn,
.system #cont1_1_slide .tabs3 .tab3_btn { opacity:0; left:-20px; transition:.5s .5s; }
.system #cont1_1_slide .swiper-slide-active .tabs .tab2_btn,
.system #cont1_1_slide .swiper-slide-active .tabs .tab3_btn { opacity:1; left:0; }
.system #cont1_1_slide .swiper-slide-active .tabs .tab2_arrow,
.system #cont1_1_slide .swiper-slide-active .tabs .tab3_arrow { opacity:1; }
.system #cont1_1_slide .con { position:relative; opacity:0; }
.system #cont1_1_slide .swiper-slide-active .con { opacity:1; }
.system #cont1_1_slide .con .swiper-container { position:absolute; top:89px; width:400px; padding-bottom:27px; }
.system #cont1_1_slide .con .swiper-container .swiper-pagination-bullet { width:11px; height:11px; background:#ddd; opacity:1; margin:0 5px; }
.system #cont1_1_slide .con .swiper-container .swiper-pagination-bullet-active { background:#666; }
.system #cont1_1_tab2 { left:42px; }
.system #cont1_1_tab3 { right:42px; }


/* banner3 */
.banner3 {position:relative;background: #24003b;}
.banner3 .con { display:flex; align-items:center; justify-content:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1200px; height:100%; }


/* ¾Ö´Ï¸ÞÀÌ¼Ç Å°ÇÁ·¹ÀÓ */
@keyframes blinker {
    50% { opacity: 0; }
}

@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 rollingDown1 {
    0% { transform: translateY(0); }
    50% { transform: translateY(100%); }
    50.01% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

@keyframes rollingDown2 {
    0% { transform: translateY(-200%); }
    100% { transform: translateY(0); }
}

@keyframes rollingUp1 {
    0% { transform: translateY(0); }
    50% { transform: translateY(-100%); }
    50.01% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

@keyframes rollingUp2 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200%); }
}


/* mediaquery */
@media(max-width: 1600px) {
    .anchor { zoom:0.85; }
    .visual { zoom:0.9; }
    .proof { zoom:0.9; }
    .system { zoom:0.9; }
}
