@charset "utf-8";
/* CSS Document */
#header{width:100%; height: 114px; background: url("/image/top/background-pattern.png"); position:fixed; top:0; left:0; z-index: 10; transition:all .5s; display:flex; align-items: center; justify-content: center; z-index: 30}
#header a{transition:all .5s;}
#header.on{width:100%; position:fixed; top:0; left:0;}
#header .inner{width:calc(100% - 40px); max-width:1280px; position:relative;}
#header .inner:after{content:""; display:block; clear:both;}
#header .inner .header-logo{display:block; width:174px; position:absolute; top:50%; left:0; transform: translate(0%,-50%); -webkit-transform:translate(0%,-50%)}
#header nav{max-width:600px; width:100%; position:absolute; top:50%; left:224px; transform: translate(0%,-50%); -webkit-transform:translate(0%,-50%)}
#header nav > ul{display:flex; justify-content: space-between; text-align-last: center;}
#header nav > ul > li.bmenu{height: 43px; line-height: 43px; font-size:1.125rem; font-weight: 500; position:relative;}
#header nav > ul > li.bmenu > a{color:#31323B;} 
#header nav > ul > li.bmenu > .dot{width:7px; height: 7px; border-radius: 50%; background-color: #445CB4; position:absolute; top:5px; left:50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transition:all .5s; opacity:0;}
#header nav > ul > li.bmenu.on > .dot{opacity: 1; top:-5px;}
#header nav > ul > li.bmenu.on > a{color:#445CB4;}
#header nav > ul li.smenu{font-size:1rem; font-weight: 400; padding:12px 10px; border-bottom:1px solid #7B8ED4;}
#header nav > ul li.smenu:last-child{border:none;}
#header nav > ul li.smenu > a{color:#C1CAEC;}
#header nav > ul li.smenu > a:hover{color:#fff;}
#header nav > ul > li > ul{position:absolute;  min-width:150px; left:50%; transform: translate(-50%,0); background-color: #445CB4; border-radius: 10px; border:1px solid #7B8ED4; opacity:0; display:none;}
#header nav > ul > li > ul > img{position:absolute; top:-10px; left:50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0);}
#header .login-wrap{position:absolute; top:50%; right:0; transform: translate(0%,-50%); -webkit-transform:translate(0%,-50%);  font-size:1rem; font-weight: 400; color:#fff; display: flex; justify-content: space-between; align-items: center; width:auto;}
#header .login-wrap > a{color:#93949C; font-size:0.875rem; font-weight: 500; display: flex; align-items: center; margin-right:15px;}
#header .login-wrap > a:hover{color:#445CB4;}
#header .login-wrap > a:last-child{margin:0;}
#header .login-wrap > a > img{display:block; vertical-align: middle; margin-right:5px;}
#header .login-wrap > .classroom{padding:7px 15px; border-radius: 25px; background-color:#6D44B4; display: flex; align-items: center; color:#fff; font-size:0.875rem; font-weight: 400; margin:0;}
#header .login-wrap > .classroom > img{margin-right:5px;}
#header .login-wrap > .classroom:hover{color:#fff;}
#header .arlim-wrap{width:20px; position:relative; margin:0 30px; cursor:pointer;}
#header .arlim-wrap > .reddot{width:5px; height: 5px; background-color:#ED4043; position:absolute; top:-5px; right:-5px; border-radius: 50%;}
#header .top-profile-wrap{display:flex; width:auto; align-items: center; cursor: pointer;}
#header .top-profile-wrap > .img-wrap{width:30px; height: 30px; background-color: #9270D8; display:flex; align-items: center; justify-content: center; border-radius: 50%;}
#header .top-profile-wrap > .img-wrap > img{width:calc(100% - 10px);}
#header .top-profile-wrap > .name{color:#000; margin:10px;}

