@charset "utf-8";

/*
    mobile first
    :: 상단 띠 (로그인 영역)
*/
#top-tail{position: absolute; top: 0; right: 16px; width: 70px; height: 40px; display: flex; justify-content: flex-end; align-items: center; background-color: transparent; font-size: 14px; z-index: 2; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }
#top-tail .flex{display: flex; flex-wrap: wrap;}
#top-tail .notification{margin: 0; position: relative; height: 20px;}
#top-tail .notification .icon{background-image: url('https://static.edmclass.com/common/new_notificationIcon.svg'); background-repeat: no-repeat; background-size: 16px; background-position: left center; position: relative; padding: 0 0 4px 8px; height: 16px; min-width: 16px;}
#top-tail .notification .icon .number{display: none;}
#top-tail .notification.active{height: 24px;}
#top-tail .notification.active .icon .number{display: block; position: relative; height: 12px; border-radius: 999999px; background-color: #ED5B75; color: var(--n-white); display: flex; justify-content: center; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: -0.18px; line-height: 1; padding: 0 4px;}

#top-tail .userWrap{height: 40px; display: flex;}
#top-tail .userWrap .btn{border-radius: 3px; font-size: 14px; font-weight: 700; color: var(--n-info);}
#top-tail .userWrap .flex{align-items: center; height: 100%; flex-wrap: nowrap; width: 100%;}
/* #top-tail .userWrap .state .btn{border: 1px solid var(--s-color1);} */
#top-tail .userWrap .state .btn.logout{margin-left: 13px;}
#top-tail .userWrap .logoutWrap figure{background-image: url('https://static.edmclass.com/common/new_login-mo.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px; margin-right: 4px;}
#top-tail .userWrap .loginWrap{width: 100%;}
#top-tail .userWrap .loginWrap > .flex{justify-content: space-between;}
#top-tail .userWrap .loginWrap .userIcon{background-image: url('https://static.edmclass.com/common/new_mo_userIcon.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 26px; height: 26px; margin-right: 4px;}
#top-tail .userWrap .loginWrap figure{background-image: url('https://static.edmclass.com/common/new_logout-mo.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px; margin-right: 4px;}
#top-tail .userWrap .loginWrap .btn{width: auto;}
#top-tail .userWrap .state{display: none;}
#top-tail .userWrap .btn .txtWrap{display: none; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; font-weight: 700;}
#top-tail .userWrap .myClass{display: none; align-items: center; position: relative; margin-right: 49px; padding-left: 20px;}
#top-tail .userWrap .myClass::after{content: ''; position: absolute; right: -23px; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background-color: var(--s-color1);}
#top-tail .userWrap .myClass::before{content: ''; display: block; clear: both;}
#top-tail .userWrap .myClass figure{background-image: url('https://static.edmclass.com/common/new_myClass.svg'); background-position: left center; background-size: contain; width: 16px; height: 16px; float: left; margin-top: 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#top-tail .userWrap .myPage{display: none;}
#top-tail .userWrap .myPage figure{background-image: url('https://static.edmclass.com/common/new_myPage.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px;}


/* 알림 - 메시지 */
#noti-message{display: none; position: fixed; top: 40px; right: 0; border-radius: 5px; padding: 0; width: calc(100% - 16px); max-width: 328px; z-index: 0;}
#noti-message.active{display: block;}
#noti-message .message{width: 100%; max-width: 328px; box-shadow:var(--box-shadow3); border-radius: 12px; position: absolute; right: 8px; top: 8px; max-height: calc(100vh - 96px); background-color: var(--n-white); z-index: 2;}
#noti-message .message .closeBtn{position: absolute; right: 16px; top: 16px; width: 24px; height: 24px;  background-size: contain; background-repeat: no-repeat; cursor: pointer; background-image: url('https://static.edmclass.com/common/popupCloseBtn.svg'); background-position: center;}
#noti-message .message .confirm{font-size: 16px; padding: 29px 16px 13px; font-weight: 700; border-bottom: 1px solid var(--s-color1); color: var(--n-info); display: flex; justify-content: center; column-gap: 24px;}
#noti-message .message .confirm button{color: inherit; line-height: 22px; letter-spacing: -0.32px; position: relative; width: 78px; text-align: center;}
#noti-message .message .confirm button::after{content: ''; position: absolute; bottom: -13px; left: 0; width: 100%; height: 2px; background-color: var(--n-mainTitle); display: none;}
#noti-message .message .confirm .active{color: var(--n-mainTitle);}
#noti-message .message .confirm .active::after{display: block;}
#noti-message .message .confirm .active em{color: var(--p-color2);}
#noti-message .message .textWrap{padding: 0; overflow: hidden; }
#noti-message .message .textWrap .list{max-height: calc(100vh - 197px); min-height: 319px;}
#noti-message .message .textWrap .list > li{padding: 12px 8px 12px 16px; position: relative; cursor: pointer;}
#noti-message .message .textWrap .list > li a{display: block;}
#noti-message .message .textWrap .list > li .top{align-items: center;}
#noti-message .message .textWrap .list > li .category::after{border-radius: 100px; font-size: 12px; font-weight: 500; padding: 0 6px; line-height: 20px; letter-spacing: -0.24px; color: #40404E; height: 20px; display: block;}
#noti-message .message .textWrap .list > li .time{padding-left: 8px; font-size: 11px; color: var(--n-info2);}
#noti-message .message .textWrap .list > li .text{padding-top: 8px; line-height: 20px; letter-spacing: -0.26px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; display: -moz-box; display: -webkit-box;}
#noti-message .message .textWrap .list > li.notice .category::after{content: '공지'; background-color: var(--b-color4); }
#noti-message .message .textWrap .list > li.event .category::after{content: '이벤트・혜택'; background-color: #D4EBFF; color: #0059FF;}
#noti-message .message .textWrap .list > li.qna .category::after{content: '1:1 문의'; background-color: #D5F0C3; }
#noti-message .message .textWrap .list > li.study .category::after{content: '1:1 학습문의'; background-color: #D5F0C3; }
#noti-message .message .textWrap .list > li.class .category::after{content: '수강후기'; background-color: #FFEBD4; color: #FF7300; }
#noti-message .message .textWrap .list > li.center .category::after{content: '시험장후기'; background-color: #FFEBD4; color: #FF7300; }
#noti-message .message .textWrap .list > li.pass .category::after{content: '합격후기'; background-color: #FFEBD4; color: #FF7300; }
#noti-message .message .textWrap .list > li.deactivate{ color: var(--n-deactivate) !important; background-color: var(--b-color5); }
#noti-message .message .textWrap .list > li.deactivate .category::after{color: var(--n-deactivate); background-color: var(--b-color4) !important;}
#noti-message .message .textWrap .list > li.deactivate .text p::after{color: var(--n-deactivate);}
#noti-message .dim{width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 0;}
/* 게시글이 없는 경우 */
#noti-message .noData{width: 100%; text-align: center; padding: 142px 0; height: auto;}
#noti-message .noData .flex{width: 100%; justify-content: center;}
#noti-message .noData p{position: relative; padding-top: 32px; color: var(--n-deactivate); line-height: 20px; letter-spacing: -0.28px; font-size: 14px; font-weight: 400; padding-top: 32px;}
#noti-message .noData p::before{content: ''; background-image: url('https://static.edmclass.com/common/board/no-data.svg'); width: 24px; height: 24px; background-repeat: no-repeat; background-size: 20px; background-position: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}






