@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 */
.dogbone{position:relative;background: #DFC4FF; }
.dogbone .pc_inner { position: relative;}
.dogbone .con_box{position: absolute;top: 0;left: 0;right: 0;padding:100px 0 0;bottom: 0;}
.dogbone .con_box .tit{display: block;margin: 0 auto;}
.dogbone .con_box .align{display:flex; justify-content:center; align-items:center; gap:40px; margin-top:60px;}
.dogbone .con_box .book_box {position: relative;width:560px; height:460px; background: #fff;border-radius:20px;display: flex;flex-direction: column;gap:13px;justify-content: center;overflow: hidden;}
.dogbone .book_box .book_list {position: relative; animation-duration:20s;animation-fill-mode: both;animation-iteration-count: infinite;animation-timing-function: linear;}
.dogbone .book_box .book_list img{height:135px;}
.dogbone .book_box .rolling1 .book_list { width:4738px; animation-name: dogbone_rolling1;}
.dogbone .book_box .rolling2 .book_list { width:4146px; animation-name: dogbone_rolling2;}
.dogbone .book_box .rolling3 .book_list { width:4738px; animation-name: dogbone_rolling3;}
.dogbone .book_box .book_list:after {display:block; clear:both; content:'';}
.dogbone .book_box .book_list li { float:left; height: 100%; width: auto;}
.dogbone .book_box .book_list li:first-of-type {z-index:1;position: relative;}
.dogbone .book_box .book_list li img {max-width:none; width:auto !important;}
@keyframes dogbone_rolling1 {
	0% { 
		left:0;
    }
    100% {
		left: -2369px;
	}
}
@keyframes dogbone_rolling2 {
	0% { 
		left: -2073px;
    }
    100% {
		left: 0;
	}
}
@keyframes dogbone_rolling3 {
	0% { 
		left:0;
    }
    100% {
		left: -2369px;
	}
}
.dogbone .con_box .book_badge { position: absolute; bottom:20px; right:20px; z-index:1;}

/* memory */
.memory{background:#FFFCE0;}
.memory .pc_inner{padding:100px 0 68px;}
.memory .pc_inner .tit{margin-bottom:60px;}
.memory .pc_inner .sub_tit{margin-bottom:40px;}
.memory .pc_inner .list{display:flex; align-items:center; text-align:center;}
.memory .pc_inner .list+.list{margin-top:85px;}
.memory .pc_inner .list li:first-child{position:relative; margin-right:116px;}
.memory .pc_inner .list li:first-child:before{content:""; display:block; position:absolute; top:88px; right:-104px; width:88px; height:49px; background:url(images/memory_arr.png) 0 0 no-repeat;}
.memory .pc_inner .list li:last-child{margin-left:29px;}
.memory .pc_inner .list li .video{overflow:hidden; width:380px; height:230px; margin-bottom:20px; background:#000; border:4px solid #FF30B3; border-radius:30px;}
.memory .pc_inner .list li .video iframe{width:100%; height:100%;}

/* lecture */
.lecture{background:#FFE2E2;}
.lecture .pc_inner{padding:80px 0 67px;}
.lecture .pc_inner .tit{margin-bottom:40px;}
.lecture .pc_inner .list{display:flex; align-items:center; text-align:center; gap:40px;}
.lecture .pc_inner .list li .video{overflow:hidden; width:580px; height:326px; margin-bottom:22px; background:#000; border:4px solid #FF30B3; border-radius:30px;}
.lecture .pc_inner .list li .video iframe{width:100%; height:100%;}

/* presentation */
.presentation{background:#DEF4FF;}
.presentation .pc_inner{position:relative; padding:80px 0 88px;}
.presentation .pc_inner .tit{margin-bottom:40px;}
.presentation .pc_inner .slider{width:1080px;}
.presentation .pc_inner .slider .swiper-wrapper li{width:350px; text-align:center;}
.presentation .pc_inner .slider .swiper-wrapper li .video{overflow:hidden; width:100%; height:212px; margin-bottom:22px; background:#000; border:4px solid #4160FF; border-radius:30px;}
.presentation .pc_inner .slider .swiper-wrapper li .video iframe{width:100%; height:100%;}
.presentation .pc_inner .swiper-button-prev{top:calc(50% - 25px); left:0; width:29px; height:49px; background:url(images/presentation_slide_arr.png) 0 0 no-repeat;}
.presentation .pc_inner .swiper-button-next{top:calc(50% - 25px); right:0; width:29px; height:49px; background:url(images/presentation_slide_arr.png) 0 0 no-repeat; transform:rotate(180deg);}
.presentation .pc_inner .swiper-button-prev:after,
.presentation .pc_inner .swiper-button-next:after{display:none;}

/* description */
.description{background:#FDFFCD;}
.description .pc_inner{position:relative; padding:80px 0 88px;}
.description .pc_inner .tit{margin-bottom:40px;}
.description .pc_inner .slider{width:1080px;}
.description .pc_inner .slider .swiper-wrapper li{width:350px; text-align:center;}
.description .pc_inner .slider .swiper-wrapper li .video{overflow:hidden; width:100%; height:212px; margin-bottom:22px; background:#000; border:4px solid #FF30B3; border-radius:30px;}
.description .pc_inner .slider .swiper-wrapper li .video iframe{width:100%; height:100%;}
.description .pc_inner .swiper-button-prev{top:50%; left:0; width:29px; height:49px; background:url(images/description_slide_arr.png) 0 0 no-repeat;}
.description .pc_inner .swiper-button-next{top:50%; right:0; width:29px; height:49px; background:url(images/description_slide_arr.png) 0 0 no-repeat; transform:rotate(180deg);}
.description .pc_inner .swiper-button-prev:after,
.description .pc_inner .swiper-button-next:after{display:none;}

/* note */
.note{position:relative;background: #e5f7f6;padding: 97px 0 104px;}
.note .pc_inner { position: relative;}
.note .tit{display: block;margin: 0 auto 64px;}
.note article{text-align: center;}
.note article + article {margin-top:83px;}
.note article strong{font-size: 42px;color: #fff;width: 240px;height: 80px;display: inline-block;line-height: 80px; border-radius: 20px;margin-bottom: 40px;}
.note article strong.color1 {background: #ff30b3;}
.note article strong.color2 {background: #4160ff;}
.note article strong.color3 {background: #00aca5;} 
.note article ul{display: flex;gap: 30px;}


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