@charset "utf-8";

/*
    toeic
    :: common.css -> header, 공통 클래스
*/


/* 페이지 공통 */
body.toeic{padding-top: 80px;}
.toeic #mo-menu{display: none !important}

.point-color { color: #48FFF3; }
.point-color2 { color: #48FFF3; }
.point-color3 { color: #00B4A7; }
.bg-lightgray { background-color: #F8F8F8; }
.bg-darkgreen { background-color: #C6CBC2; }
.bg-lightgreen1 { background-color: #DFFDFB; }
.bg-lightgreen2 { background-color: #E7FAFF; }

img{vertical-align: middle;}



/*******************************************
    header
    :: mobile first
*******************************************/
#header{position: fixed; top: 0; left: 0; width: 100%; height: 80px; font-size: 15px; z-index: 99997; transform: translateY(0); transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /*border-bottom: 1px solid var(--s-color1);*/}
#header::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); z-index: -1;}

#header .topWrap{display: flex; align-items: center; height: 40px; position: relative; }
#header .topWrap .logo figure{background-image: url('https://static.edmclass.com/toeic/common/logo2.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; height: 16px; aspect-ratio: 112/20; max-width: initial;}
.toeic #top-tail .notification{height: 16px;}

.toeic #floatingWrap{bottom: 16px;}

@media screen and (max-width: 1199px) {
	.toeic #top-tail{top: 40px; left: 0; width: 100%; justify-content: flex-start; right: auto; background-color: var(--b-color5);}
	.toeic #top-tail .userWrap{width: 100%;}
	.toeic #top-tail .userWrap .btn .txtWrap{display: block;}
	.toeic #top-tail .userWrap .myClass{display: flex; margin: 0; order: 2; line-height: 40px; width: 50%; padding: 0; justify-content: center; align-items: center; }
	.toeic #top-tail .userWrap .myClass figure{position: static; transform: none; margin-right: 4px;}
	.toeic #top-tail .userWrap .state{display: block; width: 100%;}
	.toeic #top-tail .userWrap .state > .flex{justify-content: center;}
	.toeic #top-tail .userWrap .notificationWrap{position: absolute; right: 16px; top: -28px;}
	.toeic #top-tail .userWrap .notification .txtWrap{display: none;}

	/* 로그아웃 상태 (기본 css는 로그인 상태) */
	.toeic #top-tail .userWrap > .flex{width: 50%;}
	.toeic #top-tail .userWrap .myPage{display: block;}
	/* 로그인 */
	.toeic #top-tail.in .userWrap > .flex{width: 100%; justify-content: space-between;}
	.toeic #top-tail.in .userWrap .myClass{width: calc(100%/3); position: absolute; left: 50%; transform: translateX(-50%);}
	.toeic #top-tail.in .userWrap .myClass::after{display: none;}
	.toeic #top-tail.in .userWrap .myPage{width: calc(100%/3); padding: 0 16px; order: 2;}
	.toeic #top-tail.in .userWrap .myPage figure{margin-right: 4px;}
	.toeic #top-tail.in .userWrap .myPage .btn{display: flex; justify-content: center;}
	.toeic #top-tail.in .userWrap .state{width: calc(100%/3);}
	.toeic #top-tail.in .userWrap .loginWrap > .flex{justify-content: center;}
	.toeic #top-tail.in .userWrap .state .btn.logout{margin: 0;}
	.toeic #top-tail.in .userWrap .loginWrap .name{display: none;}
}















/*
    media query
    :: 0px ~ mobile
    :: 576px ~ tablet
    :: 1200px ~ pc
*/

@media screen and (min-width: 576px) {
    #header .topWrap{padding: 0 32px;}
}

/* pc */
@media screen and (min-width: 1200px) {
	body.toeic{padding-top: 130px;}
    #wrap{min-height: 950px;}

    /*
        header
    */
    #header{height: 130px;}
    #header::after{ backdrop-filter: blur(16px); }

    #header .topWrap{max-width: initial; border-bottom: 1px solid #D2D2D2; height: 90px; justify-content: space-between; }
    #header .topWrap .logo{margin: 0; position: absolute; left: 40px; top: 50%; transform: translateY(-50%);}
    #header .topWrap .logo figure{height: 28px;}
    #header .topWrap .gnb-txt{padding-left: 180px; font-size: var(--f-heading1);}
	.toeic #top-tail .notification.active{height: 16px; top: -2px;}
	.toeic #floatingWrap{bottom: 64px;}

}

@media screen and (min-width: 1200px) {
    body{font-size: 18px;}

    #header .topWrap{padding: 0 40px;}
}

@media screen and (min-width: 1400px) {
    #header .linkWrap > .flex >  .title{padding-left: 32px;}
}