@charset "utf-8";

#contents{padding-bottom:0 !important; /* background:#fff url(/images/np_new/kids/bg_container.svg) no-repeat center top/100% auto; */}

@keyframes sun{
    100% {background-position:-248px 0;}
}

@keyframes sun_tablet{
    100% {background-position:-200px 0;}
}

@keyframes sun_mobile{
    100% {background-position:-124px 0;}
}

@keyframes cloud_01{
    0% {top:70px;}
    50% {top:50px;}
    100% {top:70px;}
}

@keyframes cloud_02{
    0% {top:54px;}
    50% {top:34px;}
    100% {top:54px;}
}

@keyframes rotate_animation{
    33% {transform:rotate(15deg);}
    66% {transform:rotate(-15deg);}
    100% {transform:rotate(0deg);}
}

@keyframes first_type_study{
    100% {background-position:-540px 0;}
}

@keyframes second_type_study{
    100% {background-position:-810px 0;}
}

@keyframes boy_eye{
    100% {background-position:-308px 0;}
}

@keyframes first_type_study_tablet{
    100% {background-position:-400px 0;}
}

@keyframes second_type_study_tablet{
    100% {background-position:-600px 0;}
}

@keyframes boy_eye_tablet{
    100% {background-position:-260px 0;}
}

@keyframes first_type_study_mobile{
    100% {background-position:-240px 0;}
}

@keyframes second_type_study_mobile{
    100% {background-position:-360px 0;}
}

@keyframes boy_eye_mobile{
    100% {background-position:-158px 0;}
}

@keyframes balloon{
    0% {top:-279px;}
    50% {top:-269px;}
    100% {top:-279px;}
}

div#contents.main{padding-bottom:0;}
div.visual{position:relative;}
div.visual div.top{position:relative; background:url(/images/np_new/kids/bg_main_top.svg) no-repeat center bottom/cover;}
div.visual div.top > .inner {max-width:1290px; /* height:754px; */ padding:0 35px; margin:0 auto;}
div.visual div.top > .inner > div {position:relative; /* z-index:2; */ padding-top:83px; padding-bottom:519px;}
div.visual div.top > .inner > div::before{content:''; width:438px; height:243px; position:absolute; top:70px; left:-377px; background:url(/images/np_new/kids/bg_main_cloud_01.png) no-repeat 0 0; z-index:1; animation:cloud_01 5s ease-in-out infinite;}
div.visual div.top > .inner > div::after{content:''; width:622px; height:250px; position:absolute; top:54px; right:-384px; background:url(/images/np_new/kids/bg_main_cloud_02.png) no-repeat 0 0; z-index:1; animation:cloud_02 5s ease-in-out infinite;}
div.visual div.top p {/* position:relative; z-index:2; */ text-align:center; color:transparent;}
div.visual div.top p::before {content:""; display:inline-block; vertical-align:top; width:490px; height:153px; /*background:url(/images/np_new/kids/bg_visual-text.svg) no-repeat 0 0/100% auto;*/}
div.visual div.top span.bg_city{
    content:'';
    width:1778px;
    height:247px;
    margin-left:-889px;
    position:absolute;
    bottom:-190px;
    left:50%;
    background:url(/images/np/kids/bg_main_citys.png) no-repeat 0 0;
    transition:bottom 0.5s 1s;
    -webkit-transition:bottom 0.5s 1s;
    -moz-transition:bottom 0.5s 1s;
    -o-transition:bottom 0.5s 1s;
    -ms-transition:bottom 0.5s 1s;
}
div.visual div.top.active{top:0;}
div.visual div.top.active span.bg_city{bottom:-30px;}
div.visual div.top img{display:block; width:371px; margin:0 auto 45px;}

