/*skip*/
.skip{color: #fff;background: #000;text-align: center;width: 100%;height:50px;display: block;
	line-height: 50px;position: absolute;left:0;top: -100px;transition: 0.35s;}

.skip:focus{top: 0;}
body{font-family: 'Noto Sans KR', serif;font-family: 'Nanum Gothic', sans-serif;}

/*header*/
header{position: relative;width: 100%;background:#fff;box-shadow: 0 0 5px rgba(0,0,0,0.5);height: 60px;z-index: 888;
border-bottom: 3px solid #ff7800;}
header h1{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}
header h1 a{width: 279px;height: 50px;display: block;color: transparent;
background-image: url(../images/logo.png);text-indent: -999px;line-height: 90px;}

/*임시*/
.course img{max-width: 100%;}
/*visual*/
.visual{position: relative;overflow: hidden;visibility: hidden;}
.visual .slider img{width: 100%;height: 100%;}
.visual .imgDesc h1{font-family: 'Noto Sans KR', sans-serif;font-size: 4.5em;white-space: nowrap;
letter-spacing: .0em;margin-top:-60px;opacity: 0;padding: .1em;
transition: 0.7s;text-shadow: 0 0 3px #fff;background: rgba(255,255,255,.5);border-radius: 1em;}

.visual .imgDesc span{position:relative;font-family: 'Nanum Pen Script', cursive;;font-size: 3.2em;white-space: nowrap;top: 60px;opacity: 0;transition: 0.8s;text-shadow: 0 0 3px #fff;background: rgba(255,255,255,.5);border-radius: 1em;}

.visual .slider li.active .imgDesc h1{opacity: 1;margin-top: 0;color: #211a1a;}
.visual .slider li.active .imgDesc span{opacity: 1;top: 0;color: #211a1a;}
.visual .imgDesc{position: absolute;top: 50%;left:50%;color: #fff;opacity: 0;
	transform: translate(-50%,-50%);opacity: 1;
	text-align: center;transition: 0.5s;}
/* next ,prev*/
.bx-controls-direction a{display:block;font-size: 50px;color: #fff;width: 50px;height: 50px;overflow: hidden;
}
.bx-controls-direction .bx-prev{position: absolute;top: 50%;left: 0;transform: translateY(-50%);
}
.bx-controls-direction .bx-next{position: absolute;top: 50%;right: 0;transform: translateY(-50%);
}

.bx-controls-direction .bx-prev:before{content: '\e93b';font-family: xeicon;
}
.bx-controls-direction .bx-next:before{content: '\e93e';font-family: xeicon;
}
/* play ,pause*/
.bx-wrapper{position: relative;
}
.bx-controls-auto{position: absolute;left: 0;bottom:0;margin-bottom: 10px;
}
.bx-controls-auto .bx-controls-auto-item{display: inline-block;
}
.bx-controls-auto .bx-controls-auto-item .bx-start:before{content: '\ea3e';font-family: xeicon;
}
.bx-controls-auto .bx-controls-auto-item .bx-stop:before{content: '\ea3b';font-family: xeicon;
}

.bx-controls-auto .bx-controls-auto-item a{display: block;color: #fff;width: 16px;height: 16px;overflow: hidden;opacity: .5;
}
.bx-controls-auto .bx-controls-auto-item a.active{opacity: 1}
/*pagesing*/
.bx-pager {position: absolute;width: 100%;text-align: center;bottom:7px;}
.bx-pager div{display: inline-block;left: 0;padding:0 3px;}
.bx-pager div a{display: block;width:20px;height: 3px;background: #fff;color: transparent;opacity: .5;}
.bx-pager div a.active{opacity: 1;}
/*imageshadow*/
.imageShadow{;background: url(../images/shadow.png)no-repeat;background-size: 100%;height: 60px;}



/*container margin:4em 0 0; */
.container{max-width: 100%;box-sizing: border-box;text-align: center;}
.container .back{position: relative;max-width: 100%;top: 200px;opacity: .5;}
.container .icon{position: absolute;left: 50%;transform: translateX(-50%);width: 340px;height: 177px;z-index: 10;}
.container .titleLogo1{background: url(../images/title_logo1.png)no-repeat;}
.container .titleLogo2{background: url(../images/title_logo2.png)no-repeat;}
.container .titleLogo3{background: url(../images/title_logo3.png)no-repeat;}


.container h1{font-family: 'Gugi', cursiv;font-size: 3em;white-space:nowrap;color:#000; }
.container span{font-family: 'Noto Sans KR', sans-serif;color:#fff;font-size: 1em; line-height: 3em;}

/*.container .corona{border-radius: 2em;padding: 1em;}*/
/*.container .corona:before{display: block;content: '';border-bottom: 1px solid #f5f3f3;}*/
.container .monster{padding: 4em;background: #f9d77c;}
.container .corona{padding: 4em;background: #86d0f9;}
/*.container .corona h1{color: #2b3277;font-size: 2em;}*/
.container .corona p{font-size: 1em;font-weight: bold;line-height: 2em;color: #fff;}
.container .corona .icon{width: 150px;}
.container .corona .icon img{width: 100%;height: auto;}

.container .consulting{color: #fff;background: #ff7800;border-radius: 1em;width: 100px;
	padding: 1em 2em;font-size: 1.1em;margin: 2em auto;cursor: pointer;font-weight: bold;}


/*new margin-bottom: 4em;*/
.container .classification{position: relative;padding: 4em;background: #540ca6;text-align: center;}

.container .classification .contents{display: flex;position: relative;margin-top: 3em;
justify-content: center;align-items: center;flex-wrap: wrap;box-sizing: border-box;}

.container .classification .contents > div{position: relative;width: 340px;height: 400px;background: #c8e6e8;margin:1em;border-radius: 1em;cursor: pointer;
	}
.container .classification .contents > div:hover:before{background: #000;}
.container .classification .contents > div:hover .desc p{color: #fff;}
.container .classification .contents > div:hover .titleLogo{opacity: .8;}
.container .classification .contents > div:before{position: absolute;display: block;content: '';bottom: 0;width: 100%;height: 90px;background: #fff;border-top: 1px solid #ccc;}
.container .classification .contents .titleLogo{position: absolute;width: 394px;max-width: 100%;top: -40px;animation-name: iconBounce;animation-duration: 1.2s;animation-iteration-count: infinite;animation-direction:alternate-reverse;
opacity: .5;}
.container .classification .contents > div:nth-child(2) .titleLogo{animation-duration: 2s;}
.container .classification .contents > div:nth-child(3) .titleLogo{animation-duration: 1.3s;}
.container .classification .contents > div:nth-child(4) .titleLogo{animation-duration: 1s;}

.container .classification .contents .desc{position: absolute;top: 330px;left: 50%;transform: translateX(-50%);line-height: 40px;}
.container .classification .contents .desc span{display: block;font-size: 1.3em;color: #e13930;line-height: 20px;font-weight: bold;white-space: nowrap;}
.container .classification .contents .desc p{font-size: 1em;color: #4e4e4e;white-space: nowrap;font-weight: bold;}
.container .classification .contents > div:nth-child(2) .desc span{color:#0074bc; }
.container .classification .contents > div:nth-child(3) .desc span{color:#fe8081; }
.container .classification .contents > div:nth-child(4) .desc span{color:#ffba00; }

/*오감뮤직프로그램*/
.container .musicprogram{position: relative;padding: 4em;background: #f9b858;text-align: center;}
.container .musicprogram .contents{display: flex;position: relative;margin-top: 3em;
justify-content: center;align-items: center;flex-wrap: wrap;box-sizing: border-box;}
.container .musicprogram .contents .desc span{display: block;font-size: 1.3em;color: #744ee9;line-height: 20px;font-weight: bold;white-space: nowrap;}

/* margin-bottom: 4em;*/
.container .topcon{background: #fbed47;padding: 4em;}
.container .topcon h1{margin-top: 2em;}
.container .topcon span{color:#d81414;}

.container .topcon .circle{position: relative;left: 50%;top: 50%;transform: translateX(-50%);;
	width: 650px;height: 650px;border-radius: 50%;background: #07a3fd;overflow: hidden;}
.container .topcon .circle .icons{position: relative;}
.container .topcon .circle .icons .character{}
.container .topcon .circle .icons .character .char{position: absolute;max-width: 100%;}
.container .topcon .circle .icons .character .one{left:50%;transform: translateX(-50%);bottom: -570%;
animation-name: charOne;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate-reverse;
}

.container .topcon .circle .icons .character .two{right: -115px;bottom: -430%;
animation-name: charTwo;animation-duration: 1.1s;animation-iteration-count: infinite;animation-direction:alternate-reverse;}
.container .topcon .circle .icons .character .three{left: -140px;bottom: -490%;
animation-name: charThree;animation-duration: 1.2s;animation-iteration-count: infinite;animation-direction:alternate-reverse;}
.container .topcon .circle .icons .topLogo{position: relative;top: 50px;left: 50%;
	transform: translateX(-50%);}
.container .topcon .pattern{position: absolute;right: 0;bottom: -4px;}
.container .topcon .pattern{max-width: 100%}
.container .topcon .clound{position: absolute;z-index: 99;}
.container .topcon .clound img{max-width: 100%;}

.container .topcon .all{position: absolute;left: 50%;top: 70%;transform: translateX(-50%)translateY(-50%);
	width: 867px;max-width: 100%;}
.container .topcon .all .one{left: 1%;}
.container .topcon .all .two{left: -5%;top: 22%;}
.container .topcon .all .three{left: 92%;top: 18%;}
.container .topcon .all .four{left: 78%;top: 4%;}
.container .topcon .all .bus{left:-10%;top: 80%;}
.container .topcon .all .book{left:-22%;top: 46%;}
.container .topcon .all .pencle{left:89%;top: 73%;}


@keyframes charOne {from {bottom: -620%;}to {bottom: -570%;}}
@keyframes charTwo {from {right: -135px;}to {right: -115px;}}
@keyframes charThree {from {left: -160px;}to {left: -140px;}}
@keyframes iconBounce {from {top: -80px;}to {top: -40px;}}
.container .con{position: relative;}
.container .con img{max-width: 90%;}

.container .corona img{position: relative;top: 70px;}
.container .con .desc{position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
.container .con .desc h1{margin-top: 1.5em;}
.container .summer{max-width: 1200px;}
/*past*/

.container .subject{padding: 3em;box-sizing: border-box;margin-top: 2em;background: #f5f3f3;border-radius: 2em;}
.container .subject .desc h2{color: #ea575d;font-size: 1.3em;}
.container .subject .desc span{color: #72727b;font-size: .8em;}
.container .subject .desc .btn{color:#fff;background: #ea575d;margin:1em auto;font-family: 'Titillium Web', sans-serif;
font-size: 1em;width:80%; letter-spacing: -.1em; white-space: nowrap;line-height: 1.5em;}
.container .subject .desc .btn:hover{background: #6057ea;}

.container .subject ul{display: flex;justify-content: center;flex-wrap: wrap;}
.container .subject li{position: relative;list-style: none;border: 1px solid #ea575d;width: 25%;margin:1em;padding: 1em;
	border-top-left-radius:6em; border-top-right-radius: 2em;border-bottom-left-radius: 2em;border-bottom-right-radius: 6em;}
.container .subject li .con{position: relative;background: #000;border-radius: 10em;width:7em;height:7em;
left: 50%;transform: translateX(-50%);margin: 1em 0 2em 0;overflow: hidden;}
.container .subject li .display{position: relative;left: 50%;transform: translateX(-50%);width: 100%;
	padding: .8em;font-weight: bold;white-space: nowrap;}
.container .subject li .New{text-shadow: 0 0 3px #27acff;}
.container .subject li .Hit{text-shadow: 0 0 3px #f00;}
.container .subject li .Coming{text-shadow: 0 0 3px #67ea9e;}

/*content*/
/*.content .con{padding: 2em;}*/


.content .con{display: none;padding: .5em;background: #6bcef5;border-radius: 1em;margin: 2em 0;}
.content .con:nth-child(2n){background: #69deea42;}
.content h1{color:#1b0904;text-shadow: 0 0 3px #b864e2;}
.content .con .view{position: relative;overflow: hidden;visibility: hidden;}
.content .view .bx-viewport{border-radius: 1em;}
.content .dinosaur .view .bx-viewport{margin-bottom: 3em;}
/*.content .con .view .bx-wrapper:first-child{margin-bottom: 3em;}*/
.content .con .view .player{background: #ff00;}
.content .con .view .player video{border-radius: 1em;}
/*.content .con .view .player video{border-radius: 2em;border:3px solid #ddd;}*/


.content .con .view .sliderMulti img{width: 100%;height: 100%;}
.content .con .view .sliderMulti .imgDesc{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.content .con .view .sliderMulti .imgDesc h1{color: #fff;}
.content .con .view .sliderMulti .imgDesc span{color: #fff;font-size: 1.8em;}

/*arrowUp*/
/*\e915*/
.arrowUp{display: none;position: fixed;width: 80px;height: 80px;background: rgba(0,0,0,.5);bottom: 0;right: 10px;
border-radius: 5em;transform: translateY(-100%);z-index: 99;cursor: pointer;}
.arrowUp:after{position: absolute;content:'\e915';font-family: 'xeicon';font-size: 3em;color: #fff;
left:50%;top: 50%;transform: translate(-50%,-50%); }
.arrowUp:hover{background: rgba(0,0,0,.8)}

/*footer*/
footer{position: relative;width: 100%;background: #251136; color: #A090BD;box-sizing: border-box;}
footer .foo_inner{position: relative;max-width: 1200px;margin: 0 auto;padding: 0px;}
footer .foo_inner .foo_top{padding:30px;}
footer .foo_inner .foo_top .foo_title{margin-bottom: 1em;}
footer .foo_inner .foo_top .foo_title p{position: relative;font-size: 1.2em;font-weight: bold;}
footer .foo_inner .foo_content a{color:#A090BD; }
footer .foo_inner .foo_content .foot_tel{display: inline-block;vertical-align: middle;font-size: 3em;font-weight: bold;}
footer .foo_inner .foo_content ul{display: inline-block;vertical-align: middle;
	font-size: .8em;line-height: 1.6em;font-weight: bold;}

footer .foo_inner .foo_content ul li{list-style: none;}
footer .foo_inner .representative{padding: 30px;}
footer .foo_inner .representative ul{display: inline-block;vertical-align: middle;
	font-size: .8em;line-height: 1.6em;font-weight: bold;}
footer .foo_inner .representative ul li{list-style: none; font-size: 1.2em}

footer .foot_logo{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
footer .foot_logo img{max-width: 100%;}

footer .foot_sns{position: absolute;top: 50%;transform: translateY(-50%);right: 100px;}
footer .foot_sns .andgo{cursor: pointer;}
footer .foot_sns ul{list-style: none;}
footer .foot_sns ul li{display: inline-block;width: 50px;height: 50px;margin: 0 .2em;}
footer .foot_sns ul li img{max-width: 100%;}

.tel{position: fixed;background: #fff;bottom: 0;left:0;width: 100%;height: auto;z-index: 999;text-align: center;background: #ccc;}
.tel .title{background: #F2C029;color: #F26E50;padding: 0 1em .7em;}
.tel .title h1{font-size: 1.2em;}
.tel .title .arrow{}
.tel .title .arrow .up{position: relative;display: block;width: 100px;height: 30px;left: 50%;transform: translateX(-50%);}
.tel .title .arrow .up:after{display: block;content:'\e944';font-family: 'xeicon';font-size: 2em;color: #F26E50;}
.tel .title .arrow .down{position: relative;display: none;width: 100px;height: 30px;left: 50%;transform: translateX(-50%);}
.tel .title .arrow .down:after{display: block;content:'\e941';font-family: 'xeicon';font-size: 2em;color: #F26E50;}

.viewNumber{position: fixed;display: block;bottom: 0;width: 100%;text-align: center;z-index: 998.5}
.viewNumber ul{list-style: none;display: flex;}
.viewNumber ul li{background: rgba(0,0,0,.8);color: #f2c029;font-size: .8em;border: 1px solid #f2c029;width: 33%;}
.viewNumber ul li a{display: block;color:#f2c029;line-height: 50px; }
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
##Device = 랩탑, 데스크탑
##Screen = 1025px에서 1280px 사이
*/

@media (min-width: 1025px) and (max-width: 1280px) {



}

/*
##Device = Tablets, Ipads (portrait),
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(세로),
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) {
.container .subject li{width: 40%;margin: .5em;padding: 0;border-radius:0;}
.content .con .view .sliderMulti .imgDesc h1{font-size: 2em;}
.container .corona h1{font-size: 2em;}
.container .corona p{font-size: 1.6em;}
.content .con .view .sliderMulti .imgDesc span{font-size: 1.6em;}
footer .foo_inner{padding:30px 30px 100px 30px;}
footer .foot_sns{position: absolute;top: 38px;transform: translateX(-25%);right:0;}
footer .foot_logo{width: 150px;top: 200px}
}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(가로)
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.container .subject li{width: 100%;margin: .5em;padding: 0;border-radius:0;}
.container .topcon .circle{max-width: 100%;}
.container .topcon{padding: 2em;}
footer .foo_inner{padding:30px 30px 100px 30px;}
footer .foot_sns{position: absolute;top: 38px;transform: translateX(-25%);right:0;}
footer .foot_logo{width: 150px;top: 200px}
}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
##Device = 저해상도 태블릿, 모바일(가로)
##Screen = 481px에서 767px 사이
*/

@media (min-width: 481px) and (max-width: 767px) {
.titleLogo{bottom: -20px;}
.visual .imgDesc h1 {font-size: 2em;margin-top: 6em;}
.visual .imgDesc span {font-size: 3em;}
.container .corona{padding: 1em;}
.container .corona img{top: 20px;}
.container .corona h1{font-size: 2em;}
.container .corona p{font-size: 1.6em;}
.container .subject{padding: .5em;}
.container .topcon h1{margin-top: 6em;}
.container{max-width: 100%;padding: 0;}
.container h1{font-size: 1.4em;white-space: nowrap;}
.container .subject li{width: 100%;margin: .5em;padding: 0;border-radius:0;}
.content .con .view .sliderMulti .imgDesc h1{font-size: 2.1em;}
.content .con .view .sliderMulti .imgDesc span{font-size: 1.8em;}
.container .topcon{padding: 2em;}
.container .topcon .circle{width: 500px;height: 500px;}
.container .topcon .circle{max-width: 100%;}
.container .classification{padding: 2em;}
.container .classification .contents{margin-top: 1em;}
footer .foo_inner{padding:30px 30px 100px 30px;}
footer .foot_sns{position: absolute;top: 35px;transform: translateX(-25%);right:0;}
footer .foot_logo{width: 150px;top: 200px}

}

/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
##Device = 대부분의 스마트폰 모바일 기기(세로)
##Screen = 320px에서 479px 사이
*/

@media (min-width: 320px) and (max-width: 480px) {
.titleLogo{bottom: -20px;}
.visual .imgDesc h1 {font-size: 1.5em;}
.visual .imgDesc span {font-size: 1.5em;}
.container .con .desc h1{}
.container .topcon h1{margin-top: 6em;}
.container .corona{padding: 1em;}
.container .corona img{top: 20px;}
.container .corona h1{font-size: 1.2em;}
.container .corona p{font-size: .9em;}
.container .subject{padding: .5em;}
.container{max-width: 100%;padding: 0;}
.container h1{font-size: 1.4em;white-space: nowrap;}
.container .subject li{width: 100%;margin: .5em;padding: 0;border-radius:0;}
.content .con .view .sliderMulti .imgDesc h1{font-size: 1.2em;white-space: nowrap;}
.content .con .view .sliderMulti .imgDesc span{font-size: 1em;line-height: 1em;letter-spacing: .1em;}
.container .topcon .circle{width: 300px;height: 300px;}
.container .con .circle img{max-width: 75%;}
.container .topcon{padding: 2em;}
.container .topcon .circle .icons .character .one{bottom: -310px;}
.container .topcon .circle .icons .character .two{bottom: -213px;}
.container .topcon .circle .icons .character .three{bottom: -240px;}
@keyframes charOne {from {bottom: -270px;}to {bottom: -300px;}}
@keyframes charTwo {from {right: -135px;}to {right: -100px;}}
@keyframes charThree {from {left: -160px;}to {left: -120px;}}
.container span{font-size: .9em;white-space: nowrap;}
.container .topcon .circle .icons .topLogo{max-width: 65%;top: 20px;}
.container .classification{padding: 1em;}
.container .classification .contents{margin-top: 1em;}

footer .foot_sns{top: 10px;right: 44%;transform: translate(44%,50%);}
footer .foot_sns ul{width: 180px;}
footer .foo_inner{padding:30px;}
footer .foo_inner .foo_content{text-align: center;}
footer .foo_inner .foo_content .foot_cs_time{margin-left: 0;}
footer .foot_sns ul li{width: 30px;height: 30px;}
footer .foo_inner .foo_top{padding:10px;}
footer .foo_inner .foo_top .foo_title{text-align: center;margin: 1em 0 .5em 0;}
footer .foo_inner .representative{font-size: 0.8em;text-align: center;margin: 0.5em 0 .5em 0;padding-top: 2.5em;}
footer .foo_inner .foo_content .foot_tel{font-size: 2em;margin-bottom: .2em;}
footer .foot_logo{top: 150px;width: 100px;}
}