/*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;background: #540ca6;}

/*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;}
.title{text-align: center;}
.title h1{font-family: 'Gugi', cursiv;font-size: 3em;white-space:nowrap;color:#000;padding-top: 1em;}
.title span{font-family: 'Noto Sans KR', sans-serif;color:#fff;font-size: 1.5em; line-height: 3em;}

.icons{position: relative;width: 340px;left: 50%;transform: translateX(-50%);top: 30px;z-index: -1;}

/*course*/
.course{position: relative;width:100%;max-width: 1000px;margin:0 auto;margin-bottom: 1em;}
/* next \e93e prev \e93b*/
/*.course:before{position: fixed;display: block;content:'\e93b';font-family: 'xeicon';font-size: 5em;color: #000;top: 50%;
transform: translateY(-50%);left: 300px;background: rgba(255,255,255,.5);}
.course:after{position: fixed;display: block;content:'\e93e';font-family: 'xeicon';font-size: 5em;color: #000;top: 50%;
transform: translateY(-50%);right:300px;background: rgba(255,255,255,.5);cursor: pointer;}*/
/*next prev btn*/
.progress{position: fixed;width: 100%;max-width: 1000px;top: 50%;left: 50%;
	transform: translate(-50%,-50%);height: 5em;z-index: 50;}
.progress .next{position: absolute;top: 50%;transform: translate(50%,-50%);right: 0;cursor: pointer
	;background:rgb(255 255 255 / .8);border-radius: 2em;padding: 1em;box-sizing: border-box;}
.progress .prev{position: absolute;top: 50%;transform: translate(-50%,-50%);left: 0;cursor: pointer
	;background:rgb(255 255 255 / .8);border-radius: 2em;padding: 1em;box-sizing: border-box;}
