@charset "euc-kr";

@import url('https://webfontworld.github.io/pretendard/Pretendard.css');
@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;}

/*reset*/
img {
    border:0;
}
button,html [type=button],[type=reset],[type=submit] {
    -webkit-appearance:none;
}
button,select {
    text-transform:none;
}
button,input {
    overflow:hidden;
}
button:focus {
    outline:none;
}
a,div {
    -webkit-tap-highlight-color:transparent;
}
.web {
    min-width: 1300px;
}

/*font*/
@font-face {
    font-family: "GmarketSans";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff")
        format("woff");
    font-weight: 200;
    font-style: normal;
}

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


/* common */
.pc_inner {max-width: 1200px;margin: 0 auto;display: flex; flex-direction: column;align-items: center;}
.pc_inner2 { max-width: 1920px; margin: 0 auto; z-index:1; position: relative; }
.sec_tit {color: #2c2c2c;font-family: "GmarketSans", sans-serif;text-align: center;letter-spacing: -2.5px; line-height:1;}
.sec_tit > strong { margin-top: 10px;  display: block; font-weight: bold; font-size: 64px;}
.sec_tit p {background: #f9f962; display: inline-block;}
.sec_tit p, .sec_tit p > strong { height: 60px; padding: 0 5px; font-weight: normal;font-size: 48px; color:inherit;font-family:inherit; }
.sec_tit p > strong {font-weight: bold;}
.sec_tit p:last-of-type {margin-top: 5px; }
.txt_red { color:#f20000 !important; }
.txt_green { color:#4fff81; }
.txt_sky { color:#16d6fa; }
.txt_pink { color:#fc7ba8; }
.txt_yellow { color:#fffd43; }
.txt_blue { color:#004eff; }
.txt_white { color:#fff; }
#only1_wrapper .thumb{position:relative; left:50%; transform:translateX(-50%);}
#only1_wrapper .mask{position:relative; width:1200px; margin:0 auto;}
.web > div > img{position:relative; left:50%; transform:translateX(-50%);}

/* anchor */
#only1_wrapper .anchor { position: fixed !important; left: 0; top:200px; width:161px; text-align:center; z-index: 15; zoom:0.87;}
#only1_wrapper .anchor .top{margin-bottom:18px;}
#only1_wrapper .anchor .kid{margin-bottom:18px;}
#only1_wrapper .anchor div{background-color:#fff; border:2px solid #000; border-left:none;}
#only1_wrapper .anchor div p{display:flex; justify-content:center; align-items:center; flex-direction:column; height:60px; font-size:14px; border-bottom:2px solid #000; color:#fff;}
#only1_wrapper .anchor div p span{display:block;margin-top: 1px;font-weight:700;font-size:18px;color:#fff375;line-height: 1.3;}
#only1_wrapper .anchor .top a p{display:flex;justify-content:center;align-items:center;flex-direction:column;height: 100%;font-size:14px; border-bottom:0; color:#fff;}
#only1_wrapper .anchor .top a span{display:block;margin-top: 1px;font-weight:700;font-size:18px;color:#fff375;line-height: 1.3;}
#only1_wrapper .anchor .top a{display:block; background-color:#34bbff; height:80px; }
#only1_wrapper .anchor div.kid p{background-color:#34bbff;}
#only1_wrapper .anchor div.ele p{background-color:#ab5eef;}
#only1_wrapper .anchor div ul li:not(:last-child){border-bottom:1px dashed #ccc;}
#only1_wrapper .anchor div ul li a{display:block; height:32px; font-weight:500; font-size:13px; color:#000; line-height:32px; transition:all .5s;}
#only1_wrapper .anchor div ul li a.active{color:#fff;}
#only1_wrapper .anchor div.kid ul li a.active{background-color:#34bbff;}
#only1_wrapper .anchor div.ele ul li a.active{background-color:#ab5eef;}

/* fade in */
.fade {	position:relative; transform:translate(0, 70px); opacity:0; transition-property:opacity, transform; transition-duration:1.2s; }
.fade.show { transform:translate(0, 0); opacity:1; }
.fade-1 { transition-delay:0s; } 
.fade-2 { transition-delay:.2s; } 
.fade-3 { transition-delay:.4s; } 
.fade-4 { transition-delay:.6s; } 
.fade-5 { transition-delay:.8s; } 

/* visual */
.visual{position:relative; background:#144CCE;}
.visual:before{content:""; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2560px; height:800px; background:url(images/visual_bg.png) center 0 no-repeat; z-index:10;}
.visual .rolling{display:flex; justify-content:center;}
.visual .rolling .original{animation:80s linear 0s infinite normal forwards running rollingLeft1;}
.visual .rolling .clone{animation:80s linear 0s infinite normal forwards running rollingLeft2;}
.visual .con{position:absolute; top:80px; text-align: center; z-index:20;}
.visual .con .tit{margin-bottom:52px;}
.visual .con .tablet{position:relative; margin-top:17px;}
.visual .con .tablet .front{position:relative; margin-left:45px; z-index:10;}
.visual .con .tablet .back{position:absolute; bottom:0; left:50%; margin-left:-612px;}

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

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

.dogbone{background:#C7ECFF url(images/dogbone_bg.png) center top no-repeat;}
.dogbone .pc_inner{padding:100px 0 127px;}
.dogbone .pc_inner .rolling_wrap div{margin-top:60px;}
.dogbone .pc_inner .rolling_wrap div .list {display:flex; gap:30px; position: relative; width:5850px; animation-duration:20s;animation-fill-mode: both;animation-iteration-count: infinite;animation-timing-function: linear;}
.dogbone .pc_inner .rolling_wrap div .list li{overflow:hidden; position:relative; width:460px; height:278px; border:4px solid #FF30B3; border-radius:30px;}
.dogbone .pc_inner .rolling_wrap div .list li img,
.dogbone .pc_inner .rolling_wrap div .list li video{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%;}
.dogbone .pc_inner .rolling_wrap div .list li video{width:108%;}
.dogbone .pc_inner .rolling_wrap .rolling1 .list {animation-name: dogbone_rolling1;}
.dogbone .pc_inner .rolling_wrap .rolling2 .list {animation-name: dogbone_rolling2;}

@keyframes dogbone_rolling1 {
    0% { 
        left:0;
    }
    100% {
        left: -2369px;
    }
}
@keyframes dogbone_rolling2 {
    0% { 
        left: -2073px;
    }
    100% {
        left: 0;
    }
}

/* keyword */
.keyword{background-color:#6421FF;background-image:url(images/keyword_bg.png);background-attachment:fixed;background-size:cover;background-position:center;}
.keyword .pc_inner{padding:100px 0;}
.keyword .pc_inner .con{position:relative;margin-top:30px;}
.keyword .pc_inner .con .fix{position:relative;z-index:10;}
.keyword .pc_inner .con .emphasis1{position:absolute;top:0;right:-76px;}
.keyword .pc_inner .con .emphasis2{position:absolute;top:288px;left:-162px;}

/* lecture */
.lecture{background:#FFD5EC;}
.lecture .pc_inner{padding:100px 0 107px;}
.lecture .pc_inner .video_wrap{display:flex;flex-direction:column;gap:60px;align-items:center; margin-top:55px;}
.lecture .pc_inner .video_wrap .swiper-container{width:2127px;overflow:hidden;}
.lecture .pc_inner .video_wrap .swiper-wrapper{align-items:start;}
.lecture .pc_inner .video_wrap .swiper-slide{width:747px;}
.lecture .pc_inner .video_wrap .swiper-slide .card{transform:scale(.8835);transition:transform .5s ease,opacity .5s ease;transform-origin:center center;opacity:.85;}
.lecture .pc_inner .video_wrap .swiper-slide-prev .card{transform-origin:right center;}
.lecture .pc_inner .video_wrap .swiper-slide-next .card{transform-origin:left center;}
.lecture .pc_inner .video_wrap .swiper-slide-active .card{transform:scale(1);opacity:1;}
.lecture .pc_inner .video_wrap .video{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;}
.lecture .pc_inner .video_wrap .video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.lecture .pc_inner .video_wrap .swiper-slide p{margin-top:15px; font-size:32px;text-align:center;word-break:keep-all; color:#444;}
.lecture .pc_inner .video_wrap .swiper-slide-active p{font-weight:700; color:#000;}

/* way */
.way{background:#DEF4FF;overflow:hidden;}
.way .pc_inner{max-width:100%;padding:100px 0 70px;}
.way .pc_inner .slider{position:relative;width:100%;padding:104px 0;margin-top:25px;overflow:visible;}
.way .pc_inner .slider .swiper-wrapper{align-items:center;}
.way .pc_inner .slider .swiper-slide{width:560px;transition:transform .5s ease;will-change:transform;}
.way .pc_inner .slider .swiper-slide .card{position:relative;border-radius:10px; box-shadow:0 0 35px rgba(143,218,255,1);transition:transform .5s ease,opacity .5s ease;transform-origin:center center;will-change:transform;opacity:1;}
.way .pc_inner .slider .swiper-slide img{width:100%;display:block;border-radius:10px;}
.way .pc_inner .slider .swiper-slide.is-left{transform:translateX(-60px);}
.way .pc_inner .slider .swiper-slide.is-right{transform:translateX(60px);}
.way .pc_inner .slider .swiper-slide.is-active{z-index:3;}
.way .pc_inner .slider .swiper-slide.is-active .card{transform:scale(1.2142857);}

/* repurchase */
.repurchase{position:relative;background: #fff8d5;padding: 97px 0 104px;}
.repurchase .pc_inner { position: relative;}
.repurchase .tit{display: block;margin: 0 auto 64px;}
.repurchase .repurchase_slide { width:100%; }
.repurchase .repurchase_slide .swiper-slide {text-align:center;}
.repurchase .repurchase_slide .swiper-button-prev { background: url(images/memory_arrow.png) no-repeat; width: 80px; height: 80px; left: 0; transform: scaleX(-1);}
.repurchase .repurchase_slide .swiper-button-next { background: url(images/memory_arrow.png) no-repeat; width: 80px; height: 80px; right: 0; }
.repurchase .repurchase_slide .swiper-button-prev:after {display: none; }
.repurchase .repurchase_slide .swiper-button-next:after {display: none; }

/* up */
.up{position:relative;background: #e9f3ff;}
.up .pc_inner { position: relative;}
.up .con_box{position: absolute;top: 0;left: 0;right: 0;padding: 97px 0 0;bottom: 0;}
.up .con_box .tit{display: block;margin: 0 auto;}
.up .con_box ul { display: flex; justify-content: center; gap: 40px; margin-top: 61px;}
.up .con_box ul li { border-radius: 30px; overflow: hidden;}
.up .con_box ul li video { width: 580px;}
.up .con_box .txt{margin: 60px auto 0; display: block;}

/* event */
.event{position:relative;background: #f3dfff;padding: 97px 0 104px;}
.event .pc_inner {position: relative;}
.event .con{margin-top: 74px;z-index: 1;}
.event .btn{margin: 60px auto 0;background: url(images/event_btn.png) no-repeat 0 0 / contain;width: 802px;height: 101px;display: block;position: relative;}
.event .btn::after {position: absolute;content: '';background: url(images/hand_ico.png) no-repeat 0 0 / contain;width: 141px;height: 135px;bottom: -77px;right: -62px;animation: blink-effect 0.5s ease-in-out infinite alternate;}
.event .obj1 { position: absolute; top: 230px; left: 50%; transform: translate(-829px, 0);}
.event .obj2 { position: absolute; top: -17px; left: 50%; transform: translate(468px, 0);}
.event .obj3 { position: absolute; top: 717px; left: 50%; transform: translate(606px, 0);}

/* effect */
.effect{position:relative;background: #ffecfa;padding: 97px 0 104px;}
.effect .pc_inner { position: relative;}
.effect .tit{display: block;margin: 0 auto 64px;}
.effect .effect_slide { overflow: visible; width: 1020px;}
.effect .effect_slide .swiper-slide {text-align:center;}
.effect .effect_slide .swiper-slide iframe {width: 960px; height: 540px; border-radius:30px;}
.effect .effect_slide .swiper-button-prev { background: url(images/memory_arrow.png) no-repeat; width: 80px; height: 80px; left: -87px; transform: scaleX(-1);}
.effect .effect_slide .swiper-button-next { background: url(images/memory_arrow.png) no-repeat; width: 80px; height: 80px; right: -87px;}
.effect .effect_slide .swiper-button-prev:after {display: none; }
.effect .effect_slide .swiper-button-next:after {display: none;}

/* skill */
.skill{position:relative;background: #def3f6;padding: 97px 0 104px;}
.skill .pc_inner { position: relative;}
.skill .tit{display: block;margin: 0 auto 64px;}
.skill .slide_box {width:100%;}
.skill .skill_tab_slide { margin-bottom: 57px;}
.skill .skill_tab_slide .swiper-wrapper { justify-content: center; }
.skill .skill_tab_slide .swiper-slide { position: relative; cursor: pointer; text-align: center; font-size: 36px; color: #DCE4EA; background: #9AB0B4; width: 310px !important; height: 120px; border-radius: 20px; margin: 0 10px; font-family: "GmarketSansBold"; line-height: 1.2; padding-top: 22px;}
.skill .skill_tab_slide .swiper-slide-thumb-active { color: #fff; background: #0075D6; }
.skill .skill_con_slide { text-align: center;}
.skill .skill_con_slide .swiper-slide .badge1 { position: absolute; top: 51px; right: 121px; z-index: 2;}
.skill .skill_con_slide .swiper-slide .badge2 {position: absolute;top: 78px;right: 111px;z-index: 2;}
.skill .skill_con_slide .swiper-slide .badge3 {position: absolute;top: 78px;right: 111px;z-index: 2;}
.skill .skill_con_slide .swiper-button-prev {background: url(images/memory_arrow.png) no-repeat;width: 80px;height: 80px;left: 0;transform: scaleX(-1);top: 288px;margin: 0;}
.skill .skill_con_slide .swiper-button-next {background: url(images/memory_arrow.png) no-repeat;width: 80px;height: 80px;right: 0;top: 288px;margin: 0;}
.skill .skill_con_slide .swiper-button-prev:after {display: none; }
.skill .skill_con_slide .swiper-button-next:after {display: none; }
.skill .skill_in_slide1 {position: absolute;margin: 0;top: 45px;left: 160px;x; 0;right: 0;z-index: 1;width:880px;height:532px;border-radius: 10px;overflow: hidden;}
.skill .skill_in_slide2 {position: absolute;margin: 0;top: 45px;left: 160px;x; 0;right: 0;z-index: 1;width:880px;height:532px;border-radius: 10px;overflow: hidden;}
.skill .skill_in_slide3 {position: absolute;margin: 0;top: 45px;left: 160px;x; 0;right: 0;z-index: 1;width:880px;height:532px;border-radius: 10px;overflow: hidden;}
.skill .skill_in_slide1 img {width:100%; height:100%; object-fit:cover;}
.skill .skill_in_slide2 img {width:100%; height:100%; object-fit:cover;}
.skill .skill_in_slide3 img {width:100%; height:100%; object-fit:cover;}

/* system_step */
.system_step{position: relative;background:#ffdce6;padding: 94px 0 100px;}
.system_step .top { text-align: center;background: #ffdce6; z-index: 1;}
.system_step .top.fix {position: fixed;top: 0;left: 0;right: 0;}
.system_step .top .tit {}
.system_step .top .tab {margin-top: 23px;width: 1237px;height: 120px;margin: 54px auto 0;}
.system_step .top .tab.tab_step1 { background: url(images/system_step_tab1.png) no-repeat 0 0 / 100%; }
.system_step .top .tab.tab_step2 { background: url(images/system_step_tab2.png) no-repeat 0 0 / 100%; }
.system_step .top .tab.tab_step3 { background: url(images/system_step_tab3.png) no-repeat 0 0 / 100%; }
.system_step ul {text-align: center;display: flex;flex-direction: column; padding-top: 29px;}
.system_step ul li { padding: 70px 0 30px;}
.system_step_swiper { margin-top: 54px; width: 100%; overflow: visible;}
.system_step_swiper .swiper-slide {}
.system_step_swiper .swiper-pagination { position: absolute; top: 0; left: 0; right: 0; bottom: auto; display: flex; opacity: 0;}
.system_step_swiper .swiper-pagination .swiper-pagination-bullet { width: 100%; height: 122px; border-radius: 0;}

/* statistics */
.statistics{position:relative;background: #8e1e1d; }
.statistics .pc_inner { position: relative;}
.statistics .con_box{position: absolute;top: 0;left: 0;right: 0;padding: 97px 0 0;bottom: 0;}
.statistics .con_box .tit{display: block;margin: 0 auto;}
.statistics .con_box .con{margin-top: 69px; }

/* knowHow */
.knowHow{position:relative; background:#080613;}
.knowHow .inner{display: flex; flex-direction: column;align-items: center;}
.knowHow .book_rolling {position: absolute;top: 232px;left: 50%;transform: translate(94px, 0); height: 449px;overflow: hidden;display: flex;gap: 22px;}
.knowHow .book_rolling ul {position: relative; font-size:0;-webkit-backface-visibility: hidden;animation-duration: 10s;animation-fill-mode: both;animation-iteration-count: infinite;animation-timing-function: linear;display: flex;flex-direction: column;gap: 25px;}
.knowHow .book_rolling .book_list1 {animation-name: knowHow_rolling1;}
.knowHow .book_rolling .book_list2 {animation-name: knowHow_rolling2;top: -1077px;animation-duration: 11s;}
.knowHow .book_rolling .book_list3 {animation-name: knowHow_rolling3;}
@keyframes knowHow_rolling1 {
	0% { 
		top:0;
    }
    100% {
		top: -919px;
	}
}
@keyframes knowHow_rolling2 {
	0% {
		top: -1102px;
		}
    100% {
		top: 0;
	}
}
@keyframes knowHow_rolling3 {
	0% { 
		top:0;
    }
    100% {
		top: -919px;
	}
}

/* experience_banner */
.experience_banner {position: relative; background: #132871;}
.experience_banner .inner{display: flex; flex-direction: column;align-items: center;}

/* ¹«·áüÇè ½Åû °úÁ¤ */
.process_wrap {background:#f0f0f5;padding-top: 105px;}
.process_wrap strong { font-weight:400; text-align:center; color:#2c2c2c; display:block; font-size:48px; }
.process_wrap strong span {	font-weight:700; }
.process_li { margin-top:33px; display:flex; justify-content:center; }
.process_li li { text-align:center; position:relative; }
.process_li li+li {margin-left: 156px;}
.process_li li+li::before { content:''; position:absolute; left:-79px; top:50%; transform:translate(0,-50%); background:url(images/process/process_arrow.png) no-repeat; width:22px; height:30px; display:block; }
.process_li li div { height:100px; }
.process_li li p { margin-top:12px; color:#2c2c2c; font-family:'Noto Sans KR', sans-serif; font-size:24px; }
.process_wrap .btn_wrap { padding-bottom: 85px; width: 1140px; margin: 0 auto; border-bottom: 1px solid #ababad; }
.process_btn { display:block; font-size:0; width:660px; margin:50px auto 0; position:relative; }
.process_btn::after { position: absolute;content: '';background: url(images/sec_event_hand.png) no-repeat 0 0 / contain;width: 141px;height: 135px;bottom: -56px;right: -65px;animation: blink-effect 0.5s ease-in-out infinite alternate;}
.notice_box { width:1140px;	margin:0 auto 75px; padding-top:41px; }
.notice_box>strong { background:url(images/process/notice_tit.png) no-repeat; width:258px; height:35px; display:block; font-size:0;	background-size: contain; }
.notice_li { margin:15px 0 0 50px; }
.notice_li li { font-size:20px; color:#888; display:flex;}
.notice_li li + li { margin-top:4px; }
.notice_li li.noti_tit { font-weight:700; margin-bottom:20px; color:#5f5f5f; }
.notice_li li span { flex-shrink:0; margin-right: 3px; }
.process_wrap .top_btn { width:128px; height:48px; display:block; background:#b1b1b1 url(images/process/top_btn.png) no-repeat center center; margin:0 auto; font-size: 0; }

#only1_bnb_sky_banner_ele.promotion.opms{background:url(images/banner_btm_opms.png) no-repeat center bottom !important; height:156px !important; margin:-86px 0 0;}

@media screen and (max-width:1800px){
    #only1_wrapper .anchor {top:190px; width:151px; zoom:0.87 !important;}
    #only1_wrapper .anchor .kid{margin-bottom: 0px;}
    #only1_wrapper .anchor div p{height: 45px;font-size: 12px;}
    #only1_wrapper .anchor div p span{font-size: 15px;}
    #only1_wrapper .anchor div ul li a{height: 24px; font-size: 11px;line-height: 23px;}

	#only1_wrapper .anchor .top { margin-bottom: 7px;}
	#only1_wrapper .anchor .top a { height: 68px; }
    #only1_wrapper .anchor .top a p { font-size: 12px; }
    #only1_wrapper .anchor .top a span { font-size: 15px; }
}

/* keyframes */
@keyframes blinker {
    50% {
        opacity:0;
    }
}