@charset "UTF-8";

body{position:relative; background:#f0f2f5; overflow-x:hidden;}
body:after{content:""; display:block; clear:both;}

.babge{padding:0.25rem 0.8rem; border-radius:50px; font-family:"NotoKr_M"; word-break:keep-all;}
.babge.waiting{background:#fef3c7; color:var(--color-main03);}
.babge.complete{background:#cefdf5; color:var(--color-main01);}

header{float:left; position:absolute; top:0; left:0; width:15%; height:100%; background:var(--color-main02); -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header a.logo{position:relative; display:block; width:100%; height:10rem;}
header a.logo img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:block; width:80%; height:auto;}
header a.logo img.m-logo{display:none;}
header nav{width:100%; height:auto;}
header nav > ul{padding:0 1rem;}
header nav > ul > li{display:block; margin-bottom:1rem;}
header nav > ul > li > div{position:relative; width:100%; height:3.2rem; line-height:3.2rem; padding:0 1.5rem; border:1px solid rgba(255, 255, 255, 0.8); border-radius:0.5rem; color:#fff; font-size:1.15rem; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header nav > ul > li > div.link{cursor:pointer;}
header nav > ul > li > div.link:after{content:""; position:absolute; top:50%; right:1.5rem; transform:translateY(-50%) rotate(-90deg); display:inline-block; width:1rem; height:1rem; background:url("../img/arrow_wh.svg") right center / 100% auto no-repeat; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header nav > ul > li > div.one a{display:block; color:#fff;}
header nav > ul > li > div:hover{background:rgba(255, 255, 255, 0.2);}
header nav > ul > li > div.one.active,
header nav > ul > li.open div.link{background:#fff; border-color:#fff; box-shadow:0 8px 30px rgba(0, 0, 0, 0.2); color:#053e4e; font-family:"NotoKr_B";}
header nav > ul > li > div.one.active a{color:#053e4e; font-family:"NotoKr_B";}
header nav > ul > li.open div.link:after{transform:translateY(-50%) rotate(0); background-image:url("../img/arrow_bk.svg");}
header nav > ul > li.default ul.submenu{display:block;}
header nav > ul > li ul.submenu{display:none; width:100%; height:auto; padding:1rem 1.5rem;}
header nav > ul > li ul.submenu li{margin-bottom:0.5rem;}
header nav > ul > li ul.submenu li a{position:relative; display:block; padding-left:1rem; color:#fff; font-size:1.05rem;}
header nav > ul > li ul.submenu li a:before{content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); display:inline-block; width:6px; height:1px; background:#fff;}
header nav > ul > li ul.submenu li.active a{font-weight:bold; text-decoration:underline;}
header.close{left:-15%;}
header a.h-btn{display:block; position:absolute; top:0; right:-3.5rem; width:3.5rem; height:3.5rem; background:var(--color-main02); border-top-right-radius:0.8rem; border-bottom-right-radius:0.8rem; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header a.h-btn span.line{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:inline-block; width:45%; height:0; border-radius:5px; background:#fff; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header a.h-btn span.line:before,
header a.h-btn span.line:after{content:""; position:absolute; top:50%; left:50%; display:inline-block; width:100%; height:3px; border-radius:5px; background:#fff; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
header a.h-btn span.line:before{transform:translate(-50%, -50%) rotate(45deg);}
header a.h-btn span.line:after{transform:translate(-50%, -50%) rotate(-45deg);}
header a.h-btn.close{box-shadow:2px 2px 20px rgba(0, 0, 0, 0.5);}
header a.h-btn.close span.line{height:3px;}
header a.h-btn.close span.line:before{top:-9px; transform:translateX(-50%) rotate(0);}
header a.h-btn.close span.line:after{top:9px; transform:translateX(-50%) rotate(0);}

div.page-wrap{float:right; width:85%; height:auto; padding:3% 3% 0; background:#f0f2f5; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
div.page-wrap > div.top{width:100%; height:auto; padding-bottom:1rem; margin-bottom:2rem; border-bottom:1px solid #d0d0d0;}
div.page-wrap > div.top a.top-link{display:inline-block; width:auto; height:2.5rem; line-height:2.5rem; padding:0 1.25rem; border:1px solid #333; border-radius:1.5rem; background:#fff; font-size:0.9rem; font-family:"Montserrat_M";}
div.page-wrap > div.top div.left{float:left;}
div.page-wrap > div.top div.left a.top-link.home:before{content:""; display:inline-block; width:1rem; height:1rem; transform:translateY(2px); margin-right:0.3rem; background:url("../img/top_home.svg") center / cover no-repeat;}
div.page-wrap > div.top div.right{float:right;}
div.page-wrap > div.top div.right ul{display:inline-block;}
div.page-wrap > div.top div.right ul li{display:inline-block; font-size:1rem;}
div.page-wrap > div.top div.right ul.r01 li.user:after{content:""; display:inline-block; width:1px; height:13px; margin:0 1rem; background:#d0d0d0;}
div.page-wrap > div.top div.right ul.r01 li.user span.name{display:inline-block; font-family:"NotoKr_B";}
div.page-wrap > div.top div.right ul.r01 li.user span.name:before{content:""; display:inline-block; width:1.125rem; height:1.125rem; margin-right:0.5rem; transform:translateY(2px); background:url("../img/top_user.svg") center / cover no-repeat;}
div.page-wrap > div.top div.right ul.r01 li.session span.time:before{content:""; display:inline-block; width:1.125rem; height:1.125rem; margin-right:0.5rem; transform:translateY(3px); background:url("../img/top_session.svg") center / cover no-repeat;}
div.page-wrap > div.top div.right ul.r01 li.session > a{display:inline-block; width:4rem; height:2rem; line-height:2rem; margin-left:0.5rem; background:#fff; text-align:center; color:#333; box-shadow:0 0 5px rgba(0, 0, 0, 0.2);}
div.page-wrap > div.top div.right ul.r02{margin:0 0.25rem 0 2rem;}
div.page-wrap > div.top div.right ul.r03{margin-left:2rem;}
div.page-wrap.close{width:100%;}



div.main-wrap{width:100%; height:auto;}
div.main-wrap section[class^="sect"]{min-height:26rem; padding:2.5rem; margin-bottom:3rem; border-radius:1.5rem; background:#fff; box-shadow:0 5px 30px rgba(0, 0, 0, 0.2);}
div.main-wrap section[class^="sect"] div.sect-top{width:100%; height:auto; margin-bottom:1rem;}
div.main-wrap section[class^="sect"] div.sect-top h1.sect-tit{float:left; font-size:1.5rem; font-family:"NotoKr_B";}
div.main-wrap section[class^="sect"] div.sect-top a.sect-more{float:right; display:inline-block; width:2rem; height:2rem; border:1px solid #ccc; border-radius:0.3rem; background:url("../img/more_plus.svg") center / 1rem auto no-repeat; -webkit-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
div.main-wrap section[class^="sect"] div.sect-top a.sect-more:hover{border-color:#333;}
div.main-wrap section.sect01,
div.main-wrap section.sect03{float:left; width:65%;}
div.main-wrap section.sect02,
div.main-wrap section.sect04{float:right; width:32%;}
div.main-wrap section.sect05{float:left; margin-bottom:0; width:100%;}

div.main-wrap section.sect01 div.cont div.haksa-header{padding:1rem 1.5rem; border-radius:1rem; display:flex; align-items:center; justify-content:space-between; background:var(--color-main02);}
div.main-wrap section.sect01 div.cont div.haksa-header div.left{display:flex; align-items:center; gap:2rem;}
div.main-wrap section.sect01 div.cont div.haksa-header div.left p{color:#fff; position:relative;}
div.main-wrap section.sect01 div.cont div.haksa-header div.left p::before{content:''; position:absolute; right:-1rem; top:50%; transform:translateY(-50%); width:1px; height:80%; background:#fff; opacity:.5;}
div.main-wrap section.sect01 div.cont div.haksa-header div.left p:last-child::before{display:none;}
div.main-wrap section.sect01 div.cont div.haksa-header div.left p.name{font-size:1.25rem; font-family:"NotoKr_B";}
div.main-wrap section.sect01 div.cont div.haksa-header div.left p.student-inf{border:1px solid rgba(255,255,255,.5); border-radius:50px; padding:0.25rem 1rem;}
div.main-wrap section.sect01 div.cont div.haksa-header div.left p.student-inf.semester{background:var(--color-main01); border-color:var(--color-main01); font-family:"NotoKr_M";}
div.main-wrap section.sect01 div.cont div.haksa-header div.right p{color:rgba(255,255,255,.6);}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap{display:grid; grid-template-columns: repeat(5, 1fr); gap:1.25rem; margin-top:1.5rem;}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card{padding:1.25rem; border:1px solid #ddd; border-radius:0.5rem; text-align:center;}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card.card01{background:#F9FAFB; border-top:4px solid var(--color-sub03);}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card.card02{background:#F0FAF9; border-top:4px solid var(--color-main01);}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card.card03{background:#F8F4FF; border-top:4px solid var(--color-main02);}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card.card04{background:#FFFCF0; border-top:4px solid var(--color-main03);}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card.card05{background:#F0FBFF; border-top:4px solid var(--color-sub02);}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card span.hj-lab{color:var(--color-gray700); display:inline-block; margin-bottom:0.25rem; word-break:keep-all;}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card div.hj-value{font-size:0.85rem; font-family:"NotoKr_M";}
div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card div.hj-value span.num{font-size:1.5rem; font-family:"Montserrat_B";}
div.main-wrap section.sect01 div.cont div.progress-wrap{margin-top:2rem;}
div.main-wrap section.sect01 div.cont div.progress-wrap div.progress-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;}
div.main-wrap section.sect01 div.cont div.progress-wrap div.progress-header p{font-family:"NotoKr_B"; font-size:1.125rem;}
div.main-wrap section.sect01 div.cont div.progress-wrap div.progress-header span{color:var(--color-gray600);}
div.main-wrap section.sect01 div.cont div.progress-wrap div.progress-bar{width:100%; height:1rem; background:var(--color-gray300); border-radius:50px; overflow:hidden; display:flex;}
div.main-wrap section.sect01 div.cont div.progress-wrap div.progress-bar span.pg{display: block; height: 100%; width: auto;}
div.main-wrap section.sect01 div.cont div.progress-wrap div.progress-bar span.pg.p01{background:var(--color-main01);}
div.main-wrap section.sect01 div.cont div.progress-wrap div.progress-bar span.pg.p02{background:var(--color-main02);}
div.main-wrap section.sect01 div.cont div.progress-wrap div.pg-lab-wrap{display:flex; gap:1rem; margin-top:0.5rem;}
div.main-wrap section.sect01 div.cont div.progress-wrap div.pg-lab-wrap p.pg-label{position:relative; padding-left:1.5rem;}
div.main-wrap section.sect01 div.cont div.progress-wrap div.pg-lab-wrap p.pg-label::before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1rem; height:1rem; border-radius:2px;}
div.main-wrap section.sect01 div.cont div.progress-wrap div.pg-lab-wrap p.pg-label.pg01::before{background:var(--color-main01);}
div.main-wrap section.sect01 div.cont div.progress-wrap div.pg-lab-wrap p.pg-label.pg02::before{background:var(--color-main02);}
div.main-wrap section.sect01 div.cont div.progress-wrap div.pg-lab-wrap p.pg-label.pg03::before{background:var(--color-gray300);}

div.main-wrap section.sect05 div.cont div.left{float:left; width:48%;}
div.main-wrap section.sect05 div.cont div.left div.ym{position:relative; margin-bottom:1rem; text-align:center;}
div.main-wrap section.sect05 div.cont div.left div.ym a.arrow{position:absolute; top:0; display:block; width:2.5rem; height:2.5rem;}
div.main-wrap section.sect05 div.cont div.left div.ym a.arrow img{position:absolute; top:50%; left:50%; display:block; width:40%; height:auto;}
div.main-wrap section.sect05 div.cont div.left div.ym a.arrow.left{left:0;}
div.main-wrap section.sect05 div.cont div.left div.ym a.arrow.left img{transform:translate(-50%, -50%) rotate(90deg);}
div.main-wrap section.sect05 div.cont div.left div.ym a.arrow.right{right:0;}
div.main-wrap section.sect05 div.cont div.left div.ym a.arrow.right img{transform:translate(-50%, -50%) rotate(-90deg);}
div.main-wrap section.sect05 div.cont div.left div.ym span.tit{display:inline-block; height:2.5rem; line-height:2.5rem; color:var(--color-main02); font-size:1.25rem; font-family:"Montserrat_SB";}
div.main-wrap section.sect05 div.cont div.left table.calendar{font-size:0.9rem;}
div.main-wrap section.sect05 div.cont div.left table.calendar th,
div.main-wrap section.sect05 div.cont div.left table.calendar td{border:0; text-align:center;}
div.main-wrap section.sect05 div.cont div.left table.calendar th{padding:0; font-family:"Montserrat_SB";}
div.main-wrap section.sect05 div.cont div.left table.calendar td{padding:0.3rem; font-family:"Montserrat_R";}
div.main-wrap section.sect05 div.cont div.left table.calendar td a{display:inline-block; width:2rem; height:2rem; line-height:2rem; border-radius:50%;}
div.main-wrap section.sect05 div.cont div.left table.calendar td a.on{background:var(--color-main01); color:#fff; font-family:"Montserrat_SB";}
div.main-wrap section.sect05 div.cont div.right{float:right; width:48%; height:17rem;}
div.main-wrap section.sect05 div.cont div.right div.cal-list{width:100%; height:auto;}
div.main-wrap section.sect05 div.cont div.right div.cal-list ul li{margin-bottom:0.75rem; padding-bottom:0.75rem; border-bottom:1px solid #ddd;}
div.main-wrap section.sect05 div.cont div.right div.cal-list ul li a{display:block;}
div.main-wrap section.sect05 div.cont div.right div.cal-list ul li a > span{display:block;}
div.main-wrap section.sect05 div.cont div.right div.cal-list ul li a > span.date{font-size:1.125rem; font-family:"Montserrat_M";}
div.main-wrap section.sect05 div.cont div.right div.cal-list ul li a > span.cont{margin-top:0.25rem; color:#aaa;}

div.main-wrap section.sect02 div.cont ul li a{display:block;}
div.main-wrap section.sect02 div.cont ul li a span.tit{float:left; width:65%; font-family:"NotoKr_B"; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
div.main-wrap section.sect02 div.cont ul li a span.date{float:right; width:30%; text-align:right;}
div.main-wrap section.sect02 div.cont ul li.first{padding:0 0 1rem; margin-bottom:1rem; border-bottom:1px solid #ddd;}
div.main-wrap section.sect02 div.cont ul li.first:before{display:none;}
div.main-wrap section.sect02 div.cont ul li.first a > span{display:block;}
div.main-wrap section.sect02 div.cont ul li.first a span.tit{float:none; width:100%;}
div.main-wrap section.sect02 div.cont ul li.first a span.det{width:100%; height:4rem; margin:0.75rem 0; overflow:hidden; color:#aaa;}
div.main-wrap section.sect02 div.cont ul li.first a span.date{float:none; text-align:left; color:#aaa;}

div.main-wrap section.sect03 div.cont{}
div.main-wrap section.sect03 div.sect-top .tit-badge{background:var(--color-gray200); color:var(--color-gray700); font-size:1rem; font-family:"NotoKr_M"; padding:0.4rem 1rem; border-radius:50px; margin-left:0.5rem; display:inline-block;}

div.main-wrap section.sect04 div.cont ul li{float:left; width:48%; margin-bottom:1rem;}
div.main-wrap section.sect04 div.cont ul li:nth-child(even){float:right;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(5),
div.main-wrap section.sect04 div.cont ul li:nth-of-type(6),
div.main-wrap section.sect04 div.cont ul li:nth-of-type(7),
div.main-wrap section.sect04 div.cont ul li:nth-of-type(8){margin-bottom:0;}
div.main-wrap section.sect04 div.cont ul li a{position:relative; display:inline-block; width:100%; height:3.75rem; line-height:3.75rem; padding-left:3.5rem; border:1px solid #ddd; border-radius:0.5rem; font-family:"NotoKr_M"; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(2) a,
div.main-wrap section.sect04 div.cont ul li:nth-of-type(6) a{line-height:normal; padding:0.5rem 0 0.5rem 3.5rem;}
/* google + MS는 한 줄 서비스명이므로 두 줄 서비스와 동일한 padding을 사용하면 위로 떠 보인다. */
div.main-wrap section.sect04 div.cont ul li:nth-of-type(6) a{display:flex; align-items:center; line-height:normal; padding-top:0; padding-bottom:0;}
div.main-wrap section.sect04 div.cont ul li a:before{content:""; position:absolute; top:50%; left:1.5rem; transform:translateY(-50%); display:inline-block; width:1.5rem; height:1.5rem; vertical-align:middle;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(1) a:before{background:url("../img/quick01.svg") center / cover no-repeat;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(2) a:before{background:url("../img/quick02.svg") center / cover no-repeat;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(3) a:before{background:url("../img/quick03.svg") center / cover no-repeat;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(4) a:before{background:url("../img/quick04.svg") center / cover no-repeat;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(5) a:before{background:url("../img/quick05.svg") center / cover no-repeat;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(6) a:before{background:url("../img/quick06.svg") center / cover no-repeat;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(7) a:before{background:url("../img/quick07.svg") center / cover no-repeat;}
div.main-wrap section.sect04 div.cont ul li:nth-of-type(8) a:before{background:url("../img/quick08.svg") center / cover no-repeat;}
div.main-wrap section.sect04 div.cont ul li a:hover{border-color:#333; box-shadow:0 5px 25px rgba(0, 0, 0, 0.2);}

div.copy{width:100%; height:auto; padding:3rem 0 1.5rem; text-align:center; color:#aaa; font-size:0.8rem; 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){
	div.main-wrap section[class^="sect"]{margin-bottom:2rem;}

	div.main-wrap section.sect01,
	div.main-wrap section.sect03{width:60%;}
    div.main-wrap section.sect02,
	div.main-wrap section.sect04{width:37%;}
}

@media screen and (max-width:1440px){
	header nav > ul > li > div{padding:0 1rem;}
	header nav > ul > li > div.link:after{right:1rem;}
	header nav > ul > li ul.submenu{padding:1rem;}

	div.main-wrap section.sect01 div.cont div.haksa-header{padding:0.8rem 1.25rem;}
	div.main-wrap section.sect01 div.cont div.haksa-header div.left{gap:1rem;}
	div.main-wrap section.sect01 div.cont div.haksa-header div.left p::before{right:-0.5rem;}
	div.main-wrap section.sect01 div.cont div.haksa-header div.left p.student-inf{padding:0.25rem 0.8rem;}
	div.main-wrap section.sect01 div.cont div.hakjum-card-wrap{gap:1rem;}
	div.main-wrap section.sect01 div.cont div.hakjum-card-wrap div.hakjum-card{padding:1.25rem 1rem;}
}

@media screen and (max-width:1366px){
	div.main-wrap section[class^="sect"]{padding:2rem;}

	div.main-wrap section.sect03 div.cont ul.list3 > li div.course-con a{padding:1.25rem 1rem;}
	
	div.main-wrap section.sect04 div.cont ul li a,
	div.main-wrap section.sect04 div.cont ul li:nth-of-type(2) a{padding-left:3rem;}
	div.main-wrap section.sect04 div.cont ul li a:before{left:1rem;}
}

@media screen and (max-width:1280px){
	header{width:20%;}
	header a.h-btn{right:-3rem; width:3rem; height:3rem;}
	header.close{left:-20%;}
	div.page-wrap{width:80%;}
	
	div.main-wrap section[class^="sect"]{float:none; width:100%;}
}

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

}

@media screen and (max-width:1024px){
	/* html{font-size:15px;} */
	
	header{position:fixed; width:100%; height:5rem; box-shadow:0 5px 30px rgba(0, 0, 0, 0.4); z-index:100;}
	header nav{display:none;}
	header a.logo{width:8rem; height:100%; margin-left:3%;}
	header a.logo img{width:100%;}
	header a.logo img.p-logo{display:none;}
	header a.logo img.m-logo{display:block;}
	header a.h-btn{right:0; width:5rem; height:5rem;}
	header a.h-btn.close{box-shadow:none;}
	header.close{left:0;}
	header.close: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 nav{position:absolute; top:12rem; left:0; background:#fff;}
	header.close nav{display:block; height:100vh; overflow-y:auto;}
	header.close nav > ul > li > div{border:1px solid #ccc; color:#333;}
	header.close nav > ul > li > div.link:after{background-image:url("../img/arrow_bk.svg");}
	header.close nav > ul > li > div.one a{color:#333;}
	header.close nav > ul > li ul.submenu li a{color:#333;}
	header.close nav > ul > li ul.submenu li a:before{background:#333;}
	header.close nav > ul > li > div.one.active,
	header.close nav > ul > li.open div.link{border-color:#333; color:#333; box-shadow:0 3px 30px rgb(0 0 0 / 20%);}
	
	div.page-wrap{float:none; width:100%; margin-top:5rem;}
	div.page-wrap > div.top{display:none;}
	div.page-wrap > div.top.on{position:fixed; top:5rem; left:0; display:block; height:7rem; margin-bottom:0; padding:1rem; border-top:1px solid rgba(255, 255, 255, 0.2); border-bottom:0; background:#fff; text-align:center; z-index:100;}
	div.page-wrap > div.top.on div.left,
	div.page-wrap > div.top.on div.right{float:none; display:inline-block;}
	div.page-wrap > div.top div.right ul{width:100%;}
	div.page-wrap > div.top div.right ul.r01{position:absolute; top:1rem; left:50%; transform:translateX(-50%);}
	div.page-wrap > div.top div.right ul.r02{margin:0;}
	div.page-wrap > div.top.on div.left a,
	div.page-wrap > div.top div.right ul.r02 li{margin-top:2.5rem;}
	div.page-wrap > div.top div.right ul.r01 li.session > a{background:#f5f5f5;}
	
	/* id찾기, pw임시발급 헤더 없는 페이지 */
	/* div.page-wrap.no-header{margin-top:0;}
	div.page-wrap.no-header > div.top{display: block;}
	div.page-wrap.no-header > div.top div.right ul{width: unset;}
	div.page-wrap.no-header > div.top div.right ul.r01{position:unset; transform: unset; width: unset;}
	div.page-wrap.no-header > div.top div.right ul.r02{margin: 0 0.25rem 0 2rem;}
	div.page-wrap.no-header > div.top.on div.left a, div.page-wrap > div.top div.right ul.r02 li{margin-top: 0;} */
	div.page-wrap.no-header{margin-top:0;}
	div.page-wrap.no-header > div.top{position: relative; display: block; text-align: center; z-index: 100;}
	div.page-wrap.no-header > div.top div.left, div.page-wrap.no-header > div.top div.right{float: none; display: inline-block;}
	div.page-wrap.no-header > div.top div.right ul{width: 100%;}
	div.page-wrap.no-header > div.top div.right ul.r01{position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
	div.page-wrap.no-header > div.top div.right ul.r02{margin-top: 0;}
		
}

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

}

@media screen and (max-width:768px){
	div.main-wrap section[class^="sect"]{height:auto;}
    div.main-wrap section.sect03 div.cont ul.list3 > li{float:none; width:100%; margin-right:0; margin-bottom:4rem;}
	div.main-wrap section.sect03 div.cont ul.list3 > li:last-child{margin-bottom:0;}
	div.main-wrap section.sect03 div.cont ul.list3 > li div.course-con{min-height:auto;}
}

@media screen and (max-width:640px){
	div.page-wrap{padding:5% 5% 0;}

    div.page-wrap > div.top a.top-link{padding:0 1rem;}
	div.page-wrap > div.top div.right ul.r02 li{margin-top:1rem;}

	div.main-wrap section.sect01 div.cont div.haksa-header{flex-direction:column; row-gap:0.6rem;}
	div.main-wrap section.sect01 div.cont div.haksa-header div.left{flex-wrap:wrap; justify-content:center;}
	div.main-wrap section.sect01 div.cont div.haksa-header div.left p.name{font-size:1.125rem;}
    div.main-wrap section.sect01 div.cont div.haksa-header div.left p.student-inf{padding:0.25rem 0.625rem; font-size:0.85rem;}
	div.main-wrap section.sect01 div.cont div.haksa-header div.right p{font-size:0.85rem;}
	div.main-wrap section.sect01 div.cont div.hakjum-card-wrap{grid-template-columns:repeat(3, 1fr);}
	div.main-wrap section.sect01 div.cont div.progress-wrap div.progress-header span{font-size:0.85rem;}
	div.main-wrap section.sect01 div.cont div.progress-wrap div.pg-lab-wrap{font-size:0.85rem;}

	div.main-wrap section.sect05 div.cont div.left{float:none; width:100%;}
	div.main-wrap section.sect05 div.cont div.right{float:none; width:100%; margin-top:1rem; padding:1.5rem; background:#f5f5f5;}

	div.main-wrap section.sect02 div.cont ul li.first a span.det{height:3.9rem;}

}

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

	header{height:4.5rem;}
	header a.h-btn{width:4.5rem; height:4.5rem;}
	header.close nav{top:17.5rem;}

	div.page-wrap{margin-top:4.5rem;}
	div.page-wrap > div.top.on{top:4.5rem; height:13rem;}
	div.page-wrap > div.top.on div.left,
	div.page-wrap > div.top.on div.right{width:100%;}
	div.page-wrap > div.top a.top-link{padding:0 0.8rem; height:2rem; line-height:2rem; font-size:0.8rem;}
	div.page-wrap > div.top div.right ul.r01 li{width:100%;}
	div.page-wrap > div.top div.right ul.r01 li.user:after{display:none;}
	div.page-wrap > div.top div.right ul.r01 li.session{margin-top:0.5rem;}
	div.page-wrap > div.top div.right ul.r01 li.session > a{width:3rem; font-size:1rem;}
	div.page-wrap > div.top.on div.left a{margin-top:5rem;}
	div.page-wrap > div.top div.right ul.r02 li{margin-top:1rem;}

	div.main-wrap section[class^="sect"]:not(.sect04){margin-bottom:1.5rem;}
	div.main-wrap section[class^="sect"]{padding:1.5rem;}

	div.copy{padding:1.5rem 0;}

	a.btn-top{width:4rem; height:4rem; line-height:4rem;}

	div.main-wrap section.sect01 div.cont div.hakjum-card-wrap{grid-template-columns:repeat(2, 1fr);}
	div.main-wrap section.sect01 div.cont div.progress-wrap div.progress-header{flex-wrap:wrap;}

	div.main-wrap section.sect03 div.sect-top .tit-badge{font-size:0.85rem;}
}
	
    
@media screen and (max-width:425px){
    div.main-wrap section.sect03 div.sect-top .tit-badge{display:block; width:fit-content; margin-top:0.5rem; margin-left:0;}
}

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

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

/* AI NEXUS는 전용 AI 칩 아이콘을 사용해 기존 빠른서비스와 구분한다. */
/* 마지막 단독 카드도 앞 카드와 같은 간격을 유지해 빠른서비스 행 간격을 통일한다. */
div.main-wrap section.sect04 div.cont ul li.quick-ai-nexus{
	clear:both;
	margin-top:1rem;
}

div.main-wrap section.sect04 div.cont ul li.quick-ai-nexus a:before{
	background:url("../img/quick_ai_nexus.svg") center / cover no-repeat;
	width:1.65rem;
	height:1.65rem;
	left:1.4rem;
}