div.visual div.bottom{position:relative; /* z-index:3; */ margin-top:-470px; border-radius:20px 20px 0 0; text-align:center;}
div.visual div.bottom::before {content:""; position:absolute; right:0; bottom:0; left:0; width:100%; height:565px; background:url(/images/np_new/kids/bg_main_bottom.svg) no-repeat center top/cover;}
div.visual div.bottom > .inner {box-sizing:border-box; max-width:1290px; padding:0 35px; margin:0 auto; border-radius:20px 20px 0 0;}
div.visual div.bottom > .inner > div {position:relative; /* z-index:3; */ padding:57px 36px 61px 36px; border-top:50px solid #05A200; border-radius:20px 20px 0 0; background-color:#fff; box-shadow:10px 10px 30px 0 rgba(0,0,0,0.2);}
div.visual div.bottom > .inner > div::before{content:''; position:absolute; z-index:1; /* bottom:-255px; */ bottom:0; left:-354px; width:809px; /* height:735px; */ height:443px; background:url(/images/np_new/kids/bg_main_bottom_people_left.png) no-repeat 0 top;}
div.visual div.bottom > .inner > div::after{content:''; position:absolute; z-index:1; right:-809px; /* bottom:-264px; */ bottom:0; width:809px; /* height:743px; */ height:443px; background:url(/images/np_new/kids/bg_main_bottom_people_right.png) no-repeat 0 top;}
div.visual div.bottom div.top_children_wrap{display:block; /* position:relative; */}
div.visual div.bottom div.top_children_wrap span.top_children{
    content:'';
    display:inline-block;
    width:192px;
    height:349px;
    position:absolute;
    top:-269px;
    left:88px;
    background:url(/images/np_new/kids/bg_main_top_people.svg) no-repeat 0 0/100% auto;
    z-index:1;
    /* z-index:2; */
    animation:balloon 5s ease-in-out infinite;
    }
div.visual div.top.active + div.bottom div.top_children_wrap span.top_children{}

div.visual div.bottom div.text{position:relative; /* z-index:2; */ word-wrap:break-word; word-break:keep-all;}
div.visual div.bottom div.text h3{
	font-size:40px; line-height:1.15; letter-spacing:-0.025em; color:#0F8A14;
    opacity:0;
    transition:opacity 0.5s 0.3s;
    -webkit-transition:opacity 0.5s 0.3s;
    -moz-transition:opacity 0.5s 0.3s;
    -o-transition:opacity 0.5s 0.3s;
    -ms-transition:opacity 0.5s 0.3s;
}
div.visual div.bottom div.text h3 b {display:block; margin-top:34px; font-size:60px; line-height:1.15; letter-spacing:-0.025em; color:#0F8A14;}
div.visual div.top.active + div.bottom div.text h3{opacity:1;}
div.visual div.bottom div.text h3 span.title{display:block; margin-top:20px; font-size:60px; color:#039ee7;}
div.visual div.bottom div.text p{
	margin-top:47px; font-weight:400; font-size:20px; line-height:1.6; letter-spacing:-0.025em; color:#555;
    word-break:keep-all;
    opacity:0;
    transition:opacity 0.5s 0.8s;
    -webkit-transition:opacity 0.5s 0.8s;
    -moz-transition:opacity 0.5s 0.8s;
    -o-transition:opacity 0.5s 0.8s;
    -ms-transition:opacity 0.5s 0.8s;
}
div.visual div.bottom div.text p > span {display:block;}
div.visual div.top.active + div.bottom div.text p{opacity:1;}
/* div.visual div.bottom .study_list h3{font-size:55px; font-weight:800; color:#000;}
div.visual div.bottom .study_list ul{display:inline-block; margin-top:75px;}
div.visual div.bottom .study_list ul li{float:left; margin-right:135px; position:relative;}
div.visual div.bottom .study_list ul li:last-child{margin-right:0;}
div.visual div.bottom .study_list ul li a{display:block; width:430px; height:430px; padding-top:270px; font-size:30px; font-weight:700; background:url(/images/np/kids/bg_main_more.png) no-repeat 0 0; color:#fff;}
div.visual div.bottom .study_list ul li a::after{
    content:'';
    width:80px;
    height:80px;
    position:absolute;
    top:35px;
    right:25px;
    border-radius:50%;
    box-shadow:rgba(0, 0, 0, 0.2) 3px 3px 0px;
    background:#fff url(/images/np/kids/bg_main_go.png) no-repeat 0 0;
    transition:all 0.3s;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
}
div.visual div.bottom .study_list ul li:last-child a::after{background-position:-80px 0;}
div.visual div.bottom .study_list ul li a:hover::after,
div.visual div.bottom .study_list ul li a:focus::after{transform:scale(1.2);}
div.visual div.bottom .study_list ul li:last-child a{background-position:-430px 0;} */
div.visual div.bottom div.children_wrap{/* position:relative; */}
div.visual div.bottom div.children_wrap span{position:relative; opacity:0;}
div.visual div.bottom div.children_wrap span.active{
    opacity:1;
    transition:opacity 0.5s;
}
div.visual div.bottom div.children_wrap span.children_01.active{transition-delay:1.5s;}
div.visual div.bottom div.children_wrap span.children_02.active{transition-delay:2s;}
div.visual div.bottom div.children_wrap span.children_03.active{transition-delay:2s;}
div.visual div.bottom div.children_wrap span.children_01{width:345px; height:257px; position:absolute; top:9px; left:-323px; background:url(/images/np_new/kids/bg_children_01.png) no-repeat 0 0; transform:rotate(15deg);}
div.visual div.bottom div.children_wrap span.children_02{width:357px; height:247px; position:absolute; top:18px; right:-350px; background:url(/images/np_new/kids/bg_children_02.png) no-repeat 0 0; transform:rotate(-15deg);}

/* div.study_list{margin-top:-111px; padding-top:120px; text-align:center; background:url(/images/np/kids/bg_main_study.png) no-repeat 0 0 / cover;}
div.study_list h3{margin-bottom:50px; font-size:55px; color:#fff;}
div.study_list ul{display:inline-block; vertical-align:bottom;}
div.study_list ul li{float:left; margin-right:70px;}
div.study_list ul li:last-child{margin-right:0;}
div.study_list ul li a{display:block; width:350px; margin-top:170px; padding:190px 0 130px; position:relative; font-size:30px; font-weight:700; word-break:keep-all; background-color:#35ace4; color:#000;}
div.study_list ul li:nth-child(2) a{background-color:#ff778d;}
div.study_list ul li:last-child a{background-color:#ffd461;}
div.study_list ul li a::after{content:''; width:80px; height:80px; margin-right:-40px; position:absolute; bottom:20px; right:50%; border-radius:50%; box-shadow:rgba(0, 0, 0, 0.2) 3px 3px 0px; background:#fff url(/images/np/kids/bg_main_go.png) no-repeat 0 0;}
div.study_list ul li:nth-child(2) a::after{background-position:-80px 0;}
div.study_list ul li:last-child a::after{background-position:-160px 0;}
div.study_list ul li a:hover::after,
div.study_list ul li a:focus::after{transform:scale(1.2);}
div.study_list ul li a span{width:100%; height:350px; position:absolute; top:-175px; left:0; border-radius:50%; background-color:#35ace4;}
div.study_list ul li:nth-child(2) a span{background-color:#ff778d;}
div.study_list ul li:last-child a span{background-color:#ffd461;}
div.study_list ul li a span::before{content:''; width:270px; height:270px; margin-top:-134.5px; margin-left:-134.5px; position:absolute; top:50%; left:50%; border-radius:50%; background:url(/images/np/kids/bg_study_icon_01.png) no-repeat 0 0;}
div.study_list ul li:nth-child(2) a span::before{background-image:url(/images/np/kids/bg_study_icon_02.png);}
div.study_list ul li:last-child a span::before{background-image:url(/images/np/kids/bg_study_icon_03.png);}

div.study_list ul li a:hover span::before,
div.study_list ul li a:focus span::before,
div.study_list ul li:last-child a:hover span::before,
div.study_list ul li:last-child a:focus span::before{animation:first_type_study 0.5s steps(2) 2;}

div.study_list ul li:nth-child(2) a:hover span::before,
div.study_list ul li:nth-child(2) a:focus span::before{animation:second_type_study 0.5s steps(3) 2;} */


.study_list {margin:0 -12px; margin-top:67px; text-align:center;}
.study_list > div {position:relative; width:50%; height:658px; padding:0 12px; border-radius:20px;}
.study_list .box {box-sizing:border-box; height:100%; padding-top:43px; border-radius:20px;}
.study_list > div:nth-child(1) .box {position:relative; background-color:#FFE330;}
.study_list > div:nth-child(1) .box::before {content:""; position:absolute; top:-51px; left:-75px; opacity:0.6; width:525px; height:683px; background:url(/images/np_new/kids/bg_main_study_list_left.png) no-repeat 0 0;}
.study_list > div:nth-child(1) .box::after {content:""; position:absolute; bottom:11px; left:50%; width:169px; height:283px; margin-left:-90px; background:url(/images/np_new/kids/bg_study_children_left.png) no-repeat 0 0;}
.study_list > div:nth-child(2) .box {position:relative; background-color:#FFB758;}
.study_list > div:nth-child(2) .box::before {content:""; position:absolute; top:50px; right:-29px; /* left:-104px; */ opacity:0.6; width:695px; height:652px; background:url(/images/np_new/kids/bg_main_study_list_right.png) no-repeat 0 0;}
.study_list > div:nth-child(2) .box::after {content:""; position:absolute; bottom:5px; left:50%; width:183px; height:277px; margin-left:-85px; background:url(/images/np_new/kids/bg_study_children_right.png) no-repeat 0 0;}
.study_list h3 {position:relative; margin-bottom:21px; font-size:32px; line-height:1.1563; letter-spacing:-0.025em; color:#000;}
.study_list ul {position:relative; font-size:0;}
.study_list ul li {display:inline-block; vertical-align:top; /* margin:0 18px; */}
.study_list ul li + li {margin-left:3%;}
.study_list ul li a {display:block; box-sizing:border-box; width:238px; height:296px; /* padding-top:156px; */ padding-top:150px; background:no-repeat center bottom; font-weight:700; font-size:20px; line-height:1.6; letter-spacing:-0.025em; color:#000; transform:translateY(0); transition:transform 0.3s;}
.study_list > div:nth-child(1) ul li:nth-child(1) a {background-image:url(/images/np_new/kids/bg_study_link01.png);}
.study_list > div:nth-child(1) ul li:nth-child(2) a {background-image:url(/images/np_new/kids/bg_study_link02.png);}
.study_list > div:nth-child(2) ul li:nth-child(1) a {background-image:url(/images/np_new/kids/bg_study_link03.png);}
.study_list > div:nth-child(2) ul li:nth-child(2) a {background-image:url(/images/np_new/kids/bg_study_link04.png);}

.study_list ul li:hover a,
.study_list ul li a:focus {transform:translateY(-10px);}

.btn_kids-more {display:inline-block; position:relative; z-index:3; /* width:440px; height:80px; */ padding:16px 32px; margin-top:40px; border-radius:20px; background-color:#2CD1EB; font-size:0; box-shadow:5px 5px 10px 0 rgba(0,0,0,0.2);}
.btn_kids-more span {display:inline-block; vertical-align:middle; font-weight:700; font-size:20px; /* line-height:80px; */ line-height:1.45; letter-spacing:-0.025em; color:#000;}
.btn_kids-more i {display:inline-block; vertical-align:middle; margin-left:20px; width:48px; height:48px; border-radius:50%; background-color:#fff; font-size:27px; line-height:48px; color:#000; transform:scale(1); transition:transform 0.3s;}
.btn_kids-more:hover i {transform:scale(1.2);}

/* @keyframes cloud_01{
    0% {top:15px;}
    50% {top:0px;}
    100% {top:15px;}
}

@keyframes cloud_02{
    0% {top:30px;}
    50% {top:20px;}
    100% {top:30px;}
}


@keyframes balloon{
    0% {top:0px;}
    50% {top:20px;}
    100% {top:0px;}
} */


/* Tablet */
@media all and (min-width:768px) and (max-width:1199px) {

	@keyframes balloon{
	    0% {top:-218px;}
	    50% {top:-208px;}
	    100% {top:-218px;}
	}

	div.visual div.top > .inner > div{padding-top:58px; padding-bottom:488px;}
	div.visual div.top p::before {width:445px; height:139px;}
	div.visual div.top span.bg_city{width:100%; height:0; margin-left:-50%; padding-top:25%; bottom:-300px; left:50%; background-image:url(/images/np/kids/bg_mobile_main_citys.png); background-size:contain; z-index:3;}
	div.visual div.top.active span.bg_city{bottom:5%;}
	
	div.visual div.top img{width:250px; margin:0 auto 30px;}
	
	div.visual div.bottom {margin-top:-421px;}
	div.visual div.bottom::before {z-index:1; /* height:375px; */ height:420px;}
	div.visual div.bottom > .inner > div {padding-bottom:398px;}
	div.visual div.bottom > .inner > div::before {z-index:2; /* bottom:-249px; */ left:-21px; height:485px;}
	div.visual div.bottom > .inner > div::after {z-index:2; right:-535px; /* bottom:-273px; */ height:470px;}
	div.visual div.bottom div.top_children_wrap {width:100%;}
	div.visual div.bottom div.top_children_wrap span.top_children{top:-208px; left:0; width:109px; height:198px;}
	div.visual div.top.active + div.bottom div.top_children_wrap span.top_children{}
	
	div.visual div.bottom div.children_wrap{display:none; width:100%;}
	div.visual div.bottom div.children_wrap span.children_01{}
	div.visual div.bottom div.children_wrap span.children_02{}
	div.visual div.bottom div.children_wrap span.children_03{width:150px; height:251px; top:-260px; right:155px; background-size:150px 251px; z-index:2;}
	div.visual div.bottom div.children_wrap span.children_03::before{width:40px; height:109px; left:5px; background-size:40px 109px;}
	
	/* div.study_list h3{font-size:40px;}
	div.study_list ul li{margin-right:50px;}
	div.study_list ul li a{width:210px; height:340px; margin-top:120px; padding:135px 0 130px;  font-size:25px;}
	div.study_list ul li a::after{width:60px; height:60px; margin-right:-30px; position:absolute; bottom:30px; right:50%; background-size:180px 60px;}
	div.study_list ul li:nth-child(2) a::after{background-position:-60px 0;}
	div.study_list ul li:last-child a::after{background-position:-120px 0;}
	
	div.study_list ul li a span{width:100%; height:220px; top:-110px;}
	div.study_list ul li a span::before{content:''; width:200px; height:200px; margin-top:-105px; margin-left:-100px; top:50%; left:50%; border-radius:50%; background-size:400px 200px;}
	div.study_list ul li:nth-child(2) a span::before{background-size:600px 200px;}
	div.study_list ul li:last-child a span::before{background-size:400px 200px;}
	
	div.study_list ul li a:hover span::before,
	div.study_list ul li a:focus span::before,
	div.study_list ul li:last-child a:hover span::before,
	div.study_list ul li:last-child a:focus span::before{animation:first_type_study_tablet 0.5s steps(2) 2;}
	
	div.study_list ul li:nth-child(2) a:hover span::before,
	div.study_list ul li:nth-child(2) a:focus span::before{animation:second_type_study_tablet 0.5s steps(3) 2;} */

	.study_list {margin:0; margin-top:54px;}
	.study_list > div {width:100%; padding:0;}
	.study_list > div + div {margin-top:24px;}
	
	.btn_kids-more {margin-top:52px;}

}

/* Mobile */
@media only all and (max-width:767px){

	@keyframes balloon{
	    0% {top:-112px;}
	    50% {top:-102px;}
	    100% {top:-112px;}
	}

	div#contents.main{padding-bottom:0;}
	div.visual div.top > .inner > div::before,
	div.visual div.top > .inner > div::after {transform:scale(0.5);}
	div.visual div.top > .inner > div {padding-top:36px; padding-bottom:395px;}
	div.visual div.top p::before {width:289px; height:89px;}
	div.visual div.top span.bg_city{width:100%; height:0; margin-left:-50%; padding-top:25%; bottom:-100px; left:50%; background-image:url(/images/np/kids/bg_mobile_main_citys.png); background-size:contain; z-index:3;}
	div.visual div.top.active span.bg_city{bottom:10%;}
	div.visual div.top img{width:165px; margin:0 auto 20px;}
	
	div.visual div.bottom{margin-top:-347px;}
	div.visual div.bottom::before {z-index:1; /* height:375px; */ height:300px;}
	div.visual div.bottom > .inner > div {padding:34px 10px 335px 10px;}
	div.visual div.bottom > .inner > div::before {z-index:2; left:-65px; width:600px; height:405px; background-size:100% auto;}
	div.visual div.bottom > .inner > div::after {z-index:2; right:-435px; width:600px; height:377px; background-size:100% auto;}
	
	div.visual div.bottom div.top_children_wrap{width:100%;}
	div.visual div.bottom div.top_children_wrap span.top_children{top:-102px; left:-12px; width:77px; height:140px;}
	div.visual div.top.active + div.bottom div.top_children_wrap span.top_children{}
	
	div.visual div.bottom div.text h3 {font-size:27px; line-height:1.5185;}
	div.visual div.bottom div.text h3 b {margin-top:29px; font-size:40px; line-height:1.375;}
	div.visual div.bottom div.text p {margin-top:25px; font-size:16px; line-height:2;}

	div.visual div.bottom div.children_wrap{display:none; width:100%;}
	div.visual div.bottom div.children_wrap span.children_01{}
	div.visual div.bottom div.children_wrap span.children_02{}
	div.visual div.bottom div.children_wrap span.children_03{width:107px; height:179px; top:250px; right:0; left:15px; background-size:107px 179px; z-index:2;}
	div.visual div.bottom div.children_wrap span.children_03::before{width:30px; height:97px; left:5px; background-size:30px 97px;}
	
	/* div.study_list{padding-top:45px; padding-bottom:95px; background:#2a2b3f none;}
	div.study_list h3{margin-bottom:30px; font-size:22px;}
	div.study_list ul{width:100%;}
	div.study_list ul li{width:100%; margin-right:0; margin-bottom:20px; overflow:hidden; float:none;}
	div.study_list ul li:last-child{margin-bottom:0;}
	div.study_list ul li a{width:calc(100% - 80px); height:150px; margin-top:0px; padding:10% 0 30px 25%; float:right; font-size:18px; letter-spacing:-1px; text-align:left;}
	div.study_list ul li a::after{width:50px; height:50px; top:auto; left:30px; background-size:150px 50px;}
	div.study_list ul li:nth-child(2) a{float:left; padding:10% 25% 30px 0; text-align:right;}
	div.study_list ul li:nth-child(2) a::after{left:auto; right:60px; background-position:-50px 0;}
	div.study_list ul li:last-child a::after{background-position:-100px 0;}
	
	div.study_list ul li a span{width:150px; height:150px; position:absolute; top:0; left:-75px;}
	div.study_list ul li:nth-child(2) a span{left:auto; right:-75px;}
	div.study_list ul li a span::before{content:''; width:120px; height:120px; margin-top:-60px; margin-left:-60px; background-size:240px 120px;}
	
	div.study_list ul li:nth-child(2) a span::before{background-size:360px 120px;}
	div.study_list ul li:last-child a span::before{background-size:240px 120px;}
	
	div.study_list ul li a:hover span::before,
	div.study_list ul li a:focus span::before,
	div.study_list ul li:last-child a:hover span::before,
	div.study_list ul li:last-child a:focus span::before{animation:first_type_study_mobile 0.5s steps(2) 2;}
	
	div.study_list ul li:nth-child(2) a:hover span::before,
	div.study_list ul li:nth-child(2) a:focus span::before{animation:second_type_study_mobile 0.5s steps(3) 2;} */

	.study_list {margin:0; margin-top:40px;}
	.study_list > div {height:auto;}
	.study_list .box {padding-top:45px; padding-bottom:339px;}
	.study_list h3 {font-size:28px; line-height:1.1429;}
	.study_list > div {width:100%; padding:0;}
	.study_list > div + div {margin-top:32px;}
	.study_list ul li {display:block;}
	.study_list ul li + li {margin-top:20px; margin-left:0;}
	.study_list ul li a {display:inline-block; /* margin:0 auto; */}
	
	.study_list > div:nth-child(1) .box::after {bottom:26px;}
	.study_list > div:nth-child(2) .box::after {bottom:22px;}
	
	.btn_kids-more {padding:16px 19px; margin-top:38px;}
	.btn_kids-more span {display:block;}
	.btn_kids-more i {margin-top:12px; margin-left:0;}

}

@media only all and (max-width: 550px) {
	div.visual div.top > .inner {padding:0 3.3333%;}
	div.visual div.bottom > .inner {padding:0 3.3333%;}
	div.visual div.bottom > .inner > div::before {left:-40px;}
	div.visual div.bottom > .inner > div::after {right:-410px;}
}