@charset "utf-8";

/* a:active, button:active{filter: brightness(0.7);} */

/*
    header
	:: mobile first
*/
#header{position: fixed; top: 0; left: 0; width: 100%; height: 40px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px; 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 #allMenuBtnClose{position: absolute; right: 16px; top: 12px; width: 16px; height: 16px; display: none; background-image: url('https://static.edmclass.com/common/allMenu-closeBtn.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;}

#header.active .notification{display: none;}
#header.active #top-tail{width: calc(100% - 32px); right: auto; left: 0; justify-content: flex-start; background: #fff; height: 40px;}
#header.active #top-tail .userWrap{display: block; width: 100%; }
#header.active #top-tail .userWrap .state{display: block; width: 100%; }
#header.active #top-tail .userWrap .state .btn .txtWrap{display: block;}
#header.active #top-tail .userWrap .myClass{display: none;}
#header.active #top-tail .userWrap .myPage{display: none;}
#header.active #allMenuBtn{display: none;}
#header.active #allMenuBtnClose{display: block;}
#header.active{background-color: #fff;}
#header.active::after{backdrop-filter: blur(0); background: #fff;}
#header.active #noti-message .message{box-shadow: none;}
/* 상품 상세 */
#header.active.product{height: 100vh; height: calc(var(--vh, 1vh) * 100);}




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

#header .horizontalEffect{transform: translateX(-100%); transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute; top: 40px; left: 0; width: 100%; height: calc(100vh - 96px);}
#header .horizontalEffect::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 .mobile-btn{display: flex; align-items: center;}
#header #allMenuBtn{width: 24px; height: 24px; position: relative; padding: 5px 3px;}
#header #allMenuBtn .wrap{width: 100%; height: 100%; position: relative;}
#header #allMenuBtn span{width: 100%; height: 2px; background-color: var(--n-info); border-radius: 100px; position: absolute; left: 0;}
#header #allMenuBtn span:nth-child(1){top: 0;}
#header #allMenuBtn span:nth-child(2){top: 50%; transform: translateY(-50%);}
#header #allMenuBtn span:nth-child(3){bottom: 0;}

#header .pcKeyPage{display: none;}
#header .keyPage{font-size: var(--f-body1); font-weight: 700; background-color: #fff; padding-top: 8px; padding-bottom: 8px;}
#header .keyPage .keyPageList{display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 8px;}
#header .keyPage a{text-align: center; background-color: var(--b-color5); border-radius: var(--b-radius3); height: 88px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#header .keyPage a figure{width: 32px; height: 32px; display: block; margin: 0 auto 4px; background-repeat: no-repeat; background-size: contain; background-position: center;}
#header .keyPage a span{display: none;}

#header .linkWrap{display: none;}

#header #allMenuWrap{background-color: #fff; height: 100%; position: relative; }
#header #allMenuWrap a,
#header #allMenuWrap button{display: block; text-align: left;}
#header #allMenuWrap::after{content: ''; position: absolute; left: 0; top: 0; width: 120px; height: 100%; background-color: var(--b-color5); z-index: 0;}
#header #allMenuWrap .dep1{position: relative; z-index: 1;}
#header #allMenuWrap .dep1 > li > .title {width: 120px; padding: 16px 0 16px 16px; pointer-events: none;}
#header #allMenuWrap .dep2{display: none; padding-bottom: 50px; width: calc(100% - 120px); position: absolute; right: 0; top: 0; z-index: 2; overflow-y: auto; height: calc(100vh - 200px);}
#header #allMenuWrap .dep2::-webkit-scrollbar{display: block; width: 7px;}
#header #allMenuWrap .dep2::-webkit-scrollbar-track{background: transparent;}
#header #allMenuWrap .dep2::-webkit-scrollbar-thumb{background: var(--s-color1); border-radius: 100px;}
#header #allMenuWrap .dep2 > li{padding: 0 16px;}
#header #allMenuWrap .dep2 .allBtn,
#header #allMenuWrap .dep2 .dep3Menu{padding: 16px 0; transition: all 0.3s ease;}
#header #allMenuWrap .dep2 .allBtn + .dep3,
#header #allMenuWrap .dep2 .dep3Menu + .dep3{display: none; padding-top: 0;}
#header #allMenuWrap .dep2.active{display: block;}

/* #header #allMenuWrap .dep3{padding-bottom: 8px; padding-top: 8px;} */
#header #allMenuWrap .dep3 > li{padding: 15px 0;}

#header #allMenuWrap .dep1 > li.active > .title{background-color: #fff; font-weight: 700;}
#header #allMenuWrap .dep1 > li.active .dep2{display: block;}
#header #allMenuWrap .dep3Menu{position: relative; width: 100%;}
#header #allMenuWrap .dep3Menu figure{background-image: url('https://static.edmclass.com/common/new_allMenuArrow.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 24px; height: 24px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: all 0.3s ease;}
#header #allMenuWrap .dep3Menu.active figure{transform: translateY(-50%) rotate(180deg);}

#header.active{height: calc(100vh - 56px); height: calc((var(--vh, 1vh) * 100) - 56px); overflow: hidden;}
#header.active .horizontalEffect{transform: translateX(0); display: block;}

/* #header.down{transform: translateY(-100%);} */




