@charset "utf-8";

/*채진우 폰트 제정립*/
/*body,html{height: 100%;}*/
body{font-family: "NotoSansCJKkr", sans-serif;font-size:14.5px;line-height:1.5;
font-weight: 500;color:#222222}
img{width: 100%;}
body,html{height: 100%;}
.container_wrap{}

#wrap{overflow: hidden;}
.full{position: absolute;width:100%;height: 100%;left:0;top:0;}

.inners{max-width:1080px;margin:0 auto;position: relative;overflow: hidden;}
.co_wrap{width:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00aeef+0,0077e0+100 */
background: #00aeef; /* Old browsers */
background: -moz-linear-gradient(top, #00aeef 0%, #0077e0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00aeef 0%,#0077e0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #00aeef 0%,#0077e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aeef', endColorstr='#0077e0',GradientType=0 ); /* IE6-9 */
}

#wrap{width:100%;}
.top_visual{width:100%;position: relative;
    
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00aeef+0,0077e0+100 */
background: #00aeef; /* Old browsers */
background: -moz-linear-gradient(top, #00aeef 0%, #0077e0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00aeef 0%,#0077e0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #00aeef 0%,#0077e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aeef', endColorstr='#0077e0',GradientType=0 ); /* IE6-9 */

-webkit-background-size: cover;overflow: hidden;height: 550px;
background-size: cover;
}
.hop{display: block;}
.logo{top:2.7%;right:2.7%;width:7%;position: absolute;}
.title_text{position: absolute;top:24.137931034482758%;right:7.57%;
width:47.2222%;z-index:10000;}
.bot_text{
    position: absolute;bottom:5.431034482758%;right:4.25%;
     width:23.888%;z-index:10000
}

.person{position: absolute;bottom:0;right:34.9%;margin-bottom:-9.9%;
width:59.62962962962963%;z-index:10000}

canvas {
 position: absolute;top:0;left:0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.event_link{width:22%;display: block;}

/*두번째 단락*/
.co_wrap2{background: #f7f6ef;width:100%;}
.co_wrap2 .inners{overflow: visible;}
.person02{width:40.5555%;right:1.5%;bottom:0;position: absolute;}

.person02 .star_area{
   animation:twinkle 1s infinite; 
}
.person02 .star03{position: absolute;
top:40%;right:23.9%;width:10%;}
.person02 .star02{position: absolute;
top:36%;right:33.9%;width:7%;}
.person02 .cross{position: absolute;
top:36%;left:27%;width:4%;}

.middle_02{height:615px }
.vedio{position: absolute;top:27.47%;left:4%;width:59.259%;
height: 56.9%;}
.vedio iframe{width:100%;height: 100%;border:4px solid #f7f6ef;border-radius: 8px;}
.story01{top:16%;left: 4.8%;position: absolute;width:43.79%}


.twinkle{
    animation:twinkle 1s infinite;
}
.story01 .star_area{position: absolute;top:-18px;left:17%;width:6%;
}
.story01 .star_area2{position: absolute;top:-5px;left:13%;width:3%;
}




.bot_wrap_slide{padding:0 70px;max-width:759px;margin:0 auto;}
.bot_wrap_slide .slick-slide{height:100%}
.bot_wrap_slide_math{width:100%;margin:0 auto;}

.relate_book {width: 220px;margin: 0 auto;display:block;}

.bot_wrap_slide .slick-slide{padding:0 10px}
.bot_slide{box-sizing: border-box;width:758px;    margin: 0 auto;}
.bot_slide .slick-prev, .bot_slide .slick-next{display: block;width:38px;height: 39px;}
.bot_slide .slick-prev{background: url(https://pic.neungyule.com/nebooks/img/mathlanding/arrow_left.png)no-repeat center center;left:-50px;}
.bot_slide .slick-next{background: url(https://pic.neungyule.com/nebooks/img/mathlanding/arrow_right.png)no-repeat center center;right:-50px;}

@keyframes twinkle {
   0%   { opacity: 1; }
  30%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 1; }
}

.title_text{
      -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    
  -webkit-animation-name: bounceIn_c; 
    animation-name: bounceIn_c; 
    -webkit-animation-delay:2.0s;
    -moz-animation-delay:2.0s;
    -o-animation-delay:2.0s;
    animation-delay:2.0s;

}
.shop_btn{position: absolute;bottom:21%;right:23%;
width:20%;}
@keyframes bounceIn_c { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    } 

    70% { 
        transform: scale(.9); 
    } 

    100% { 
        transform: scale(1); 
    }
}

.pink_bg{background: #f37f8e;}

.pink_bg .start01{width:3%;position: absolute;top:16%;right:31%}

.pink_bg .start02{width:4%;position: absolute;top:28%;right:27%}

.pink_bg .start03{width:3%;position: absolute;top:68%;left:24%}

.pink_bg .start04{width:2%;position: absolute;top:79%;left:27.8%}

.mid02 .start01{width:3%;position: absolute;top:22%;left:8%}

.mid02 .start02{width:2%;position: absolute;top:15%;left:11%}

.mid02 .start03{width:2%;position: absolute;top:62%;left:34%}

.mid02 .start04{width:3%;position: absolute;top:68%;left:36%}

.mid03 .start01{width:2%;position: absolute;top:6%;right:8%}

.mid03 .start02{width:3%;position: absolute;top:10%;right:5%}

.mid03 .start03{width:2%;position: absolute;top:35%;right:16%}

.mid03 .start04{width:1%;position: absolute;top:39%;right:15%}

.mid03 .start05{width:4%;position: absolute;top:10%;left:12%}


.mid04 .start01{width:2%;position: absolute;top:11%;left:12%}

.mid04 .start02{width:3%;position: absolute;top:15%;left:9%}

.mid04 .start03{width:1%;position: absolute;bottom:30%;left:9%}

.mid04 .start04{width:2%;position: absolute;bottom:34%;left:7%}


.mid05 .start01{width:1.5%;position: absolute;top:14%;right:10%}

.mid05 .start02{width:3%;position: absolute;top:14%;right:6%}
.mid05 .start03{width:1.5%;position: absolute;top:70%;right:32%}

.mid05 .start04{width:3%;position: absolute;top:64%;right:34%}


.mid06 .start01{
    width:2%;position: absolute;top:22%;left:19%
}
.mid06 .start02{
    width:4%;position: absolute;top:18.5%;left:21%
}

.mid06 .start03{
    width:2%;position: absolute;top:42%;left:45%
}
.mid06 .start04{
    width:4%;position: absolute;top:36.5%;left:41%
}

.mid06 .start05{
    width:2.5%;position: absolute;top:81.5%;left:48%
}


.bot_slide_area .inners{padding-bottom:12%;}
/*.bot_image_wrap{position: absolute;bottom:0;left:0;width:100%;}*/




@media only screen and (max-width:980px) {
/* 모바일 레이아웃*/
    .top_visual{height: auto;padding-top:50.925%}
    .middle_02{height: auto;padding-top:56.944%}
    .hop{position: absolute;top:0;left:0;height: 100%;width:100%;}
    
    #mq_indicator{display: none;}
}
/*
body{font-family: "NotoSansCJKkr", sans-serif;font-size:14.5px;line-height:1.5;
font-weight: 500;color:#222222}
img{width: 100%;}

#wrap{width:100%;}
.top_visual{width:100%;position: relative;height: 550px;
background: url(https://pic.neungyule.com/nebooks/img/mathlanding/blue_bg.jpg);} 

.title_text{position: absolute;top:24.137931034482758%;right:11.57%;
width:47.2222%;}
.person{position: absolute;bottom:0;left:60px;width: auto;}

canvas {
 position: absolute;top:0;left:0;
  width: 100%;
  height: 100%;

  z-index: 1000;
}
*/