@charset "utf-8";

/*
    mobile first
    :: footer (인강, 어학원 공통 사용
       인강 → 기본 : #FFFFFF / 메인, 상품 상세 : #F8F8F8
       어학원 → 기본 : #FFFFFF / 상품 상세 : #F8F8F8)
*/


#mo-menu{width: 100%; position: fixed; bottom: 0; left: 0; height: 56px; background-color: #FFFFFF; z-index: 99998; font-size: 11px; border-top: 1px solid #DEDFE5; }
#mo-menu nav{height: 100%;}
#mo-menu nav > .flex{height: 100%;  max-width: 744px; margin: 0 auto; }
#mo-menu a{width: calc(100%/4); text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #9B9BAA; line-height: 14px; letter-spacing: -0.22px;}
#mo-menu a figure{width: 24px; height: 24px; margin: 0 auto;}
#mo-menu a figure svg path,
#mo-menu a figure svg circle{stroke: #9B9BAA;}
#mo-menu a.active figure svg path,
#mo-menu a.active figure svg circle{stroke: #1D1D1F;}
#mo-menu a.active{color: #1D1D1F;}

#footer{background-color: var(--n-white); padding-bottom: 67px; padding-top: 24px; letter-spacing: -0.26px; position: relative;}
#footer.gray{background-color: var(--b-color5);}
#footer .max-width{max-width: 1596px;}
#footer .footerWrap{font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: #7D7B90; padding-bottom: 26px;}
#footer .footerWrap .top{padding-bottom: 24px; border-bottom: 1px solid #DEDFE5;}
#footer .footerWrap .top .shortcut{color: #40404E; line-height: 20px; letter-spacing: -0.26px;}
#footer .footerWrap .top .shortcut a{margin-right: 32px; margin-bottom: 4px;}

#footer .footerWrap .top .familySite{margin-top: 10px;}
#footer .footerWrap .top .familySite .label{background-color: transparent;}
#footer .footerWrap .top .familySite .selectBox .optionListWrap .optionList{max-height: 250px;}

#footer .footerWrap .top .snsWrap{margin-top: 16px; width: 100%;}
#footer .footerWrap .top .snsWrap > li{margin-right: 16px; padding-bottom: 4px; position: relative; height: 24px;}
#footer .footerWrap .top .snsWrap > li span{position: absolute; padding: 6px 9.5px; color: #fff; border-radius: 8px; background-color: rgba(23, 28, 38,0.7); top: 100%; left: 50%; transform: translateX(-50%); display: none; white-space: nowrap; font-size: 12px; letter-spacing: -0.36px; line-height: 16px; font-weight: 500;}
#footer .footerWrap .top .snsWrap a{width: 24px; height: 24px; border-radius: 50%; background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #9B9BAA;}
#footer .footerWrap .bottom{padding-top: 24px;}
#footer .footerWrap .bottom .logoWrap{margin-bottom: 12px; align-items: center;}
#footer .footerWrap .bottom .logoWrap a{margin-right: 16px; margin-bottom: 12px; height: 12px;}
#footer .footerWrap .bottom .logoWrap a *{width: auto; object-fit: contain; height: 100%; display: flex;}
#footer .footerWrap .bottom .infoWrap{line-height: 20px; letter-spacing: -0.26px;}
#footer .footerWrap .bottom .infoWrap > p{margin-bottom: 16px; }
#footer .footerWrap .bottom .infoWrap ul li > span{display: none;}
#footer .footerWrap .bottom .infoWrap .copyright{color: #B8B8C7; font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px;}
#footer .footerWrap .bottom .infoWrap > span{color: #B8B8C7; font-size: 12px; display: block; margin-top: 16px; line-height: 16px; letter-spacing: -0.24px;}
#footer .footerWrap .bottom .certification{margin-top: 24px;}
#footer .footerWrap .bottom .certification .logo{display: flex; align-items: center; color: #B8B8C7;}
#footer .footerWrap .bottom .certification .logo span{background-color: #F0F0F2; border-radius: 50%; width: 32px; height: 32px; background-repeat: no-repeat; background-size: cover; background-position: center; margin-right: 8px;}
#footer .footerWrap .bottom .certification .logo + .logo{margin-top: 8px;}

#footer.addPaddingB{padding-bottom: 151px;}
#footer .dropDownMenu .selectBox .optionListWrap{background-color: var(--b-color5);}


/***************************************
    탈퇴 완료 팝업
***************************************/
#delete-complete{position: fixed; bottom: 77px; left: 50%; transform: translateX(-50%); z-index: 99997; width: calc(100% - 32px); max-width: 400px; font-size: var(--f-body1);}
#delete-complete .flex{justify-content: space-between; align-items: center; background-color: rgba(0, 0, 0, 0.60); color: var(--n-white); padding: 12px; border-radius: 12px; margin: 16px 0 0; font-weight: 300; line-height: 20px; letter-spacing: -0.28px;}
#delete-complete .close{color: var(--p-color1); text-decoration: underline;}