/*
    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) {
    #wrap{min-height: 950px;}

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

    #header .topWrap{max-width: initial; border-bottom: 1px solid var(--s-color1); height: 90px; justify-content: space-between; }
    #header .topWrap .logo{margin: 0;}
    #header .topWrap .logo figure{height: 28px;}

    #header .horizontalEffect{width: auto; height: 492px; left: auto; right: 8px; top: 138px; border-radius: var(--b-radius1); padding: 24px 8px 24px 24px; box-shadow: var(--box-shadow3); transform: none; display: none; overflow: hidden;}
    #header .horizontalEffect .keyPage{display: none;}
    #header #allMenuWrap{height: 100%; border: none; overflow-y: auto; background-color: transparent; padding-right: 11px;}
    #header #allMenuWrap::-webkit-scrollbar{display: block; width: 5px;}
    #header #allMenuWrap::-webkit-scrollbar-track{background: transparent;}
    #header #allMenuWrap::-webkit-scrollbar-thumb{background: var(--b-color2); border-radius: 8px;}
    #header #allMenuWrap::after{display: none;}
    #header #allMenuWrap .dep1 > li{display: flex; align-items: flex-start; padding-bottom: 24px; min-height: 91px;}
    #header #allMenuWrap .dep1 > li:last-child{padding-bottom: 0;}
    #header #allMenuWrap .dep1 > li > .title{pointer-events: visible; padding: 0; font-weight: 700; position: relative; line-height: 22px; font-size: var(--f-heading3); letter-spacing: -0.32px;}
    #header #allMenuWrap .dep1 > li > .title span{position: relative; padding-bottom: 20px; background-image: url('https://static.edmclass.com/common/gnb-pageLink-icon.svg'); background-repeat: no-repeat; background-size: 16px; background-position: left bottom;}
    /* #header #allMenuWrap .dep1 > li > .title span::after{content: ''; position: absolute; width: 100%; height: 2px; bottom: -2px; left: 0; background-color: var(--n-subTitle);} */
    #header #allMenuWrap .dep1 > li.active > .title.on,
    #header #allMenuWrap .dep1 > li > .title.on {color: var(--p-color2);}
    #header #allMenuWrap .dep1 > li > .title.on span{background-image: url('https://static.edmclass.com/common/gnb-pageLink-icon-on.svg');}
    /* #header #allMenuWrap .dep1 > li > .title.on span::after{ background-color: var(--p-color2);} */
    #header #allMenuWrap .dep1 > li > .title.none{touch-action: none; pointer-events: none;}
    #header #allMenuWrap .dep1 > li > .title.none span::after{display: none;}

    #header #allMenuWrap .dep1 > li.active > .title{font-weight: 700; background-color: transparent; color: var(--n-subTitle);}
    #header #allMenuWrap .dep1 > li + li{padding-top: 24px; border-top: 1px solid var(--s-color2);}
    #header #allMenuWrap .dep2{position: static; display: block; width: auto; height: auto; display: grid !important; padding-bottom: 0; overflow: initial; grid-template-columns: repeat(3, 1fr); gap: 20px;}
    #header #allMenuWrap .dep2 > li{padding: 0; min-width: 158px; margin-right: 0;}
    #header #allMenuWrap .dep2 > li:last-child{margin-right: 0;}
    #header #allMenuWrap .dep2 .allBtn{display: none;}
    #header #allMenuWrap .dep2 .dep3Menu{pointer-events: none; touch-action: none; padding: 0; margin-bottom: 12px; line-height: 22px; font-weight: 700; font-size: var(--f-heading3); letter-spacing: -0.32px;}
    #header #allMenuWrap .dep3Menu figure{display: none;}
    #header #allMenuWrap .dep3{display: block !important; font-size: var(--f-body1); padding-top: 0; line-height: 16.8px;}
    #header #allMenuWrap .dep3 > li{padding: 0;}
    #header #allMenuWrap .dep3 > li + li{margin-top: 12px;}
    #header #allMenuWrap .dep3 a{transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); /*overflow:hidden; text-overflow:ellipsis; white-space:nowrap;*/ max-width: 158px;}
    #header #allMenuWrap .dep3 a:hover{color: var(--p-color2);}

    #header .pcKeyPage{display: block;}
    #header .topWrap .keyPage{position: absolute; top: 50%; left: calc(50% - 110px); font-size: var(--f-heading2); transform: translate(-50%,-50%); max-width: initial; width: auto; font-weight: bold; padding: 0; height: auto; border-top: none; background-color: transparent;}
    #header .topWrap .keyPage a{display: flex; align-items: center; white-space: nowrap; width: auto; padding: 6px 16px; background-color: transparent; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); border-radius: 55px; flex-direction: initial; justify-content: initial; height: 52px; color: var(--n-mainTitle);}
    #header .topWrap .keyPage a figure{margin: 0 4px 0 0; width: 40px; height: 40px;}

    #header .linkWrap{height: 100%; position: relative; z-index: 3; display: block;}
    #header .linkWrap > .flex{height: 100%; align-items: center;}
    #header .linkWrap > .flex > .title{display: inline-block; cursor: pointer; font-size: var(--f-heading3); font-weight: 700; transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); padding: 40px 0 44px 15px;}
    /* #header .linkWrap > .flex > .title + .title{padding-left: 15px;} */
    #header .linkWrap > .flex > .title:hover,
    #header .linkWrap > .flex > .title.active{color: var(--p-color2);}



    /*************************************************************
        hover effect
    *************************************************************/
    @media (hover: hover) and (pointer: fine) {
        /* #header #allMenuWrap .dep1 > li > .title:hover {color: var(--p-color2);} */
        #header #allMenuWrap .dep1 > li > .title:hover span{background-image: url('https://static.edmclass.com/common/gnb-pageLink-icon-on.svg');}

		#header .topWrap .keyPage a:hover{background-color: var(--b-color5);}
    }



}

@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;}
}

@media screen and (min-width: 1628px) {
    #header .topWrap .keyPage{left: 50%;}
}