#header .top-profile-content.off{display:none;}
#header .top-profile-content{position:absolute; top:77px; right:0; border-radius: 20px; background-color:#fff; width:272px; display:block; border:1px solid #d6d6d6;}
#header .top-profile-content > .cont-wrap{padding:20px; box-sizing: border-box;}
#header .top-profile-content > .cont-wrap > .info{display:flex; align-items: center; margin-bottom:40px;}
#header .top-profile-content > .cont-wrap > .info > .image-wrap{width:43px; height: 43px; background-color:#9270D8; border-radius: 50%; display:flex; justify-content: center; align-items: center; margin-right:10px;}
#header .top-profile-content > .cont-wrap > .info > .image-wrap > img{width:calc(100% - 20px);}
#header .top-profile-content > .cont-wrap > .info > .name-wrap > p{color:#000; font-weight:500;}
#header .top-profile-content > .cont-wrap > .info > .name-wrap > a{font-size:12px; color:#838383; margin-top:5px;}
#header .top-profile-content > .cont-wrap > a.list{color:#000; font-size:1rem; font-weight: 500; margin-top:20px; width:100%; display:block;}
#header .top-profile-content > .hr{width:100%; height: 1px; background-color: #d6d6d6;}
#header .top-profile-content  .change{width:100%; display:flex; align-items: center; font-size:12px; color:#838383; margin-bottom:20px;}
#header .top-profile-content  .change > img{margin-left:5px;}
#header .top-profile-content .profile-list{margin-bottom:15px; display:flex; align-items: center;}
#header .top-profile-content .profile-list:last-child{margin-bottom:0;}
#header .top-profile-content .profile-list > .image-wrap{width:30px; height: 30px; background-color:#9270D8; border-radius: 50%; display:flex; justify-content: center; align-items: center; margin-right:10px;}
#header .top-profile-content .profile-list > .image-wrap > img{width:calc(100% - 10px);}
#header .top-profile-content .profile-list > p{font-size:14px; font-weight: 500; font-weight: 500;}

#header .arlim-cont-wrap.off{display:none;}
#header .arlim-cont-wrap{width:272px; height:336px; overflow-y: scroll;  border-radius: 20px; background-color: #fff; position:absolute; top:77px; right:0; display:block;  -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */border:1px solid #d6d6d6;}
#header .arlim-cont-wrap::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
#header .arlim-cont-wrap > .head{padding:20px 20px 15px 20px; font-size:14px; color:#000; font-weight: 500; box-sizing: border-box;}
#header .arlim-cont-wrap > .hr{width:100%; height: 1px; background-color: #d6d6d6;}
#header .arlim-cont-wrap > .arlim-list{padding:20px; border-bottom:1px solid #d6d6d6; box-sizing: border-box; display:block;}
#header .arlim-cont-wrap > .arlim-list:hover{background-color:#F1F1F1;}
#header .arlim-cont-wrap > .arlim-list:last-child{border:none;}
#header .arlim-cont-wrap > .arlim-list > .date{font-size:12px; color:#838383; margin-bottom:5px; width:100%;}
#header .arlim-cont-wrap > .arlim-list > .title{font-size:14px; color:#000; font-weight: 500; width:100%;}
#header .arlim-cont-wrap > .arlim-list.off > .date{color:#d6d6d6;}
#header .arlim-cont-wrap > .arlim-list.off > .title{color:#d6d6d6;}
#header .arlim-cont-wrap > p.empty-message{text-align: center; height: 284px; display:flex; align-items: center; justify-content: center;}

