@charset "UTF-8";

body{background:#f6f4f9; overflow-x:hidden;}

header{position:fixed; top:0; left:0; width:100%; height:6rem; background:#fff; box-shadow:0 5px 25px rgba(0, 0, 0, 0.15); z-index:100; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
header a.logo{position:relative; display:block; width:7rem; height:100%; margin-left:2rem;}
header a.logo img{position:absolute; top:50%; left:0; transform:translateY(-50%); display:block; width:100%; height:auto;}
header nav{position:absolute; top:0; left:50%; transform:translateX(-50%); text-align:center;}
header nav ul{display:flex; align-items:center;}
header nav ul li{display:inline-block;}
header nav ul li a{display:flex; height:6rem; padding:0 1.5rem; font-size:1.5rem; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s; white-space: normal; word-break: keep-all; align-items:center;}
header nav ul li a:hover{font-family:"NotoKr_M"; color:#333;}
header div.lang{position:absolute; top:50%; left:10rem; transform:translateY(-50%); width:6rem;}
header div.lang div.sel-wrap{border-radius:5px;}
header div.lang div.sel-wrap select:focus{border:none;}
header a.mo-btn{display:none;}
header div.member{position:absolute; top:0; right:0; width:22rem; height:6rem; padding:1.125rem 0 1.125rem 5.5rem; background:#5a85fc; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
header div.member:before{content:""; position:absolute; top:50%; left:1.5rem; transform:translateY(-50%); display:inline-block; width:3rem; height:3rem; border:2px solid #fff; border-radius:50%; background:url("../img/user.svg") center / 50% auto no-repeat;}
header div.member div.user{padding-right:0.5rem; color:#fff; font-family:"NotoKr_L";}
header div.member div.user.before{font-size:0.8rem;}
header div.member div.user span.name{font-size:1.125rem; font-family:"NotoKr_M";}
header div.member ul{margin-top:0.25rem;}
header div.member ul li{display:inline-block; margin-right:0.8rem;}
header div.member ul li:last-child{margin-right:0;}
header div.member ul li a{display:inline-block; padding-bottom:0.2rem; border-bottom:1px solid rgba(255, 255, 255, 0.4); color:rgba(255, 255, 255, 0.5); font-size:0.9rem; font-family:"Montserrat_R"; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
header div.member ul li a:hover{color:#fff; border-bottom-color:#fff;}
header.on{height:5rem;}
header.on div.member{height:5rem; padding:0.8rem 0 0.8rem 5.5rem}
header.on nav ul li a{height:5rem;}

div.main-wrap{width:100%; height:auto; margin-top:6rem; padding:3rem;}
div.main-wrap > div.left{float:left; width:65%;}
div.main-wrap > div.right{float:right; width:32%;}
div.main-wrap section[class^="sect"]{width:100%; height:auto; padding:2.5rem; margin-bottom:3rem; border-radius:1rem; background:#fff; box-shadow:0 5px 30px rgba(0, 0, 0, 0.15);}
div.main-wrap section[class^="sect"] h1.sect-tit{font-size:1.75rem; font-family:"NotoKr_B";}
div.main-wrap section[class^="sect"] div.tit{position:relative; margin-bottom:1.5rem;}
div.main-wrap section[class^="sect"] div.tit a.more{position:absolute; top:0; right:0; display:inline-block; font-size:1.125rem; font-family:"Montserrat_M";}
div.main-wrap section[class^="sect"] div.tit a.more:after{content:""; display:inline-block; width:2rem; height:2rem; margin-left:0.8rem; border-radius:0.5rem; background:#5a85fc url("../img/more_arrow.svg") center / 50% auto no-repeat; vertical-align:middle; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
div.main-wrap section[class^="sect"] div.tit a.more:hover:after{transform:translateX(8px);}
div.main-wrap section[class^="sect"] div.cont{width:100%; height:auto;}
div.main-wrap section[class^="sect"] div.cont ul.list4 > li{float:left; width:22%; height:auto; margin-right:4%;}
div.main-wrap section[class^="sect"] div.cont ul.list4 > li:last-child{margin-right:0;}
div.main-wrap section[class^="sect"] div.cont ul.list4 > li a{display:block; width:100%; height:14rem; padding:2rem; border:1px solid #ccc; border-radius:1rem; text-align:center; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
div.main-wrap section[class^="sect"] div.cont ul.list4 > li a div.course-tit{font-size:1.375rem; word-break:keep-all; font-family:"NotoKr_B"; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
div.main-wrap section[class^="sect"] div.cont ul.list4 > li a:hover{background:#5a85fc; border:1px solid #5a85fc; box-shadow:0 15px 35px rgba(0, 0, 0, 0.45);}
div.main-wrap section[class^="sect"] div.cont ul.list4 > li a:hover div.course-tit{color:#fff;}

div.main-wrap section.sect01 div.cont ul.list4 > li a span.more{display:inline-block; margin-top:3.5rem; padding-bottom:0.3rem; border-bottom:1px solid #5a85fc; font-size:1.125rem; color:#5a85fc; font-family:"Montserrat_M"; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
div.main-wrap section.sect01 div.cont ul.list4 > li a span.more:after{content:""; display:inline-block; width:0; height:0.9rem; background:url("../img/more_arrow.svg") center / cover no-repeat; vertical-align:middle; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
div.main-wrap section.sect01 div.cont ul.list4 > li a:hover span.more{color:#fff; border-color:#fff;}
div.main-wrap section.sect01 div.cont ul.list4 > li a:hover span.more:after{width:0.9rem; margin-left:0.5rem;}

div.main-wrap section.sect02{margin-bottom:0;}
div.main-wrap section.sect02 div.cont ul.list4 > li a div.state{margin-top:0.5rem;}
div.main-wrap section.sect02 div.cont ul.list4 > li a div.state ul li{display:block; width:100%; text-align:center; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
div.main-wrap section.sect02 div.cont ul.list4 > li.grade a div.state ul li{height:2.5rem; line-height:2.5rem; margin-bottom:0.3rem; border-radius:0.5rem; background:rgba(90, 133, 252, 0.1); color:#5a85fc;}
div.main-wrap section.sect02 div.cont ul.list4 > li.grade a div.state ul li:last-child{margin-bottom:0;}
div.main-wrap section.sect02 div.cont ul.list4 > li.evaluation a div.state ul li{height:5.3rem; line-height:5.3rem; border-radius:0.8rem; background:rgba(39, 204, 125, 0.1); color:#27cc7d;}
div.main-wrap section.sect02 div.cont ul.list4 > li.evaluation a:hover{background:#27cc7d; border:1px solid #27cc7d;}
div.main-wrap section.sect02 div.cont ul.list4 > li a:hover div.state ul li{background:rgba(255, 255, 255, 0.1); color:#fff;}
div.main-wrap section.sect02 div.cont ul.list4 > li.evaluation a:hover div.state ul li{background:rgba(255, 255, 255, 0.15);}

div.main-wrap section.sect03 div.cont div.ym{position:relative; margin-bottom:1rem; text-align:center;}
div.main-wrap section.sect03 div.cont div.ym a.arrow{position:absolute; top:0; display:block; width:2.5rem; height:2.5rem; background:#f0f0f0; border-radius:50%;}
div.main-wrap section.sect03 div.cont div.ym a.arrow img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:block; width:40%; height:auto;}
div.main-wrap section.sect03 div.cont div.ym a.arrow.left{left:0;}
div.main-wrap section.sect03 div.cont div.ym a.arrow.left img{transform:translate(-50%, -50%) rotate(180deg);}
div.main-wrap section.sect03 div.cont div.ym a.arrow.right{right:0;}
div.main-wrap section.sect03 div.cont div.ym span.tit{height:2.5rem; line-height:2.5rem; color:#5a85fc; font-size:1.75rem; font-family:"Montserrat_SB";}
div.main-wrap section.sect03 div.cont table.calendar{font-size:0.9rem;}
div.main-wrap section.sect03 div.cont table.calendar th,
div.main-wrap section.sect03 div.cont table.calendar td{border:0; text-align:center;}
div.main-wrap section.sect03 div.cont table.calendar th{background:#f5f5f5; font-family:"Montserrat_SB";}
div.main-wrap section.sect03 div.cont table.calendar td{padding:0.3rem; font-family:"Montserrat_R";}
div.main-wrap section.sect03 div.cont table.calendar td a{display:inline-block; width:2.25rem; height:2.25rem; line-height:2.25rem; border-radius:50%;}
div.main-wrap section.sect03 div.cont table.calendar td a.on{background:#5a85fc; color:#fff; font-family:"Montserrat_SB";}
div.main-wrap section.sect03 div.cont div.cal-list{width:100%; height:auto; margin-top:1rem; padding-top:1rem; border-top:1px solid #ccc;}
div.main-wrap section.sect03 div.cont div.cal-list ul li{display:flex; justify-content:space-between;}
div.main-wrap section.sect03 div.cont div.cal-list ul li a{display:block; width:100%; height:auto;}
div.main-wrap section.sect03 div.cont div.cal-list ul li a > span.tit{float:left; width:70%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
div.main-wrap section.sect03 div.cont div.cal-list ul li a > span.date{float:right;}
div.main-wrap section.sect03 div.cont div.cal-list ul li a:hover > span{font-weight:bold;}

div.main-wrap section.sect04{padding:0; margin-bottom:0; background:none; border-radius:0; box-shadow:none;}
div.main-wrap section.sect04 a{display:block; width:47%; height:7rem; line-height:7rem; border-radius:1rem; text-align:center; color:#fff; font-size:1.5rem; box-shadow:0 5px 30px rgba(0, 0, 0, 0.3); -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
div.main-wrap section.sect04 a img{display:inline-block; width:2.25rem; height:auto; margin-right:0.25rem; vertical-align:middle;}
div.main-wrap section.sect04 a.homepage{float:left; background:#5a85fc;}
div.main-wrap section.sect04 a.all-list{float:right; background:#27cc7d;}
div.main-wrap section.sect04 a:hover{transform:translateY(-8px);}

div.copy{border-top:1px solid #ddd; padding:1.5rem 0; text-align:center; font-size:0.9rem; color:#aaa; font-family:"Montserrat_R";}

a.btn-top{position:fixed; bottom:-5rem; right:1rem; display:block; width:5rem; height:5rem; line-height:5rem; border-radius:50%; background:#333; box-shadow:0 10px 30px rgba(0, 0, 0, 0.5); color:#fff; font-family:"Montserrat_M"; text-align:center; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
a.btn-top.on{bottom:1rem; z-index:99;}

@media screen and (max-width:1600px){
    
}

@media screen and (max-width:1440px){
	header nav ul li a{padding:0 1rem; font-size:1.25rem;}
	

	div.main-wrap{padding:2rem;}
	div.main-wrap > div.right{width:33%;}
	div.main-wrap section[class^="sect"]{padding:2rem; margin-bottom:2rem;}
	div.main-wrap section[class^="sect"] div.cont ul.list4 > li a{padding:2.25rem 1rem;}
	div.main-wrap section[class^="sect"] div.cont ul.list4 > li a div.course-tit{font-size:1.25rem;}
	div.main-wrap section.sect04{padding:0; margin-bottom:0;}
	div.main-wrap section.sect04 a{height:5.5rem; line-height:5.5rem;}
}

@media screen and (max-width:1366px){

}

@media screen and (max-width:1280px){
	header div.member{width:20rem;}
}

@media screen and (max-width:1200px){
	div.main-wrap > div.left,
	div.main-wrap > div.right{float:none; width:100%;}

	header{height:5rem;}
	header a.mo-btn{display:block; position:absolute; top:0; right:0; width:5rem; height:5rem; background:#5a85fc;}
	header a.mo-btn > span{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:block; width:2rem; height:3px; border-radius:5px; background:#fff; -webkit-transition:height 0.1s; -o-transition:height 0.1s; -ms-transition:height 0.1s; -moz-transition:height 0.1s; transition:height 0.1s;}
	header a.mo-btn > span:before,
	header a.mo-btn > span:after{content:""; position:absolute; left:50%; transform:translateX(-50%); display:block; width:100%; height:3px; border-radius:5px; background:#fff; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
	header a.mo-btn > span:before{top:-0.6rem;}
	header a.mo-btn > span:after{top:0.6rem;}
	header nav,
	header div.member{display:none;}
	header nav ul{display:block; align-items:unset;}
	header.on:before{content:""; position:fixed; top:5rem; left:0; display:block; width:100%; height:100vh; background:rgba(0, 0, 0, 0.5); z-index:-1;}
	header.on a.mo-btn > span{height:0;}
	header.on a.mo-btn > span:before{top:50%; transform:translate(-50%, -50%) rotate(45deg);}
	header.on a.mo-btn > span:after{top:50%; transform:translate(-50%, -50%) rotate(-45deg);}
	header.on nav{display:block; top:14rem; left:0; transform:none; width:100%; height:auto; background:#fff; box-shadow:0 15px 30px rgba(0, 0, 0, 0.3);}
	header.on div.member{display:block; top:5rem; right:auto; left:0; width:100%; height:9rem; padding:0; padding-top:4.5rem; text-align:center;}
	header.on div.member:before{top:1rem; left:50%; transform:translate(-50%, 0); width:2.5rem; height:2.5rem;}
	header.on nav{padding:0 1.5rem;}
	header.on nav ul li{display:block; width:100%;}
	header.on nav ul li a{display:block; width:100%; height:auto; line-height:normal; padding:1rem; border-bottom:1px solid #ccc; font-size:1.25rem;}
	header.on nav ul li:last-child a{border-bottom:0;}
	header.on nav ul li a:hover{font-family:"NotoKr_R";}
}

@media screen and (max-width:1024px){
	html{font-size:15px;}

	div.main-wrap{margin-top:5rem;}

	div.main-wrap section[class^="sect"] div.cont ul.list4 > li a{height:auto; padding:1.5rem;}
	div.main-wrap section.sect01 div.cont ul.list4 > li a span.more{margin-top:2rem;}
}

@media screen and (max-width:900px){
	div.main-wrap section[class^="sect"] div.cont ul.list4 > li{width:48%;}
	div.main-wrap section[class^="sect"] div.cont ul.list4 > li:nth-child(-n+2){margin-bottom:1.5rem;}
	div.main-wrap section[class^="sect"] div.cont ul.list4 > li:nth-child(2n){margin-right:0;}
}

@media screen and (max-width:768px){
    
}

@media screen and (max-width:480px){
	html{font-size:14px;}

	header a.logo{margin-left:1rem;}
	
	div.main-wrap{padding:1.5rem;}
	div.main-wrap section[class^="sect"]{padding:1.5rem;}
	div.main-wrap section[class^="sect"] h1.sect-tit{font-size:1.5rem;}
	div.main-wrap section[class^="sect"] div.tit a.more{font-size:1rem;}
	div.main-wrap section[class^="sect"] div.tit a.more:after{width:1.75rem; height:1.75rem; margin-left:0.3rem;}
	div.main-wrap section[class^="sect"] div.cont ul.list4 > li a{padding:1rem;}
	div.main-wrap section[class^="sect"] div.cont ul.list4 > li a div.course-tit{font-size:1.125rem;}
	
	div.main-wrap section.sect01 div.cont ul.list4 > li a span.more{font-size:1rem;}
	
	div.main-wrap section.sect02 div.cont ul.list4 > li.grade a div.state ul li{height:2rem; line-height:2rem;}
	div.main-wrap section.sect02 div.cont ul.list4 > li.evaluation a div.state ul li{height:4.3rem; line-height:4.3rem;}
	
	div.main-wrap section.sect03 div.cont div.ym span.tit{height:2rem; line-height:2rem; font-size:1.5rem;}
	div.main-wrap section.sect03 div.cont div.ym a.arrow{width:2rem; height:2rem;}
	div.main-wrap section.sect03 div.cont table.calendar th,
	div.main-wrap section.sect03 div.cont table.calendar td{padding:1rem 0.5rem}
	div.main-wrap section.sect03 div.cont table.calendar td a{width:2rem; height:2rem; line-height:2rem;}

	div.main-wrap section.sect04{padding:0;}
	div.main-wrap section.sect04 a{height:5rem; line-height:5rem; font-size:1.25rem;}
	div.main-wrap section.sect04 a img{width:1.75rem; transform:translateY(-2px);}
	
	div.copy{padding:1rem;}

	a.btn-top{width:4rem; height:4rem; line-height:4rem; box-shadow:0 5px 25px rgba(0, 0, 0, 0.5);}
}
	
    
@media screen and (max-width:425px){

}

@media screen and (max-width:375px){
	header a.logo{width:10rem;}  
	header div.lang{left:12rem;}
	header div.lang div.sel-wrap select{height:2.5rem; line-height:2.5rem;}

	div.main-wrap section.sect03 div.cont table.calendar td{padding:0.1rem;}
}

@media screen and (max-width:320px){
	html{font-size:13px;}
}