@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');
.spoka * { font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; }
@font-face { font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'OTEnjoystoriesBA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff') format('woff'); font-weight: normal; font-style: normal; }

*,html,body{font-family: 'Noto Sans KR','Open Sans', sans-serif;font-weight: 400;font-size: 17px;color: #a9a9a9; }



p {line-height:25px;letter-spacing: -0.075em;}


.point {color:#0064ff; font: bold 67px 'Spoqa Han Sans'; line-height: 79px; letter-spacing: 0.05em;}
.popup-button {background:none;border:1px solid #0064ff;padding:5px 21px 9px 33px;border-radius:30px;letter-spacing: -0.075em;cursor:pointer;}


/******      Header      ******/
.header{position: fixed;top: 0;left: 0;height: 150px;width: 100%;overflow: hidden;}
.header .navbar{}
.header .navbar .logo{margin-top: 26px; margin-right: 62px; z-index: 9;}
.header .navbar .logo img{margin-left: 62px; height: 25px;}
.header .nav{float: right;}
.header .nav .wrapper {position:absolute; top:5%; transform:translateY(-50%);right:100px; margin-top: 25px;}
.header .nav .wrapper li {float:left;margin-right:12px;cursor:pointer; margin-top: 26px; margin-left: 20px;}
.header .nav .wrapper li .txt {margin-top:-1px;color:#424242; font: bold 19.22px 'Spoqa Han Sans'; line-height: auto; letter-spacing: -0.05em; border-bottom: 3px solid #fff;}
.header .nav .wrapper li .txt:hover{border-bottom: 3px solid #0064ff;}
.header .nav .wrapper .nav-item:hover > img {background-position:-18px;}



/******      Layout      ******/
.horizon{line-height: 0;z-index: 100;width: 3000px;}
.middle{z-index: 250;line-height: 0;width: 20000px;}
.front{z-index: 500;width: 7600px;height:100%;}

.front .wrapper {position:relative;}

.page{width: 1280px;background: white;padding: 0;position: absolute;top: 50%;transform:translateY(-50%);}



/******      Intro      ******/
.full-intro {position:fixed;min-width:1200px;width:100%;height:100%;}
.intro{position:relative;width:830px;height:313px;left:45%;
   top:0;
    transform:translate(-40%,-50%);}
.intro .title {width:703px;}
.intro .title > p {font-size:66px;color: rgb(0, 0, 0);letter-spacing:0.01em;padding-bottom:50px;text-align:center; font-weight: 700; line-height: 1.4; margin-bottom: 35px;}
.intro .box{margin-left: 22%;}
.intro .box .btn1 {background-color: rgba(0, 12, 30, 0.8); margin-right: 12px;  color: rgb(255, 255, 255); font-size: 17px; padding: 11px 22px 15px 46px; border-radius: 10px;}
.intro .box .btn2 {background-color: rgba(0, 12, 30, 0.8);  color: rgb(255, 255, 255); font-size: 17px; padding: 11px 22px 15px 52px; border-radius: 10px;}
.intro .box i{margin-bottom: 10px;}
.fa-apple:before {    font-size: 28px;
  color: #fff;
  position: absolute;
  left: 24%;
  top: 264px;}
.fa-google-play:before {
  font-size: 24px;
  color: #fff;
  position: absolute;
  left: 44%;
  top: 267px;}

/******      About START      ******/


.about{left: 1800px;transform:translateY(-53%); }
.about .wrap {width:1280px;height:742px; margin-left: 105px; position: relative;}
.about .wrap .txt {float: left;}
.about .wrap .txt h2 {margin-bottom:67px; color: #000000; font: bold 67px 'Spoqa Han Sans'; line-height: 79px; letter-spacing: 0.05em; width: 650px; position: relative;}
.about .wrap .txt .point span{font: 15px 'Spoqa Han Sans'; color:#0064ff; line-height: 79px; letter-spacing: 0.05em; position: absolute; left: 20%; top: 0;}

.about .wrap .txt p {margin-top: 90px; margin-bottom:29px; color: #010101; font: 24px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em;}
.about .wrap .txt .button-area .popup-button {margin-bottom:10px; background-color: #0064ff; color: #ffffff; width: 245px; height: 69px; border-radius: 54px; font: 28px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em;}
.about .wrap .txt .button-area .popup-button:hover{background-color: #0452c8;}

.about .wrap .img .device img {position:absolute;}
.about .wrap .img .device img:nth-child(1) {left:358px; bottom: -7%; width: 794px; height: 600px; z-index: 9;} 
.about .wrap .img .device img:nth-child(2) {left:829px;top:12%; width: 525px; height: 348px;}
.about .wrap .img .device img:nth-child(3) {left: 1139px; top: 30%; width: 570px; height: 445px;}
.about .wrap .img .device img:nth-child(4) {left:560px; bottom: 7.5%; width: 373px; height: 380px; z-index: 9;}
.about .wrap .img .device img:nth-child(5) {left: 871px; top: 18%; width: 480px; height: 292px; z-index: 999;}
.about .wrap .img .device img:nth-child(6) {left: 915px; bottom: 37%; width: 73px; height: 82px; z-index: 999;}
.about .wrap .img .box{position: relative;}
.about .wrap .img .box img:nth-child(1){position: absolute; width: 74px; height: 35px; left: 787px; bottom: -651px; z-index: 999;}
.about .wrap .img .box img:nth-child(2){position: absolute; width: 74px; height: 35px; left: 785px; bottom: -641px; z-index: 999;}
.about .wrap .img .box img:nth-child(3){position: absolute; width: 74px; height: 35px; left: 688px; bottom: -674px; z-index: 999;}
.about .wrap .img .box img:nth-child(4){position: absolute; width: 74px; height: 35px; left: 683px; bottom: -665px; z-index: 999;}
.about .wrap .img .box img:nth-child(5){position: absolute; width: 74px; height: 35px; left: 688px; bottom: -655px; z-index: 999;}
.about .wrap .img .box img:nth-child(6){position: absolute; width: 74px; height: 35px; left: 633px; bottom: -648px; z-index: 99;}
.about .wrap .img .box img:nth-child(7){position: absolute; width: 74px; height: 35px; left: 628px; bottom: -639px; z-index: 999;}
.about .wrap .img .box img:nth-child(8){position: absolute; width: 74px; height: 35px; left: 633px; bottom: -630px; z-index: 999;}
.about .wrap .img .box img:nth-child(9){position: absolute; width: 74px; height: 35px; left: 633px; bottom: -621px; z-index: 999;}
.about .wrap .img .box img:nth-child(10){position: absolute; width: 74px; height: 35px; left: 628px; bottom: -612px; z-index: 999}
.about .wrap .img .box img:nth-child(11){position: absolute; width: 74px; height: 35px; left: 633px; bottom: -602px; z-index: 999;}
.about .wrap .img .box img:nth-child(12){position: absolute; width: 90px; height: 79px; left: 633px; bottom: -599px; z-index: 999;}

.about .wrap .img .info{width: 148px; height: 93px; position: relative; left: 52%; top: 141px; border-radius: 20px; background-color: #ffffff; box-shadow: 0px 2px 11px 8px rgba(220, 234, 255, 0.8); z-index: 999; display: none;}
.about .wrap .img .info::after{content: '▼'; width: 29px; height: 14px; color: #ffffff; position: absolute; left: 44%; bottom: -10%;}
.about .wrap .img .info .box{position: absolute; left: 24%; top: 10%;}
.about .wrap .img .info .box h4{font: bold 23px 'Spoqa Han Sans'; color: #070707;}
.about .wrap .img .info .box dl{position: relative;}
.about .wrap .img .info .box dl span{font: bold 19px 'Spoqa Han Sans'; color: #0064ff;}
.about .wrap .img .info .box dl dd{font: 30px 'Spoqa Han Sans'; color: #b2b2b2; position: absolute; left: 31px; bottom: -35px;}
.about .wrap .img .info .box dl dt{font: bold 19px 'Spoqa Han Sans'; color: #858585; position: absolute; left: 5px; bottom: -45px;}

.about .wrap .button-area {position:relative;z-index:99;}

.box1{position: absolute; left: 35%; top: 50%; transform: translate(-50%,-50%); height: 620px; width: 504px; border: 1px solid #e6e5e5; padding: 65px 80px 55px 88px; border-radius: 30px; z-index: 999; display: none; background-color: #ffffff;}
.box1::after{content: '';}
.box1 .title{font: 22px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em; color: #000000; text-align: left;}
.box1 h3 span{font: bold 56px 'Spoqa Han Sans'; line-height: auto; color: #0064ff; padding-right: 13px;}
.box1 h3{font: bold 42px 'Spoqa Han Sans' ; line-height: auto; letter-spacing: 0.05em; color: #000000; margin-top: -23px; text-align: left; margin-bottom: 44px;}
.box1 .ul{list-style: none; display: flex;}
.box1 .ul li{border-bottom: 4px solid #fff; margin-right: 30px;}
.box1 .ul li:nth-child(1) span{ font: bold 18px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em; color: #000000;}
.box1 .ul li:nth-child(2) span{font: bold 18px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em; color: #cccccc;}
.box1 .ul li:hover{border-bottom: 4px solid #0064ff;}
.box1 .list{font: bold 18px 'Spoqa Han Sans'; color: #000000; }
.box1 ul{margin-bottom: 41px; list-style: disc; text-align: left;}
.box1 ul li{font: 18px 'Spoqa Han Sans'; color: #000000; margin-top: 10px;}
.box1 i{cursor: pointer; position: absolute; left: 88%; bottom: 90%; color: black; font-size: 30px; z-index: 999999;}


.cards{width: 705px; height: 700px; border-radius: 35px; position: absolute; left: 36%; bottom: -700px; transform: translate(-50%,-50%); z-index: 999; background-color: #ffffff; display: none;}

.cards swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 30px;
}

.cards swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

.cards swiper-slide img {
  display: block;
  height: 300px;
}

.cards .info1{position: absolute; left: 20%; top: 61%;}
.cards .info1 .sub_title{font: bold 44px 'Spoqa Han Sans'; color: #010101; margin-bottom: 17px; text-align: center;}
.cards .info1 .sub_txt{font: 21px 'Spoqa Han Sans'; color: #222222; text-align: center; margin-bottom: 38px;}
.cards .btn{width: 431px; height: 78px; border-radius: 35px; position: absolute; left: 21%; top: 86%; background-color: #fd4425; font: bold 28px/78px 'Spoqa Han Sans'; color: #ffffff; text-align: center; margin-top: -27px;}
.cards i{position: absolute; left: 92%; top: 3%; cursor: pointer; font-size: 30px; z-index: 99999; color: black;}

.ani{animation: ani 1s ease-out infinite alternate;} 
@keyframes ani {
  0%{
    bottom: 37%;
  }
  100%{
    bottom: 45%;
  }
}
/******      About END      ******/



/******      Learning START      ******/
.learning{left: 3980px;width:700px;}
.learning .wrap {text-align: center; margin-left: -161px; margin-top: -256px;}
.learning .wrap .txt{float: left;}
.learning .wrap .txt p{margin-bottom: 30px; color: #010101; font: 24px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em;  text-align: left;}
.learning .wrap .txt span{font: bold 67px 'Spoqa Han Sans'; line-height: 79px; letter-spacing: 0.05em; color: #0064ff;}
.learning .wrap .txt h2 {margin-bottom:40px; color: #000000; font: bold 67px 'Spoqa Han Sans'; line-height: 79px; letter-spacing: 0.05em; text-align: left;}
.learning .wrap .txt .popup-button{background-color: #0064ff; color: #ffffff; font: 28px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em; float: left; width: 245px; height: 69px; border-radius: 54px;}
.learning .wrap .txt .popup-button:hover{background-color: #0452c8;}

.learning .wrap .img .block{position: relative;}
.learning .wrap .img .block img:nth-child(1){position: absolute; left:357px; bottom: -710px; width: 794px; height: 600px; z-index: 999;}
.learning .wrap .img .block img:nth-child(2){position: absolute; left: 1212px; bottom: -595px; width: 570px; height: 445px; z-index: 999;}
.learning .wrap .img .block img:nth-child(3){position: absolute;left: 851px; top: -60px; width: 570px; height: 445px;}

.learning .wrap .box{}
.learning .wrap .box img:nth-child(1){position: absolute; width: 473px; height: 383px; left: 331px; bottom: -300px; z-index: 999;}
.learning .wrap .box img:nth-child(2){position: absolute;left: 701px; top: -271px; width: 541px; height: 392px; z-index: 999;}
.learning .wrap .box img:nth-child(3){position: absolute; left: 471px; top: 112px; width: 186px; height: 209px; z-index: 999;}
.learning .wrap .box img:nth-child(4){position: absolute; left: 296px; top: 87px; width: 99PX; height: 149px; z-index: 9999;}
.learning .wrap .box img:nth-child(5){    position: absolute;
    left: 533px;
    top: 100px;
    width: 155px;
    height: 160px;
    z-index: 9999;
    transform: rotateY(-201deg);}
.learning .wrap .box img:nth-child(6){position: absolute; left: 248px; top: -130px; width: 717px; height: 568px; z-index: 999;}
.ani2{animation: ani2 1s ease-out infinite alternate;}

@keyframes ani2 {
  0%{
    transform: translate(0, 30px);
  }
  100%{
    transform: translate(0, 0);
  }
}
/******      Learning END      ******/


/******      Contents START      ******/
.contents {left:6000px;}
.contents .wrap {width:1280px;height:742px; margin-left: -125px;}
.contents .wrap .txt {float:left; margin-top: 85px;}
.contents .wrap .txt h2 {margin-bottom: 68px; font: bold 67px 'Spoqa Han Sans'; line-height: 79px; letter-spacing: 0.05em; color: #000000;}
.contents .wrap .txt span{color: #0064ff; font: bold 67px 'Spoqa Han Sans'; line-height: 79px; letter-spacing: 0.05em;}
.contents .wrap .txt p {margin-bottom: 29px; font: 24px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em; color: #010101;}
.contents .wrap .txt .popup-button{margin-bottom:10px; background-color: #0064ff; color: #ffffff; width: 245px; height: 69px; border-radius: 54px; font: 28px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em;}
.contents .wrap .txt .popup-button:hover{background-color: #0452c8;} 

.contents .wrap .img {}
.contents .wrap .img .block{position: relative;}
.contents .wrap .img .block img:nth-child(1){position: absolute; left: 336px; bottom: -783px; width: 794px; height: 600px; z-index: 9;}
.contents .wrap .img .block img:nth-child(2){position: absolute; left: 810px; top: 17px; width: 567px; height: 410px;}
.contents .wrap .img .block img:nth-child(3){position: absolute; left: 1156px; bottom: -624px; width: 571px; height: 375px;}

.contents .wrap .img .box{position: relative;}
.contents .wrap .img .box img:nth-child(1){position: absolute; left: 600px; bottom: -662px; width: 265px; height: 356px; z-index: 999;}
.contents .wrap .img .box img:nth-child(2){position: absolute; left: 690px; bottom: -687px; width: 311px; height: 153px; z-index: 99;}
.contents .wrap .img .box img:nth-child(3){position: absolute; left: 446px; bottom: -699px; width: 570px; height: 511px; z-index: 999; display: none;}

.contents .wrap .img .info{display: none; position: relative; width: 178px; height: 108px;  left: 50%; top: 161px; z-index: 999; background-color:#ffffff; border-radius: 15px; box-shadow: 5px 5px 5px 10px rgb(220, 234, 252);}
.contents .wrap .img .info::after{content: '▼'; width: 29px; height: 14px; color: #ffffff; position: absolute; left: 46%; top: 105px;}
.contents .wrap .img .info .box{position: absolute; left: 19%; top: 9%;}
.contents .wrap .img .info .box h4{font: bold 23px 'Spoqa Han Sans'; color: #070707;}
.contents .wrap .img .info .box dl{position: relative;}
.contents .wrap .img .info .box dl span{font: bold 19px 'Spoqa Han Sans'; color: #0064ff;}
.contents .wrap .img .info .box dl dd{font: 40px 'Spoqa Han Sans'; color: #b2b2b2; text-align: center; margin-top: -23px;}
.contents .wrap .img .info .box dl dt{font: bold 19px 'Spoqa Han Sans'; color: #858585; text-align: center; margin-top: -23px;}


.box2{display: none; position: absolute; left: 88%; top: 50%; transform: translate(-50%,-50%); height: 620px; width: 504px; border: 1px solid #e6e5e5; padding: 65px 80px 55px 88px; border-radius: 30px; z-index: 999; z-index: 999; background-color: #ffffff;}
.box2::after{content: '';}
.box2 .title{font: 22px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em; color: #000000; text-align: left; padding: 0 5px;}
.box2 h3 span{font: bold 56px 'Spoqa Han Sans'; line-height: auto; color: #0064ff; padding-right: 13px;}
.box2 h3{font: bold 42px 'Spoqa Han Sans' ; line-height: auto; letter-spacing: 0.05em; color: #000000; margin-top: -14px; text-align: left; margin-bottom: 44px;}
.box2 .ul{list-style: none; display: flex;}
.box2 .ul li{border-bottom: 4px solid #fff;  margin-right: 30px;}
.box2 .ul li:nth-child(1) span{font: bold 18px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em; color: #000000;}
.box2 .ul li:nth-child(2) span{font: bold 18px 'Spoqa Han Sans'; line-height: auto; letter-spacing: 0.05em; color: #cccccc;}
.box2 .ul li:hover{border-bottom: 4px solid #0064ff;}
.box2 .list{font: bold 18px 'Spoqa Han Sans'; color: #000000; text-align: left;}
.box2 ul{margin-bottom: 41px; list-style: disc; text-align: left;}
.box2 ul li{font: 18px 'Spoqa Han Sans'; color: #000000; margin-top: 10px;}
.box2 .fa-xmark{width: 50px; height: 48px; cursor: pointer; position: relative; left: 102%; top: -108%; color: black; font-size: 24px;}
/******      Contents END      ******/