.m-menu-btn{float:right; cursor: pointer; position:relative; width:30px; height: 22px; margin:10.5px 0; display:none;}
.m-menu-btn > .line{width:100%; height: 2px; background-color: #000; position:absolute;}
.m-menu-btn > .line:nth-child(2){left:-10px; top:10px;}
.m-menu-btn > .line:nth-child(3){left:0; top:20px;}

.m-back{position:fixed; background-color: #445CB4; transition: all 1s; width:0; height:0; border-radius: 50%; top:-100vh; left:150%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); z-index: 30; overflow: hidden;}
.m-back.on{width:calc(100vh + 500px); height: calc(100vh + 500px); top:50%; left:50%; transition: all 1s;  transition: all 1s;}
.m-nav-wrap{position:fixed; top:0; left:0; width:100%; height: 100vh; z-index: 31; display:none; opacity:0;   }
.m-nav-wrap a{transition: all .5s;}
.m-nav-wrap > .inner-wrap{width:calc(100% - 40px); margin:0 auto;}
.m-nav-wrap .x-Btn{width:100%; padding:30px 0; display: flex; justify-content: center;}
.m-nav-wrap .x-Btn > svg{width:36px; cursor: pointer;}
.m-nav{margin:30px 0 40px 0;}
.m-nav-wrap .bmenu{font-size:1.875rem; font-weight: 600; width:100%; max-width:230px; display:flex; align-items: center; flex-wrap: wrap; justify-content: space-between; padding:15px 0; overflow:hidden; height: 26px; color:#C1CAEC; transition: all .5s; cursor: pointer;}
.m-nav-wrap .bmenu.on{transition: all .5s;}
.m-nav-wrap .bmenu.on > svg{transform: rotate(90deg); transition: all .5s;}
.m-nav-wrap .bmenu:hover{color:#fff;}
.m-nav-wrap .bmenu > svg{width:36px; transition: all .5s;}
.m-nav-wrap .bmenu > ul{margin-left:20px; margin-top:15px;}
.m-nav-wrap .smenu{font-size:1.5625rem; padding:5px 0; font-weight: 400; min-width:200px;}
.m-nav-wrap .smenu a{color:#C1CAEC;}
.m-nav-wrap a:hover{color:#fff;}
.m-nav-wrap .hr{width:100%; height: 1px; background-color:#677DCC;}
.m-nav-wrap .login-wrap{font-size:1.125rem; font-weight: 400; color:#fff; display: flex; justify-content: space-between; align-items: center; width:230px; margin:30px 0;}
.m-nav-wrap .login-wrap > a{color:#fff; display: flex; justify-content: space-between; align-items: center;}
.m-nav-wrap .login-wrap > a > img{margin-right:10px;}


.m-nav-wrap .login-wrap.on{display:flex; justify-content: space-between; width:100%; margin:0 auto; max-width:293px;}
.m-nav-wrap .login-wrap > .classroom{padding:7px 15px; border-radius: 25px; background-color:#6D44B4; display: flex; align-items: center; color:#fff; font-size:14px; font-weight: 400; margin:0; min-width:90px; box-sizing: border-box;}
.m-nav-wrap .login-wrap > .classroom > img{margin-right:5px;}
.m-nav-wrap .login-wrap > .classroom:hover{color:#fff;}
.m-nav-wrap .arlim-wrap{width:20px; position:relative;  cursor:pointer;}
.m-nav-wrap .arlim-wrap > img{width:100%;}
.m-nav-wrap .arlim-wrap > .reddot{width:5px; height: 5px; background-color:#ED4043; position:absolute; top:-5px; right:-5px; border-radius: 50%;}
.m-nav-wrap .top-profile-wrap{display:flex; width:auto; align-items: center; cursor: pointer;}
.m-nav-wrap .top-profile-wrap > .img-wrap{width:30px; height: 30px; background-color: #9270D8; display:flex; align-items: center; justify-content: center; border-radius: 50%;}
.m-nav-wrap .top-profile-wrap > .img-wrap > img{width:calc(100% - 10px);}
.m-nav-wrap .top-profile-wrap > .name{color:#fff; margin:10px; font-size:14px;}


.m-nav-wrap .m-arlim-cont-wrap.off{display:none;}
.m-nav-wrap .m-arlim-cont-wrap{width:100%; height:100vh; overflow-y: scroll;  border-radius: 0px; background-color: #fff; position:fixed; top:0px; left:0; display:block;  -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
.m-nav-wrap .m-arlim-cont-wrap::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
.m-nav-wrap .m-arlim-cont-wrap > .head{padding:20px 20px 15px 20px; font-size:14px; color:#000; font-weight: 500; box-sizing: border-box;}
.m-nav-wrap .m-arlim-cont-wrap > .hr{width:100%; height: 1px; background-color: #d6d6d6;}
.m-nav-wrap .m-arlim-cont-wrap > .arlim-list{padding:20px; border-bottom:1px solid #d6d6d6; box-sizing: border-box; display:block;}
.m-nav-wrap .m-arlim-cont-wrap > .arlim-list:hover{background-color:#F1F1F1;}
.m-nav-wrap .m-arlim-cont-wrap > .arlim-list:last-child{border:none;}
.m-nav-wrap .m-arlim-cont-wrap > .arlim-list > .date{font-size:12px; color:#838383; margin-bottom:5px; width:100%;}
.m-nav-wrap .m-arlim-cont-wrap > .arlim-list > .title{font-size:14px; color:#000; font-weight: 500; width:100%;}
.m-nav-wrap .m-arlim-cont-wrap > .arlim-list.off > .date{color:#d6d6d6;}
.m-nav-wrap .m-arlim-cont-wrap > .arlim-list.off > .title{color:#d6d6d6;}
.m-nav-wrap .m-arlim-cont-wrap > p.empty-message{text-align: center; height: 284px; display:flex; align-items: center; justify-content: center;}
.m-nav-wrap .m-arlim-cont-wrap .closeBtn{margin:20px auto; cursor:pointer; display:block; background-color: #fff;}

.m-nav-wrap .m-top-profile-content.off{display:none;}
.m-nav-wrap .m-top-profile-content{position:fixed; top:0px; right:0; border-radius: 0px; background-color:#fff; width:100%; height: 100vh; display:block; }
.m-nav-wrap .m-top-profile-content > .cont-wrap{padding:20px; box-sizing: border-box;}
.m-nav-wrap .m-top-profile-content > .cont-wrap > .info{display:flex; align-items: center; margin-bottom:40px;}
.m-nav-wrap .m-top-profile-content > .cont-wrap > .info > .image-wrap{width:43px; height: 43px; background-color:#9270D8; border-radius: 50%; display:flex; justify-content: center; align-items: center; margin-right:10px;}
.m-nav-wrap .m-top-profile-content > .cont-wrap > .info > .image-wrap > img{width:calc(100% - 20px);}
.m-nav-wrap .m-top-profile-content > .cont-wrap > .info > .name-wrap > p{color:#000; font-weight:500;}
.m-nav-wrap .m-top-profile-content > .cont-wrap > .info > .name-wrap > a{font-size:12px; color:#838383; margin-top:5px;}
.m-nav-wrap .m-top-profile-content > .cont-wrap > a.list{color:#000; font-size:16px; font-weight: 500; margin-top:20px; width:100%; display:block;}
.m-nav-wrap .m-top-profile-content > .hr{width:100%; height: 1px; background-color: #d6d6d6;}
.m-nav-wrap .m-top-profile-content  .change{width:100%; display:flex; align-items: center; font-size:12px; color:#838383; margin-bottom:20px;}
.m-nav-wrap .m-top-profile-content  .change > img{margin-left:5px;}
.m-nav-wrap .m-top-profile-content .profile-list{margin-bottom:15px; display:flex; align-items: center;}
.m-nav-wrap .m-top-profile-content .profile-list:last-child{margin-bottom:0;}
.m-nav-wrap .m-top-profile-content .profile-list > .image-wrap{width:30px; height: 30px; background-color:#9270D8; border-radius: 50%; display:flex; justify-content: center; align-items: center; margin-right:10px;}
.m-nav-wrap .m-top-profile-content .profile-list > .image-wrap > img{width:calc(100% - 10px);}
.m-nav-wrap .m-top-profile-content .profile-list > p{font-size:14px; font-weight: 500; font-weight: 500;}
.m-nav-wrap .m-top-profile-content .closeBtn{margin:20px auto; cursor:pointer; display:block; background-color: #fff;}

.subtop-wrap{width:100%; background-size:cover; background-position: center; height:440px; padding:50px 0; text-transform: uppercase; display:flex; align-items:flex-end; border-bottom-left-radius: 20%; border-bottom-right-radius: 20%;}
.subtop-wrap .inner-wrap{width:calc(100% - 60px); max-width:1280px; margin:0 auto; display:flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.subtop-wrap .inner-wrap .content-wrap{width:100%; max-width:390px;}
.subtop-wrap .inner-wrap .pageTitle-wrap{font-size:3.125rem; color:#fff; font-weight: 600; margin-top:30px; opacity:0}
.subtop-wrap .inner-wrap .content-wrap > ul{display:flex; align-items: center; width:100%; overflow-x: scroll;-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */}
.subtop-wrap .inner-wrap .content-wrap > ul::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/ opacity:0}
.subtop-wrap .inner-wrap .content-wrap > .hr{width:50px; height: 2px; background-color: #fff; margin:70px 0 30px 0; opacity:0}
.subtop-wrap .inner-wrap .content-wrap > p.message{font-size:1.25rem; color:#fff; opacity:0}
.subtop-wrap .inner-wrap .content-wrap > ul > li > a{color:#fff; font-family: 'Binggrae','Noto Sans KR', sans-serif; font-weight:400;}
.subtop-wrap .inner-wrap .content-wrap > ul > li{font-size:1rem; font-weight: 400; padding:5px 0; text-align: center;}
.subtop-wrap .inner-wrap .image-wrap{height: 100%; overflow: hidden;}
.subtop-wrap .inner-wrap .image-wrap > img{display:block; opacity:0}

.subpageTitle{width:100%; text-align: center; margin:11.875rem 0 6.25rem 0;}
.subpageTitle > h1{font-size:3.125rem; color:#445CB4; font-weight: 500; font-family: 'Binggrae','Noto Sans KR', sans-serif; font-weight: 600;}
.subpageTitle > img{margin:25px auto;}


img.ready{margin:100px auto; display:block;}
@media only screen and (max-width:1220px){
	#header nav{display:none;}
	#header .login-wrap{display:none;}
	.m-menu-btn{display:block;}
}

@media only screen and (max-width:950px){
	
	.subtop-wrap .inner-wrap .content-wrap{width:220px;}
	.subtop-wrap .inner-wrap .content-wrap > ul > li{font-size:14px; padding:3px 0;}
	.subtop-wrap .inner-wrap .content-wrap > .hr{width:35px; height: 1px; background-color: #fff; margin:50px 0 15px 0;}
	.subtop-wrap .inner-wrap .pageTitle-wrap{font-size:30px; color:#fff; font-weight: 600; margin-top:15px;}
	.subtop-wrap .inner-wrap .content-wrap > p.message{font-size:16px; color:#fff;}
	.subtop-wrap .inner-wrap .image-wrap > img{height:220px;}
	.subtop-wrap{height: 334px;}
	
}

@media only screen and (max-width:640px){
	.subtop-wrap{border-radius: 0;}
	.subtop-wrap .inner-wrap .content-wrap{width:100%;}
	.subtop-wrap .inner-wrap .content-wrap > ul > li{font-size:12px; padding:3px 0;}
	.subtop-wrap .inner-wrap .content-wrap > .hr{display:none;}
	.subtop-wrap .inner-wrap .pageTitle-wrap{font-size:30px; color:#fff; font-weight: 600; margin-top:5px;}
	.subtop-wrap .inner-wrap .content-wrap > p.message{display:none;}
	.subtop-wrap .inner-wrap .image-wrap{width:100%; justify-content: flex-start; margin-top:30px;}
	.subtop-wrap .inner-wrap .image-wrap > img{height:150px;}
	.subtop-wrap{height: 374px; padding:30px 0;}
}