@media screen and (min-width: 744px) {
    #footer{padding-top: 34px;}
    #footer .footerWrap .top > .max-width{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
	#footer .footerWrap .top .shortcut{line-height: 20px; letter-spacing: -0.26px;}
    #footer .footerWrap .top .shortcut a{margin-bottom: 0;}
    #footer .footerWrap .top .familySite{margin-top: 0; width: 208px;}
	#footer .footerWrap .bottom .logoWrap{margin-bottom: 24px;}
	#footer .footerWrap .bottom .logoWrap a{margin-bottom: 0;}
	#footer .footerWrap .bottom .infoWrap{font-size: var(--f-body1); letter-spacing: -0.28px; line-height: 20px;}
    #footer .footerWrap .bottom .infoWrap > p{margin-bottom: 8px;}
	#footer .footerWrap .bottom .infoWrap ul{max-width: 744px;}
    #footer .footerWrap .bottom .infoWrap ul + ul{margin-top: 0;}
    #footer .footerWrap .bottom .infoWrap ul li{display: inline-block;}
    #footer .footerWrap .bottom .infoWrap ul li{position: relative; padding-right: 17px;}
    #footer .footerWrap .bottom .infoWrap ul li::after{content: ''; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 1px; height: 8px; background-color: #B8B8C7;}
	#footer .footerWrap .bottom .infoWrap ul li:last-child{padding-right: 0;}
	#footer .footerWrap .bottom .infoWrap ul li:last-child::after{display: none;}
    #footer .footerWrap .bottom .infoWrap > span{margin-top: 4px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
    #footer .footerWrap .bottom .infoWrap .copyright{font-size: inherit; line-height: inherit; letter-spacing: inherit;}
	#footer .footerWrap .bottom .certification{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}

    #footer.addPaddingB{padding-bottom: 67px;}
}

@media screen and (max-width: 1199px) {
	#footer .footerWrap .bottom .infoWrap ul li.no-border-mo::after{display: none;}
}

@media screen and (min-width: 1200px) {
	#mo-menu{display: none;}

    #footer,
    #footer.addPaddingB{padding-top: 24px; padding-bottom: 120px;}
    #footer .footerWrap{font-size: var(--f-heading2); padding-bottom: 0;}
	#footer .footerWrap .top{padding-bottom: 24px;}
    #footer .footerWrap .top > .max-width{justify-content: flex-start;}
    #footer .footerWrap .top .shortcut a{margin-right: 48px;}

    /* dropDownMenu */
    #footer .footerWrap .top .familySite{width: 327px; font-size: var(--f-heading3); letter-spacing: -0.32px;}
    #footer .footerWrap .top .familySite .label{height: 56px; padding: 0 40px 0 16px; background-size: 24px; background-position: right 16px center; border-radius: var(--b-radius3);}
    #footer .footerWrap .top .familySite .label.active{background-image: url('https://static.edmclass.com/common/new_selectArrow-active-24.svg');}
    #footer .footerWrap .top .familySite .selectBox .optionListWrap{top: 60px;}
    #footer .footerWrap .top .familySite .selectBox .optionListWrap .optionItem *{padding: 15px 12px;}

	#footer .footerWrap .top .snsWrap{margin: 0 0 0 auto; width: auto;}
	#footer .footerWrap .top .snsWrap a{width: 40px; height: 40px;}
	#footer .footerWrap .top .snsWrap > li{margin-right: 24px; height: auto;}
    #footer .footerWrap .top .snsWrap > li:last-child{margin-right: 0;}
	#footer .footerWrap .bottom{padding-top: 80px;}
	#footer .footerWrap .bottom .logoWrap{margin-bottom: 48px; align-items: center;}
	#footer .footerWrap .bottom .logoWrap a{height: 20px; margin-right: 32px;}
	#footer .footerWrap .bottom .infoWrap{font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px;}
	#footer .footerWrap .bottom .infoWrap > p{margin-bottom: 16px;}
	#footer .footerWrap .bottom .infoWrap ul{max-width: 100%;}
	#footer .footerWrap .bottom .infoWrap ul li{padding-right: 33px; margin-bottom: 16px;}
	#footer .footerWrap .bottom .infoWrap ul li::after{height: 14px; right: 12px;}
	#footer .footerWrap .bottom .infoWrap ul li.copyright{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px;}
	#footer .footerWrap .bottom .infoWrap > span{margin-top: 0;}
	#footer .footerWrap .bottom .certification{margin-top: 48px; display: flex; align-items: center;}
	#footer .footerWrap .bottom .certification .logo{margin-right: 56px;}
	#footer .footerWrap .bottom .certification .logo span{width: 44px; height: 44px; margin-right: 16px;}
	#footer .footerWrap .bottom .certification .logo + .logo{margin-top: 0;}



	/***************************************
        탈퇴 완료 팝업
    ***************************************/
    #delete-complete{font-size: var(--f-heading3); bottom: 54px; right: 82px; transform: none; left: auto;}
    #delete-complete .close{font-size: var(--f-body1);}
    #delete-complete .flex{padding: 17px 16px; border-radius: 16px; margin-top: 0;}





    /*************************************************************
        hover effect
    *************************************************************/
    @media (hover: hover) and (pointer: fine) {
        #footer .footerWrap .top .snsWrap > li:hover a{background-color: var(--n-info);}
        #footer .footerWrap .top .snsWrap > li:hover span{display: block;}

        #footer .footerWrap .top .shortcut a:hover{text-decoration: underline;}
    }

}

@media screen and (min-width: 1264px) {
    #footer .max-width{padding: 0 32px;}
}

@media screen and (min-width: 1450px) {
    #footer .footerWrap .top .familySite{margin: 0;}
    #footer .footerWrap .top .snsWrap{margin: 0 0 0 auto; width: auto;}
}

@media screen and (min-width: 1660px) {
    #footer .max-width{padding: 0;}
}