@media screen and (min-width: 576px) {
    #top-tail{right: 32px;}
}

@media screen and (min-width: 1200px) {
    #top-tail{background-color: var(--b-color4); height: 40px; position: static; width: 100%; padding-right: 32px;}
    #top-tail .userWrap{display: flex; align-items: center; background-color: transparent;}
    #top-tail .userWrap > ul{position: relative;}
    #top-tail .userWrap > ul > li{display: flex !important; align-items: center; justify-content: center;}
    #top-tail .userWrap > ul > li + li{margin-left: 24px;}
    #top-tail .userWrap > ul .btn{padding: 0; position: relative; margin: 0; z-index: 5;}
    #top-tail .userWrap .state{display: block;}
    #top-tail .userWrap .loginWrap .userIcon{display: none;}
    #top-tail .userWrap .loginWrap .name{display: none;}
    #top-tail .userWrap figure{background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px;}
    #top-tail .userWrap .myClass{display: flex;}
    #top-tail .userWrap .myPage{display: block;}

    #top-tail .userWrap .loginWrap figure{background-image: url('https://static.edmclass.com/common/new_logout.svg');}
    #top-tail .userWrap .logoutWrap figure{background-image: url('https://static.edmclass.com/common/new_login.svg');}
    #top-tail .userWrap .state > .flex > div + div{margin-left: 24px;}
    #top-tail .userWrap .state .btn{border: none; padding: 0; margin: 0; display: block;}
    #top-tail .userWrap .state .btn.logout{margin-left: 0;}
    #top-tail .userWrap .flex{align-items: center; padding: 0; height: auto;}
    #top-tail .userWrap > ul > li figure{width: 16px; height: 16px; margin: 0;}
    #top-tail .userWrap > ul .btn .txtWrap{padding-top: 5px; display: none; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2; cursor: pointer;}
    #top-tail .userWrap > ul > li .txt{background-color: rgba(23, 28, 38,0.7); border-radius: 8px; color: var(--n-white); padding: 6px 8px; z-index: 1; line-height: 1; display: block;}
    #top-tail .userWrap > ul > li .btn:hover .txtWrap{display: block;}

	#top-tail .notification.active{top: -4px; height: 20px;}
	#top-tail .notification.active .icon{height: auto;}



    /* 알림 - 메시지 */
    #noti-message{z-index: 10; max-width: 400px;}
    #noti-message .message{max-width: 400px; max-height: calc(100vh - 40px);}
    #noti-message .message .closeBtn{right: 20px;}
    #noti-message .message .confirm{padding: 29px 20px 13px;}
    #noti-message .message .textWrap .list{max-height: calc(100vh - 141px);}
    #noti-message .message .textWrap .list > li{padding: 12px 8px 12px 20px;}
    /* 게시글이 없는 경우 */
    #noti-message .noData{padding-top: 126px; padding-bottom: 126px;}
    #noti-message .noData p{font-weight: 700; padding-top: 64px;}
    #noti-message .noData p::before{background-image: url('https://static.edmclass.com/common/board/no-data_pc.svg'); background-size: 48px; width: 56px; height: 56px;}

}

@media screen and (min-width: 1200px) {
    #top-tail{padding: 0 58px;}
}