.progress .next:after{display: block;content:'\e93e';font-family: 'xeicon';font-size: 2em;color: #000;}
.progress .prev:after{display: block;content:'\e93b';font-family: 'xeicon';font-size: 2em;color: #000;}
.progress .next:hover:after{color:#000; }
.progress .prev:hover:after{color:#000; }


.course .content{display: none;width:1000px ;margin: 0 auto;background: #151617;
border-radius: 1em;overflow: hidden;box-sizing: border-box;}
.course .content .desc .btn{padding: 1em;background: #0074bc;border-radius: 1em;
	color: #fff;width: 100px;margin:0 auto;text-align: center;}
.course .on{display: block;}
.course .content img{width: 100%;}
.course .content .desc{position: relative;width: 100%;padding: 1em;background: #151617;box-sizing: border-box;}
.course .content .desc > div{margin: 1em 0;font-size:16px;font-family: 'Noto Sans KR', sans-serif;}
.course .content .desc > div strong{color: #fff;font-weight: 500;}
.course .content .desc > div span{color: #fff;}

.course .content .desc .logo{width: 200px;margin: 0 auto;}
.course .content .desc .logo img{max-width: 100%;}
.course .content .desc .viewTable > div{display: flex;position: relative;}
.course .content .desc .viewTable > div strong{line-height: 30px;font-weight: 500;}
.course .content .desc > div .graph{position: absolute;top: 50%;left: 50px;transform: translateY(-50%);
	background: #000;height: 30px;width: 300px;border-radius: 40px;}
.course .content .desc > div .graph span{display: block;width: 75%;background:#0074bc;padding: 0 10px;
	box-sizing: border-box;text-align: right;line-height: 30px;border-radius: 40px;color: #fff;}
.course .content .desc .viewTable > div .star{position: relative;font-family: 'xeicon';line-height: 30px;
font-size: 20px;margin: 0 2px;}
.course .content .desc .viewTable > div .star:before{content: '\ea16';color: #fff;}
.course .content .desc .viewTable > div .on:after{display: block;position: absolute;content: '\ea0f';
top: 0;color: #0074bc;transform: scale(.7);}
.course .content .desc .viewTable > div:nth-child(2) .star:after{color:#fe8081; }
.course .content .desc .viewTable > div:nth-child(3) .star:after{color:#ffba00; }


/*sideMenu*/
.sideMenu{position: fixed;top: 50%;right: 40px;transform: translateY(-50%);background: rgba(255,255,255,.5);
padding: 1em 0 0 0;border-radius: 1em;z-index: 99;padding: 1em;}
.sideMenu .quick{background: #000;color: #fff;padding: 1em;}
.sideMenu .quick span{font-size: .7em;color: #4cf7a8;font-weight: bold;}
.sideMenu ul{display: block;position: relative;margin-top:0;left: 50%;transform: translateX(-50%);}
.sideMenu ul li{display: block;position: relative;list-style: none;width: 80px;height: 80px;background: #c8e6e8;
	margin: 2em 0;border-radius: 1em;cursor: pointer;}
.sideMenu ul li:before{position: absolute;display: block;content: '';bottom: 0;width: 100%;
height: 30px;background: #fff;border-top: 1px solid #ccc;}
.sideMenu ul li .desc{position: absolute;top: 60px;left: 50%;transform: translateX(-50%);}
.sideMenu ul li .desc span{display: block;font-size: .7em;color: #0074bc;font-weight: bold;white-space: nowrap;}
.sideMenu ul a:nth-child(2) li .desc span{color:#fe8081; }
.sideMenu ul a:nth-child(3) li .desc span{color:#ffba00; }
.sideMenu ul li:nth-child(4) .desc span{color:salmon; }
.sideMenu ul li:nth-child(4) .phone{position: absolute;left: 50%;transform: translateX(-50%);top: -20px;\
opacity: .5;color: salmon;}
.sideMenu ul li:nth-child(4) .phone:after{display: block;content: '\eaed';font-family: 'xeicon';
font-size: 5em;
}
.sideMenu ul li:hover:before{background: #000;}
.sideMenu ul li:hover .desc span{color: #fff;}
.sideMenu ul a li:hover .desc span{color: #fff;}
/*.sideMenu ul li:hover .titleLogo{opacity: 1;}*/

.sideMenu ul li.on:before{background: #000;}
.sideMenu ul li.on .desc span{color: #fff;}
.sideMenu ul li.on .titleLogo{opacity: 1;}

.sideMenu ul li .titleLogo{position: absolute;max-width: 100%;top: -40px;opacity: .5;
animation-name: iconBounce;animation-duration: 1.2s;animation-iteration-count: infinite;
animation-direction: alternate-reverse;}
.sideMenu ul a:nth-child(2) li .titleLogo{animation-duration: 2s;}
.sideMenu ul a:nth-child(3) li .titleLogo{animation-duration: 1.3s;}
.sideMenu ul li img{max-width: 100%;}



/*bottomMenu*/
.topMenu{position: fixed;width: 100%;box-sizing: border-box;top: -50px;z-index: 999;
box-shadow: 0 0 30px rgba(0,0,0,.1);}

.topMenu ul{list-style: none;width: 100%;height: auto;}
.topMenu ul li{position: relative;display: inline-block; width:25%;float:left;
background: #fe80816e;height: 50px;border-radius: .5em;}
/*.topMenu ul :nth-child(2) li {background: #0074bc8f;}
.topMenu ul :nth-child(3) li {background: #f6c35866;}*/


.topMenu ul li.on {background: #000;}


.topMenu ul li .titleLogo{position: absolute;top: 0;left: 50%;transform: translateX(-50%);opacity: .5;
}
.topMenu ul li .desc{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);}
/*.topMenu ul li:before{position: absolute;display: block;content: '';bottom: -30px;width: 100%;
height: 30px;background: #000;border-top: 1px solid #ccc;}*/

.topMenu ul li .desc span{font-size: .85em;color: #fff;font-family: 'Noto Sans KR', sans-serif;
white-space: nowrap;letter-spacing: -1.5px;}
/*.topMenu ul :nth-child(2) li .desc span{color: #fff;}
.topMenu ul :nth-child(3) li .desc span{color: #fff;}*/

.topMenu ul li img{max-width: 100%;}



.topMenu ul li.on .desc span{color: #fb7400;font-size:1em;}
.topMenu ul li.on .titleLogo{opacity: 1;}

@keyframes iconBounce {from {top: -60px;}to {top: -40px;}}







/*footer*/
footer{position: relative;width: 100%;background: #251136;z-index:30; color: #A090BD;
	box-sizing: border-box;}
footer .foo_inner{position: relative;max-width: 1200px;margin: 0 auto;padding: 30px;}
footer .foo_inner .foo_top{padding:0px;}
footer .foo_inner .foo_top .foo_title{margin-bottom: 1em;}
footer .foo_inner .foo_top .foo_title p{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-bottom: 10px;}
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 .inner{background: #F2C029;padding: 0 1em .7em;}
.tel .inner h1{font-size: 1.2em;padding: 0;color: #F26E50;}

.tel .inner .arrow .up{position: relative;display: block;width: 100px;height: 30px;left: 50%;transform: translateX(-50%);}
.tel .inner .arrow .up:after{display: block;content:'\e944';font-family: 'xeicon';font-size: 2em;color: #F26E50;}
.tel .inner .arrow .down{position: relative;display: none;width: 100px;height: 30px;left: 50%;transform: translateX(-50%);}
.tel .inner .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}
.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 = Tablets, Ipads (portrait),
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(세로),
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) {
.progress .next{transform: translate(0,-50%);}
.progress .prev{transform: translate(0,-50%);}
.course .content{width: 100%;}
.course:after{display: none;}
.course:before{display: none;}
.sideMenu{right: 60px;}
footer .foo_inner{padding:30px 30px 100px 30px;}
footer .foot_sns{position: absolute;top: 30px;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) {
.progress .next{transform: translate(0,-50%);}
.progress .prev{transform: translate(0,-50%);}
.course .content{width: 100%;}
.course:after{display: none;}
.course:before{display: none;}
.sideMenu{right: 60px;}
footer .foo_inner{padding:30px 30px 100px 30px;}
footer .foot_sns{position: absolute;top: 30px;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) {
 header{z-index: 9999;}
.title h1{font-size: 2em;}
.progress .next{transform: translate(0,-50%);}
.progress .prev{transform: translate(0,-50%);}
.course .content{width: 100%;}
.course:after{display: none;}
.course:before{display: none;}
.sideMenu{display: none;}
footer .foo_inner{padding:30px 30px 100px 30px;}
footer .foot_sns{position: absolute;top: 30px;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) {
 header{z-index: 9999;}
.title h1{font-size: 2em;}
.progress .next{transform: translate(0,-50%);}
.progress .prev{transform: translate(0,-50%);}
.course .content{width: 100%;}
.course:after{display: none;}
.course:before{display: none;}
.sideMenu{display: none;}

/*footer .foot_sns{top: 5px;right: 50%;transform: translate(50%,50%);}*/
footer .foot_sns{top: 10px;right: 44%;transform: translate(44%,50%);}
footer .foo_inner{padding:30px;}
footer .foot_sns ul{width: 180px;}
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:20px;}
footer .foo_inner .foo_top .foo_title{text-align: center;margin: 1em 0 .5em 0;}
footer .foo_inner .foo_content .foot_tel{font-size: 2em;margin-bottom: .2em;}
footer .foot_logo{top: 145px;width: 100px;}
footer .foo_inner .representative{font-size: 0.8em;text-align: center;margin: 0.5em 0 .5em 0;padding-top: 2.5em;}
}