@charset "utf-8";


/**************************************************************************************
    mobile first
    membership page
    :: 로그인, 획원가입, 마이페이지
    :: (root.css, common.css를 공통으로 쓸지는 어학원과 합치면서 확인해봐야 함)
**************************************************************************************/



/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Firefox  */
input[type='number'] { -moz-appearance: textfield; }







/************************************
    멤버십 헤더
************************************/
#header.membershipHeader.active{height: 100vh;}
#header.membershipHeader #allMenuWrap .dep2{height: calc(100vh - 173px);}



/************************************
    멤버십
************************************/
#membership {font-size: var(--f-body3); color: var(--n-subTitle); padding-bottom: 58px; letter-spacing: -0.24px; position: relative;}
#membership .max-width{max-width: 364px; margin: 0 auto;}
#membership .swiper-wrapper{height: auto;}

#membership .message{color: var(--success-color); margin-top: 4px; font-size: 11px; padding-left: 8px; line-height: 14px; letter-spacing: -0.22px;}
#membership .message.error{color: var(--waring-color) !important;}

#membership .formWrap .tit{margin-bottom: 8px; padding-left: 8px;}
#membership .formWrap .input + .input{margin-top: 16px;}

/* 하단 확인 버튼 */
#membership input[type="button"]{cursor: pointer;}
#membership .submitBtn{width: 100%; height: 52px; line-height: 52px; text-align: center; border-radius: 8px; font-size: var(--f-heading3); font-weight: 500; outline: 0; border: none; margin-top: 16px; font-family: inherit; color: var(--n-white); background-color: var(--p-color2);}
#membership .submitBtn:disabled{background-color: var(--b-color4); color: var(--n-deactivate); pointer-events: none; touch-action: none;}

/* 테두리 있는 버튼 */
#membership .btn-signup{border: 1px solid var(--p-color2); border-radius: var(--b-radius0); height: 40px; line-height: 38px; text-align: center; min-width: 108px; padding: 0 12px; font-weight: 500; display: inline-block; color: var(--p-color2); font-size: var(--f-body1); transition: all 0.3s ease;}
#membership .btn-signup:disabled,
#membership .btn-signup.disabled{background-color: var(--b-color4); border-color: var(--b-color4); color: var(--n-deactivate); pointer-events: none; touch-action: none;}

/* 게시글이 없는 경우 */
#membership #noData{display: block !important; width: 100% !important; text-align: center; padding: 72px 0 !important; border-top: 1px solid var(--s-color1) !important; border-bottom: 1px solid var(--s-color1) !important; height: auto;}
#membership #noData .flex{width: 100%; justify-content: center;}
#membership #noData p{position: relative; padding-top: 32px; color: var(--n-deactivate); line-height: 20px; letter-spacing: -0.28px; font-size: var(--f-body1);}
#membership #noData p::before{content: ''; background-image: url('https://static.edmclass.com/common/board/no-data.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 20px; height: 20px; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}



/*
    로그인, 회원가입 버튼
*/
#membership .shortcut{text-align: center; margin-top: 16px;}
#membership .shortcut a + a{margin-left: 17px; position: relative;}
#membership .shortcut a + a::before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: -9px; width: 1px; height: 10px; background-color: #DEDEDF;}


/*
    sns
*/
#membership .social-wrap{text-align: center; font-size: 14px; padding: 40px 0 0; margin: 0 auto; max-width: 328px;}
#membership .social-wrap .social-box .social-list{margin-top: 16px; text-align: center;}
#membership .social-wrap .social-box .social-list > li{width: 56px; height: 56px; display: inline-block; position: relative; background-color: #F0F0F2; border-radius: 50%; overflow: hidden;}
#membership .social-wrap .social-box .social-list > li + li{margin-left: 16px;}
#membership .social-wrap .social-box .social-list a{width: 100%; height: 100%;}
#membership .social-wrap .social-box .social-list a figure{width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat;}
#membership .social-wrap .social-box .social-list a span{display: none;}



/*
    로그인
*/
#membership .login .login-help{margin: 16px 0 0;}
#membership .login .login-help > .flex{align-items: center;}
#membership .login .login-help .find-idpw a{position: relative;}
#membership .login .login-help .find-idpw a + a{margin-left: 17px; }
#membership .login .login-help .find-idpw a + a::before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: -9px; width: 1px; height: 10px; background-color: #DEDEDF;}


/*
    아이디, 비밀번호 찾기
*/
#membership .findPwd .chk-wrap{text-align: right;}
#membership .findPwd .chk-wrap label + label{margin-left: 16px;}
#membership .findPwd .message-check-email{padding: 56px 8px; border-radius: 8px; background-color: #FFF7F7; text-align: center; color: var(--waring-color); font-size: var(--f-heading2); letter-spacing: -0.36px;}
#membership .findPwd .input{position: relative;}
#membership .findPwd .input .chk {position: absolute; right: 0; top: 0;}
#membership .findPwd .global{display: none; width: 130px;}
#membership .findPwd .global .dropDownMenu .label{padding: 0 24px 0 8px; background-position: right 8px center;}
#membership .findPwd .domestic{width: 100%;}
#membership .findPwd .certifyPhone{margin-top: 8px;}
#membership .findPwd .inputBox{display: flex; justify-content: space-between;}
#membership .findPwd .certifyPhone label{width: calc(100% - 116px); position: relative;}
#membership .findPwd .certifyPhone label .timer{display: none; padding-left: 8px; font-size: 11px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);}
#membership .findPwd .phoneWrap.globalPhone .global{display: block;}
#membership .findPwd .phoneWrap.globalPhone .domestic{width: calc(100% - 130px); padding-left: 8px;}
#membership .findPwd .submitBtn:disabled{background-color: var(--b-color4) !important;}
#membership .findPwd #phone:invalid {background-image: none;}
/* 아이디 찾기 2단계 */
#membership .findPwd.step2 .user-id{background-color: #FFF7F7; font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px; text-align: center; color: #FF5959; width: 100%; height: 138px; border-radius: var(--b-radius0); display: flex; justify-content: center; align-items: center; margin-bottom: 16px;}
#membership .findPwd.step2 .certificationWrap .inputBox{border-radius: var(--b-radius0); border: 1px solid var(--s-color1); padding: 16px; display: flex; justify-content: flex-start;}
#membership .findPwd.step2 .certificationWrap .inputBox label + label{margin-left: 16px;}
#membership .findPwd.step2 .popup .textWrap{min-height: 100px; font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}


/* 비밀번호 찾기 - 이메일 아이디가 아니신가요? */
#membership .findIdPw .otherBtnWrap{margin-top: 164px;}
#membership .findIdPw .otherBtnWrap .otherBtn{text-align: center; font-size: var(--f-heading3); width: 100%; background-color: var(--n-white); padding: 6px 0; border: 1px solid var(--s-color1); border-radius: var(--b-radius0); color: var(--n-info); font-weight: 700; line-height: 22px; letter-spacing: -0.32px; }
#membership .findIdPw .otherBtnWrap .otherBtn span{display: block; font-size: var(--f-body3); font-weight: 500; line-height: 16px; letter-spacing: -0.24px;}


/*
    회원가입 - 인트로
*/
#membership .signUp .intro{text-align: center; font-size: var(--f-body1); letter-spacing: -0.28px; padding-top: 0;}
#membership .signUp .intro .content{margin-top: 32px; line-height: 20px;}
#membership .signUp .intro .signup-wrap{ padding-bottom: 8px;}
#membership .signUp .intro .btn-signup{margin-top: 16px; width: 222px;}
#membership .signUp .intro .slideWrap{text-align: left; padding: 0 0 0 16px; /*max-width: 384px;*/ margin: 64px auto 0; overflow: hidden;}
#membership .signUp .intro .slideWrap .pointText p{padding: 0 13px 0 4px; height: 22px; line-height: 22px; color: var(--p-color1); letter-spacing: -0.22px; font-size: 11px; font-weight: 700; position: relative; display: inline-block; background-color: #E1F1FF; border-radius: 4px; margin-bottom: 8px;}
#membership .signUp .intro .slideWrap .pointText p:after{ content: ""; height: 0; width: 0; border-style: solid; position: absolute; top: 0; right: 0; border-width: 11px 5px 11px 5px; border-color: transparent var(--n-white) transparent transparent; border-radius: 4px;}
#membership .signUp .intro .slideWrap .slide{padding-bottom: 26px; position: relative; padding-right: 16px; width: 100%; }
#membership .signUp .intro .slideWrap .slide .splide__track{overflow: initial;}
#membership .signUp .intro .slideWrap .slide .splide__slide{border-radius: 16px; box-shadow: var(--box-shadow2); background-color: var(--n-white); height: 96px; padding: 24px 0 0 24px; position: relative;}
#membership .signUp .intro .slideWrap .slide .splide__slide em{font-size: 11px; display: block; letter-spacing: -0.22px; font-weight: 700;}
#membership .signUp .intro .slideWrap .slide .splide__slide p{font-weight: 700; color: var(--n-mainTitle); letter-spacing: -0.32px; font-size: var(--f-heading3); line-height: 22px;}
#membership .signUp .intro .slideWrap .slide .splide__slide p span{font-size: var(--f-body3); font-weight: 400; display: inline-block;}
#membership .signUp .intro .slideWrap .slide .splide__slide figure{position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; object-fit: contain; background-repeat: no-repeat; touch-action: none; pointer-events: none; background-size: contain; background-position: right center;}
#membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(1) em{color: #30C214;}
#membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(2) em{color: #339DFF;}
#membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(3) em{color: #FF8945;}
#membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(4) em{color: #D11BFF;}
#membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(1) figure{background-image: url('https://static.edmclass.com/common/membership/signUp-slide1.png');}
#membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(2) figure{background-image: url('https://static.edmclass.com/common/membership/signUp-slide2.png');}
#membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(3) figure{background-image: url('https://static.edmclass.com/common/membership/signUp-slide3.png');}
#membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(4) figure{background-image: url('https://static.edmclass.com/common/membership/signUp-slide4.png');}
#membership .signUp .intro .slideWrap .slide .pagination{text-align: center; margin-top: 18px; display: flex; justify-content: center; background-color: transparent;}
#membership .signUp .intro .slideWrap .slide .pagination .btn{width: 8px; height: 8px; border-radius: 50%; background: var(--n-deactivate); opacity: 1; margin: 0 4px;}
#membership .signUp .intro .slideWrap .slide .pagination .btn.is-active{background: var(--n-mainTitle);}
#membership .signUp .intro .slideWrap .slide .slideNumber{position: absolute; bottom: auto; top: 16px; font-size: 11px; z-index: 2; left: calc(50% + 30px); color: #B8B8C7; line-height: 14px; letter-spacing: -0.9px;}
#membership .signUp .intro .slideWrap .slide .slideNumber .current{color: var(--n-mainTitle); font-weight: 700;}



/*
    회원가입 - 가입신청
*/
#membership .signUp .join input{font-size: var(--f-body1);}
#membership .signUp .join #phone:invalid{background-image: none;}

#membership .signUp .join .formWrap .input + .input{border-top: 1px solid var(--s-color1); padding-top: 16px;}
#membership .signUp .join .formWrap .inputBox > span{font-size: 11px; color: var(--n-info); margin-top: 4px; display: block; padding-left: 8px; line-height: 14px; letter-spacing: -0.22px;}
#membership .signUp .join .formWrap .inputBox + .inputBox{margin-top: 8px;}
#membership .signUp .join .formWrap .phoneWrap{position: relative;}
#membership .signUp .join .formWrap .phoneWrap .chk{position: absolute; right: 0; top: 16px;}
#membership .signUp .join .formWrap .inputBox.row{display: flex; justify-content: space-between; flex-wrap: wrap;}
#membership .signUp .join .formWrap .inputBox.row label{width: 100%;}
#membership .signUp .join .formWrap .certifyPhone{margin-top: 8px;}
#membership .signUp .join .formWrap #certifyPhone label{position: relative; width: calc(100% - 116px);}
#membership .signUp .join .formWrap .certifyPhone .timer{display: none; padding-left: 8px; font-size: 11px; position: absolute; right: 33px; top: 50%; transform: translateY(-50%);}
#membership .signUp .join .formWrap #certifyPhone label span{position: absolute; right: 8px; top: 50%; transform: translateY(-50%);}
#membership .signUp .join .formWrap #authNumber:valid + span{display: none; }
#membership .signUp .join .formWrap #authNumber:invalid + span{display: none; }
#membership .signUp .join .formWrap #authNumber:user-invalid,
#membership .signUp .join .formWrap #authNumber.invalid{background-image: none;}
#membership .signUp .join .formWrap .phoneWrap .global{display: none;}
/* 해외 타입 */
#membership .signUp .join .formWrap .phoneWrap.globalPhone .global{display: block; width: 130px;}
#membership .signUp .join .formWrap .phoneWrap.globalPhone label{width: calc(100% - 138px);}
#membership .signUp .join .formWrap .phoneWrap.globalPhone #btnSend{margin-top: 8px; width: 100%;}
#membership .signUp .join .formWrap .phoneWrap.globalPhone
#membership .signUp .join .formWrap .phoneWrap .global select{width: 130px; }
#membership .signUp .join .formWrap .phoneWrap .global .dropDownMenu .label{font-size: var(--f-body1);}

/* 국내 : 인증번호 생성 */
#membership .signUp .join .formWrap .phoneWrap.type2 .phoneBefore label{width: 100%;}
#membership .signUp .join .formWrap .phoneWrap.type2 .phoneBefore .btn-signup{display: none;}
/* #membership .signUp .join .formWrap .phoneWrap.type2 .certifyPhone{display: block;} */
#membership .signUp .join .formWrap .phoneWrap.type2 .certifyPhone .btn-signup{display: block;}
#membership .signUp .join .formWrap .phoneWrap.type2.globalPhone .phoneBefore label{width: calc(100% - 138px);}
#membership .signUp .join .formWrap .phoneWrap.type2.globalPhone .certifyPhone label{width: calc(100% - 116px);}

#membership .signUp .join .agreementWrap{padding-top: 16px; border-top: 1px solid var(--s-color1); margin-top: 16px; padding-bottom: 32px;}
#membership .signUp .join .agreementWrap .chk-list{border-top: 1px solid var(--s-color1); margin-top: 16px; padding-top: 16px;}
#membership .signUp .join .agreementWrap .chk-list .terms-wrap {}
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-header { position: relative; }
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-header .toggle-btn{ position: absolute; right: 0; top: 50%; width: 36px; height: 16px; transform: translateY(-50%);}
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-header .toggle-btn::before{ content: ""; position: absolute; background-image: url('https://static.edmclass.com/common/membership/toggle-btn.svg'); background-repeat: no-repeat; background-size: contain; background-position: right center; width: 16px; height: 16px; }
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-header .toggle-btn.move::before { transform: rotate(-90deg); }
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-header .toggle-btn span{text-indent: -9999999%; display: block;}
/* #membership .signUp .join .agreementWrap .chk-list .terms-wrap .toggle-btn.active { top: 0; } */
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-header .toggle-btn.active::before{background-image: url('https://static.edmclass.com/common/membership/toggle-btn2.svg');}
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-detail{width: 100%; border-radius: 8px; height: 160px; padding: 8px; background-color: var(--b-color5); margin-top: 16px; overflow: hidden; display: none;}
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-detail .scrollWrap {overflow-y: auto; height: 100%;}
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-detail .scrollWrap::-webkit-scrollbar{display: block; width: 5px;}
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-detail .scrollWrap::-webkit-scrollbar-track{background: transparent;}
#membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-detail .scrollWrap::-webkit-scrollbar-thumb{background: var(--b-color2); border-radius: 8px;}
#membership .signUp .join .agreementWrap .chk-list .terms-wrap + .terms-wrap{margin-top: 16px;}




/*
    마이페이지
*/
#membership .myPage{font-size: var(--f-body1);}

#membership .myPage .messageBox{border-radius: 12px; word-break: break-all; margin: 0; padding: 12px 20px 12px 13px;}
#membership .myPage .messageBox .dotList li{position: relative; padding-left: 8px; line-height: 15px;}
#membership .myPage .messageBox .dotList li::before{content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: var(--n-info); position: absolute; left: 0; top: 6px;}
#membership .myPage .dotTxt{padding-left: 8px; position: relative; width: 100%; text-align: left;}
#membership .myPage .dotTxt::before{content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: var(--n-subTitle); position: absolute; left: 0; top: 9px;}
#membership .myPage .messageBox .message-title{padding-left: 15px; position: relative; margin-bottom: 12px;}
#membership .myPage .messageBox .message-title figure{left: -5px; top: 0;}

#membership .myPage .pageLink{justify-content: space-between; margin-top: 8px;}
#membership .myPage .pageLink a{width: calc(100%/3 - 5px); height: 40px; border-radius: 20px; text-align: center; color: var(--n-info); background-color: var(--b-color4); line-height: 40px; font-weight: 500;}
#membership .myPage .pageLink a:hover{color: var(--n-subTitle); background-color: var(--b-color3);}
#membership .myPage .pageLink a.active{background-color: var(--p-color2); color: var(--n-white); font-weight: 400;}

#membership .myPage .inputArea strong{padding-top: 20px; padding-bottom: 16px; display: block; position: relative; line-height: 20px; letter-spacing: -0.28px;}
#membership .myPage .inputArea .input{padding-top: 16px; }
#membership .myPage .inputArea .input + .input{border-top: 1px solid var(--s-color1); margin-top: 16px;}
#membership .myPage .inputArea .input .tit{font-size: var(--f-body3);}
#membership .myPage .inputArea .input .tit i{background-image: url('https://static.edmclass.com/common/membership/required-icon.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 8px; height: 8px; display: inline-block; margin-left: 2px; position: relative; top: -1px;}
#membership .myPage .inputArea .input .tit span{display: block; font-size: var(--f-body11); color: var(--n-info); line-height: 14px; letter-spacing: -0.22px;}
#membership .myPage .inputArea .input .roundWrap{border: 1px solid var(--s-color1); border-radius: 12px; padding: 16px;}
#membership .myPage .inputArea .input .roundWrap .box + .box{margin-top: 20px;}
#membership .myPage .inputArea .input .roundWrap .tit{padding-left: 0;}
#membership .myPage .inputArea .input .inputBox + .inputBox{margin-top: 8px;}
#membership .myPage .inputArea .input.borderN{margin-top: 0; border-top: none;}
#membership .myPage .inputArea .dropDownMenu .label{padding: 0 24px 0 8px; background-position: right 8px center;}

#membership .myPage .inputArea .input .flex{justify-content: space-between;}
#membership .myPage .inputArea .messageBox.type2{background-color: transparent; padding: 0 0 0 8px; margin-bottom: 0;}
#membership .myPage .inputArea .messageBox.type2 em{line-height: 16px;}
#membership .myPage .inputArea .messageBox.type2 em + p{font-size: 11px; line-height: 14px; letter-spacing: -0.22px;}
#membership .myPage .inputArea .userWrap {display: flex; justify-content: space-between;}
#membership .myPage .inputArea .userWrap label{width: calc(50% - 8px); background-color: var(--b-color5); border-radius: 8px; padding: 12px 8px; text-align: center;}
#membership .myPage .inputArea .userWrap label p{font-size: var(--f-body3); color: var(--n-info); line-height: 16px;}
#membership .myPage .inputArea .userWrap label input{border: none; background-color: transparent; outline: 0; text-align: center; line-height: 20px; letter-spacing: -0.28px; height: auto; color: var(--n-mainTitle); padding: 0;}
#membership .myPage .inputArea .btn-signup{font-weight: 500;}
#membership .myPage .inputArea .snsManagement .sns{display: flex; align-items: center;}
#membership .myPage .inputArea .snsManagement .sns .email{margin-top: 7px;}
#membership .myPage .inputArea .snsManagement .sns .left{font-size: var(--f-body3); line-height: 16px; width: calc(100% - 70px);}
#membership .myPage .inputArea .snsManagement .sns .left .top{position: relative; padding-left: 30px; font-size: 11px; color: var(--n-info2); letter-spacing: -0.22px; line-height: 14px;}
#membership .myPage .inputArea .snsManagement .sns .left .top figure{width: 20px; height: 20px; background-size: 30px; background-position: center; background-repeat: no-repeat; position: absolute; left: 0; top: -3px;}
#membership .myPage .inputArea .snsManagement .sns .left .top figure.naver{background-size: 37px;}
#membership .myPage .inputArea .snsManagement .sns .left .top figure.kakao{background-size: 25px;}
#membership .myPage .inputArea .snsManagement .sns .left .top .name{height: 14px;}
#membership .myPage .inputArea .snsManagement .sns .right{width: 70px;}
#membership .myPage .inputArea .snsManagement .sns .right .buttonWrap{font-size: var(--f-body3); align-items: center; color: var(--n-deactivate);}
#membership .myPage .inputArea .snsManagement .sns .right .buttonWrap button{width: 40px; height: 22px; border-radius: 100px; background-color: var(--s-color1); position: relative;}
#membership .myPage .inputArea .snsManagement .sns .right .buttonWrap button::after{content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background-color: var(--n-white); opacity: 1; left: 2px; top: 50%; transform: translateY(-50%); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 8px 20px 0px rgba(0, 0, 0, 0.05); transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);}
#membership .myPage .inputArea .snsManagement .sns .right .buttonWrap.active{color: var(--n-subTitle);}
#membership .myPage .inputArea .snsManagement .sns .right .buttonWrap.active button{background-color: var(--p-color2);}
#membership .myPage .inputArea .snsManagement .sns .right .buttonWrap.active button::after{left: 20px;}
#membership .myPage .inputArea .password .btn-signup{width: 100%;}
#membership .myPage .inputArea .phoneNumber .phoneBox .dropDownMenu{width: 130px;}
#membership .myPage .inputArea .phoneNumber .phoneBox label{width: calc(100% - 138px);}
#membership .myPage .inputArea .phoneNumber .phoneBox #phone:user-invalid{background-image: none;}
#membership .myPage .inputArea .phoneNumber .certifyPhone label{width: calc(100% - 116px); position: relative;}
#membership .myPage .inputArea .phoneNumber .timer{display: block; padding-left: 8px; font-size: 11px; position: absolute; right: 33px; top: 50%; transform: translateY(-50%);}
#membership .myPage .inputArea .address .inputBox.flex label{width: calc(100% - 116px);}

#membership .myPage .inputArea .input.examInfo{padding-top: 8px;}
#membership .myPage .inputArea .examInfo .name label{width: calc(50% - 4px);}
#membership .myPage .wrap-round.type2 .input.examInfo input[type="text"],
#membership .myPage .wrap-round.type2 .input.examInfo input[type="tel"]{background-color: var(--b-color5);}
#membership .myPage .wrap-round.type2 .input.examInfo input[type="date"]{background-color: transparent;}
#membership .myPage .wrap-round.type2 .input.examInfo input[type="date"]::after{background-color: var(--b-color5); z-index: -1;}

#membership .myPage .inputArea .notification .chk label{width: calc(100%/3);}
#membership .myPage .inputArea .notification .chk{font-size: var(--f-body3);}

#membership .myPage .delete{font-size: var(--f-body3); color: var(--n-info2); padding-top: 24px;}
#membership .myPage .delete .box{align-items: center; justify-content: space-between; padding-right: 13px;}
#membership .myPage .delete .txt{position: relative; padding-left: 22px;}
#membership .myPage .delete .txt figure{background-image: url('https://static.edmclass.com/common/membership/invalid-gray.svg'); width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);}
#membership .myPage .delete a{font-size: var(--f-body2);}

#membership .myPage .submitBtn{margin-top: 24px; }
#membership .myPage #mypageForm .submitBtn{transition: background-color 0.3s ease;}

/* 마이페이지 - 회원탈퇴 */
#membership .myPage.delete .input-wrap .title{line-height: 20px; letter-spacing: -0.56px; word-break: break-all; margin-bottom: 16px; margin-top: 16px;}
#membership .myPage.delete .input-wrap .messageBox.read{background-color: #FFF7F7; }
#membership .myPage.delete .input-wrap .messageBox.read .message-title em{color: var(--waring-color);}
#membership .myPage.delete .input-wrap .messageBox.read > p{font-size: 11px; line-height: 14px; letter-spacing: -0.22px; color: var(--n-info2); margin-top: 8px;}

#membership .myPage.delete .input-wrap .messageBox.chk{color: var(--n-subTitle);}
#membership .myPage.delete .input-wrap .messageBox.chk label{display: block;}
#membership .myPage.delete .input-wrap .messageBox.chk label + label{margin-top: 8px;}
#membership .myPage.delete .input-wrap .messageBox.chk .last-chk{margin-top: 16px; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--s-color1); letter-spacing: -0.66px;}
#membership .myPage.delete .input-wrap .messageBox.chk .last-password span{width: 52px; display: inline-block; padding-top: 11px;}
#membership .myPage.delete .input-wrap .messageBox.chk .last-password label{width: calc(100% - 52px);}
#membership .myPage.delete .input-wrap .messageBox.chk label.deactivate{color: var(--n-deactivate); touch-action: none; pointer-events: none;}
#membership .myPage.delete .input-wrap .messageBox.chk label.deactivate input + span::before{background-color: var(--b-color4); border-color: var(--b-color4);}
#membership .myPage.delete .input-wrap .messageBox.chk label.deactivate.active{color: var(--n-subTitle); touch-action: auto; pointer-events: visible;}
#membership .myPage.delete .input-wrap .messageBox.chk label.deactivate.active input + span::before{background-color: var(--p-color2); border-color: var(--p-color2);}
#membership .myPage.delete .submitBtn{margin-top: 16px;}

/* 마이페이지 - 결제/배송조회 */
#membership .myPage.payment .inputArea .input{display: block;}
#membership .myPage.payment .input-wrap .infoTxt{font-size: var(--f-body3); color: var(--n-info); text-align: right; padding: 16px 0;}
#membership .myPage.payment .input-wrap .infoTxt + .input{padding-top: 0;}
#membership .myPage.payment .input-wrap .input + .input.message{border-top: none; padding: 0;}
#membership .myPage.payment .input-wrap .input + strong{margin-top: 16px;}
#membership .myPage.payment .input-wrap .user-paymentList{border-bottom: 1px solid var(--s-color1);}
#membership .myPage.payment .input-wrap .user-paymentList > li{display: flex; border-top: 1px solid var(--s-color1); min-height: 44px;}
#membership .myPage.payment .input-wrap .user-paymentList > li .title{width: 80px; background-color: var(--b-color4); padding: 16px 12px; font-size: var(--f-body3); font-weight: 700; line-height: 16px; color: var(--n-info);}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap{width: calc(100% - 80px); padding: 7px 0 7px 12px; line-height: 20px; display: flex; align-items: center; flex-wrap: wrap; }
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap.sb{justify-content: space-between;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap.coupon .price{width: 100%;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .detail{border: 1px solid var(--s-color1); border-radius: 8px; padding: 0 9px; font-size: var(--f-body2); color: var(--n-info); display: inline-block; height: 34px; line-height: 32px; font-weight: 500;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap p + p{margin-top: 24px;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap p + .detail{margin-left: 12px;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .price{font-weight: 500; text-align: right;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .price .canceled { color: var(--p-color1);font-size: inherit; }
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .price span{display: block; color: var(--n-info); font-size: 11px;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .priceWrap{display: flex; justify-content: space-between; align-items: flex-end; width: 100%; padding-bottom: 8px;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .priceWrap p span{display: block;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .priceWrap + .priceWrap{border-top: 1px solid var(--s-color1); padding-top: 8px;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .priceWrap p + p{margin: 0;}
#membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .dotTxt + .dotTxt{margin-top: 0;}
#membership .myPage.payment .input-wrap .user-paymentList > li.orderDetails .textWrap{padding: 16px 12px; }
#membership .myPage.payment .input-wrap .user-paymentList > li.orderDetails .textWrap .orderDetail-btn{cursor: pointer; width: 100%; background-image: url('https://static.edmclass.com/common/membership/toggle-btn.svg'); background-repeat: no-repeat; background-size: 16px; background-position: right center; }
#membership .myPage.payment .input-wrap .user-paymentList > li.orderDetails .textWrap .orderDetail-btn.active{background-image: url('https://static.edmclass.com/common/membership/toggle-btn2.svg');}
#membership .myPage.payment.first .input-wrap .user-paymentList > li.orderDetails .textWrap > p{padding-right: 16px;}
#membership .myPage.payment .input-wrap .user-paymentList > li.orderDetails .toggle{padding-top: 12px; padding-right: 16px;}
#membership .myPage.payment .input-wrap .user-paymentList > li.orderDetails .toggle p{padding: 12px 0;}
#membership .myPage.payment .input-wrap .user-paymentList + .user-paymentList{margin-top: 16px;}
#membership .myPage.payment .input-wrap .messageBox{background-color: var(--b-color5); }
#membership .myPage.payment .input-wrap .messageBox a{font-size: 11px; color: var(--n-info2); text-decoration: underline; line-height: 14px; letter-spacing: -0.22px; padding-right: 15px; display: inline-block; position: relative;}
#membership .myPage.payment .input-wrap .messageBox a::after{content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-image: url('https://static.edmclass.com/common/membership/shortcut-icon.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 14px; height: 16px;}
#membership .myPage.payment .input-wrap .messageBox .couponBox{margin-top: 12px; display: flex;}
#membership .myPage.payment .input-wrap .messageBox .couponBox label{width: calc(100% - 96px);}
#membership .myPage.payment .input-wrap .messageBox .couponBox .btn-signup{width: 88px; min-width: initial;}

/* 마이페이지 - 쿠폰내역 */
#membership .myPage.payment.coupon .input-wrap .user-paymentList .detail{width: 100%; text-align: center;}
#membership .myPage.payment.coupon .input-wrap .user-paymentList .detail:hover{background-color: var(--b-color4); border-color: var(--b-color4) !important;}
#membership .myPage.payment.coupon .input-wrap .user-paymentList .textWrap p + .detail{margin-left: 0; margin-top: 8px;}
#membership .myPage.payment.coupon .input-wrap .messageBox .couponBox .btn-signup{background-color: var(--n-white);}
#membership .myPage.payment.coupon .input-wrap .messageBox .couponBox .btn-signup:disabled{background-color: var(--b-color4) !important;}











@media screen and (min-width: 576px) {
    /************************************
        멤버십 공통
    ************************************/
    body{font-size: var(--f-heading3);}



    #membership .max-width{max-width: 332px; padding: 0;}

    #wrap#membership{padding-top: 56px;}

    #membership .submitBtn{height: 56px; line-height: 56px; font-size: var(--f-heading2); margin-top: 24px;}

    #membership .formWrap .message{letter-spacing: -0.22px; line-height: 14px;}
    #membership .formWrap .tit{line-height: 16px;}

    /* 마이페이지 */
    #membership .myPage .pageTitle{padding-bottom: 16px;}



    /*
        sns
    */
    #membership .social-wrap{font-size: var(--f-heading3); max-width: 384px;}
    #membership .social-title{font-weight: 700;}
    #membership .social-wrap .social-box .social-list{margin-top: 24px;}
    #membership .social-wrap .social-box .social-list > li{width: 100%; border-radius: 12px; background-color: transparent; font-size: 16px; font-weight: 800;}
    #membership .social-wrap .social-box .social-list > li + li{margin-top: 10px; margin-left: 0;}
    /* #membership .social-wrap .social-box .social-list > li:nth-child(1){border: 1px solid #DEDFE5;} */
    /* #membership .social-wrap .social-box .social-list > li:nth-child(1){background-color: #1CC75B; }
    #membership .social-wrap .social-box .social-list > li:nth-child(2){background-color: #FEDF32;}
    #membership .social-wrap .social-box .social-list a figure{width: 52px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);}
    #membership .social-wrap .social-box .social-list a span{display: block; line-height: 56px; text-align: center; font-weight: inherit;}
    #membership .social-wrap .social-box .social-list > li:nth-child(1) a{color: #fff; font-weight: 600;}
    #membership .social-wrap .social-box .social-list > li:nth-child(1) a figure{filter: grayscale(1) brightness(10);}
    #membership .social-wrap .social-box .social-list > li:nth-child(2) a figure{width: 40px; left: 10px;} */

    #membership .social-wrap .social-box .social-list > li:nth-child(1){border: 1px solid #DEDFE5;}
    #membership .social-wrap .social-box .social-list > li:nth-child(2){background-color: #1CC75B; }
    #membership .social-wrap .social-box .social-list > li:nth-child(3){background-color: #FEDF32;}
    #membership .social-wrap .social-box .social-list a figure{width: 52px; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);}
    #membership .social-wrap .social-box .social-list a span{display: block; line-height: 56px; text-align: center; font-weight: inherit;}
    #membership .social-wrap .social-box .social-list > li:nth-child(2) a{color: #fff; font-weight: 600;}
    #membership .social-wrap .social-box .social-list > li:nth-child(2) a figure{filter: grayscale(1) brightness(10);}
    #membership .social-wrap .social-box .social-list > li:nth-child(3) a figure{width: 40px; left: 10px;}


    /*
        로그인, 회원가입 버튼
    */
    #membership .shortcut{font-size: var(--f-body1);}


    /*
        로그인
    */
    #membership .login{font-size: var(--f-body1);}
    #membership .login .submitBtn{background-color: transparent; color: var(--p-color2); border: 1px solid var(--p-color2); transition: all 0.3s ease;}
    #membership .login .submitBtn:hover{background-color: var(--p-color2); color: var(--n-white);}


    /* 비밀번호 찾기 - 이메일 아이디가 아니신가요? */
    #membership .findIdPw .otherBtnWrap{margin-top: 64px;}
    #membership .findIdPw .otherBtnWrap .otherBtn{padding: 10px 0;}


    /*
        회원가입 - 인트로
    */
    #membership .signUp .intro{font-size: var(--f-heading3); letter-spacing: -0.32px; line-height: 26px; font-weight: 700;}
    #membership .signUp .intro .btn-signup{width: 100%; font-weight: 600; margin-top: 24px; font-size: var(--f-heading2); height: 56px; line-height: 56px;}
    #membership .signUp .intro .btn-signup:hover{font-weight: 600;}
    #membership .signUp .intro .signup-wrap{padding-bottom: 38px;}
    #membership .signUp .intro .slideWrap{padding: 0; margin-top: 80px; overflow: initial; overflow: hidden;}
    #membership .signUp .intro .slideWrap .pointText{text-align: center;}
    #membership .signUp .intro .slideWrap .pointText p{font-size: var(--f-body1); padding: 6px 24px 6px 16px; line-height: 20px; height: 32px; border-radius: 8px 4px 4px 8px; margin-bottom: 16px;}
    #membership .signUp .intro .slideWrap .pointText p:after{border-width: 16px 7px 16px 7px;}
    #membership .signUp .intro .slideWrap .slide{padding-right: 0; max-width: 506px; left: 50%; transform: translateX(-50%);}
    #membership .signUp .intro .slideWrap .slide .slideNumber{display: none;}
}

@media screen and (min-width: 744px)  {
    #membership .signUp .intro .slideWrap .slide{max-width: 680px;}
    #membership .signUp .intro .slideWrap .slide .splide__list{display: flex; justify-content: space-between; column-gap: 16px;}
    #membership .signUp .intro .slideWrap .slide .splide__slide{padding: 16px; height: 180px; width: calc(100%/4 - 12px);}
    #membership .signUp .intro .slideWrap .slide .splide__slide em{font-weight: 400; line-height: 14px; letter-spacing: -0.22px;}
    #membership .signUp .intro .slideWrap .slide .splide__slide p{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px;}
    #membership .signUp .intro .slideWrap .slide .splide__slide p span{font-size: var(--f-body3);}
    #membership .signUp .intro .slideWrap .slide .splide__slide figure{background-size: 111%; background-position: bottom center;}
    #membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(1) figure{background-image: url('https://static.edmclass.com/common/membership/signUp-slide1_pc.png');}
    #membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(2) figure{background-image: url('https://static.edmclass.com/common/membership/signUp-slide2_pc.png');}
    #membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(3) figure{background-image: url('https://static.edmclass.com/common/membership/signUp-slide3_pc.png');}
    #membership .signUp .intro .slideWrap .slide .splide__slide:nth-child(4) figure{background-image: url('https://static.edmclass.com/common/membership/signUp-slide4_pc.png');}
}

@media screen and (min-width: 1200px) {
    /************************************
        멤버십 공통
    ************************************/
    body{line-height: 26px; letter-spacing: -0.28px;}

    #header.membershipHeader #allMenuWrap .dep2{height: auto;}



    /************************************
        멤버십 헤더
    ************************************/
    #header-membership [class^='mo-']{display: none !important;}
    #header-membership [class^='pc-']{display: block !important;}
    #header-membership{height: 130px;}
    #header-membership .topWrap{height: 90px;}



    /*
        sns
    */
    #membership .social-wrap{font-size: var(--f-heading2);}

    /*
        로그인
    */
    #membership .login .login-help .find-idpw{line-height: initial;}

    /*
        아이디 찾기
    */
    #membership .findPwd .certifyPhone label{width: calc(100% - 130px);}
    #membership .findPwd .btn-signup{height: 56px; }
    #membership .findPwd .global{width: 160px;}
    #membership .findPwd .phoneWrap.globalPhone .domestic{width: calc(100% - 160px);}
    #membership .findPwd .global .dropDownMenu{font-size: var(--f-heading3); letter-spacing: -0.32px;}
    #membership .findPwd .global .dropDownMenu .label{height: 56px; background-image: url('https://static.edmclass.com/common/new_selectArrow-24.svg'); background-size: 24px; background-position: right 16px center; padding: 0 40px 0 16px; border-radius: var(--b-radius3);}
    #membership .findPwd .global .dropDownMenu .label.active{background-image: url('https://static.edmclass.com/common/new_selectArrow-active-24.svg');}
    #membership .findPwd .global .dropDownMenu .selectBox .optionListWrap{top: 60px; padding: 8px;}
    #membership .findPwd .global .dropDownMenu .selectBox .optionListWrap .optionItem *{padding: 15px 12px;}
    /* 아이디 찾기 2단계 */
    #membership .findPwd.step2 .popup{max-width: 360px; padding: 56px 0 32px;}
    #membership .findPwd.step2 .popup .textWrap{ font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px;}

    /* 게시글이 없는 경우 */
    #membership #noData{padding: 85px 0 !important;}
    #membership #noData p{font-weight: 700; padding-top: 60px;}
    #membership #noData p::before{background-image: url('https://static.edmclass.com/common/board/no-data_pc.svg'); width: 46px; height: 46px;}




    /************************************
        멤버십
    ************************************/
    #membership{padding-bottom: 100px; letter-spacing: -0.32px; min-height: 1015px;}
    #membership .max-width{max-width: 384px;}
    /* #membership .btn-signup{font-size: var(--f-heading2); height: 56px; line-height: 56px; min-width: 122px;} */
    #membership .btn-signup{font-size: var(--f-heading2); min-width: 122px;}
    #membership .myPage .pageTitle{padding-bottom: 40px;}
    #membership .formWrap .tit,
    #membership .myPage .inputArea .input .tit{font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
    #membership .formWrap .message{line-height: 20px; font-size: var(--f-body1); letter-spacing: -0.28px;}
    #membership .submitBtn{border-radius: 12px;}




    /*
        회원가입 - 인트로
    */
    #membership .signUp .intro{letter-spacing: -0.36px; font-size: var(--f-heading2);}
    #membership .signUp .intro .signup-wrap{padding-bottom: 40px;}
    #membership .signUp .intro .slideWrap .slide{max-width: 792px;}
    #membership .signUp .intro .slideWrap .slide .splide__list{column-gap: 24px;}
    #membership .signUp .intro .slideWrap .slide .splide__slide{padding: 24px; width: calc(100%/4 - 18px);}
    #membership .signUp .intro .slideWrap .slide .splide__slide figure{background-size: cover;}
    #membership .signUp .intro .slideWrap .slide .splide__slide em{line-height: 16px; letter-spacing: -0.24px;}
    #membership .signUp .intro .slideWrap .slide .splide__slide p{font-size: var(--f-heading2); line-height: 26px; letter-spacing: -0.36px;}






    /*
        회원가입 - 가입신청
    */
    #membership .signUp .btn-signup{height: 56px; }
    #membership .signUp .join input{font-size: var(--f-heading3);}
    #membership .signUp .join .formWrap{font-size: var(--f-body1);}
    #membership .signUp .join .formWrap .input + .input{padding-top: 15px;}
    #membership .signUp .join .formWrap .inputBox > span{font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px; margin-top: 8px;}
    #membership .signUp .join .formWrap #certifyPhone label{width: calc(100% - 130px);}
    #membership .signUp .join .formWrap #certifyPhone label span{right: 16px;}
    #membership .signUp .join .formWrap .certifyPhone .timer{right: 46px;}
    #membership .signUp .join .formWrap .certifyPhone .inputBox.row label { width: 100%;}
    #membership .signUp .join .agreementWrap{padding-top: 24px; letter-spacing: -0.42px; line-height: normal;}
    #membership .signUp .join .formWrap .phoneWrap .chk{top: 12px;}
    #membership .signUp .join .formWrap .phoneWrap .global .dropDownMenu .label{height: 56px; border-radius: var(--b-radius3);}
    #membership .signUp .join .agreementWrap .chk-list .terms-wrap .terms-detail{height: 100px;}
    #membership .signUp .join .formWrap .phoneWrap.globalPhone .global{width: 160px;}
    #membership .signUp .join .formWrap .phoneWrap.type2.globalPhone .phoneBefore label{width: calc(100% - 168px);}
    #membership .signUp .join .formWrap .phoneWrap.type2.globalPhone .certifyPhone label{width: calc(100% - 130px);}





    /* 마이페이지 */
    #membership .myPage input[type="text"],
    #membership .myPage input[type="password"],
    #membership .myPage input[type="tel"],
    #membership .myPage input[type="email"],
    #membership .myPage select{height: 40px; border-radius: 8px; font-size: var(--f-body1); padding: 0 8px;}
    #membership .myPage input[type="date"]{width: calc(50% + 26px); padding: 0 0 0 8px;}



    #membership .myPage .max-width{max-width: 792px; position: relative;}
    #membership .myPage .btn-signup{/*height: 40px; line-height: 40px; */font-size: var(--f-body1); width: 130px;}
    #membership .myPage .submitBtn{width: 236px; margin: 33px auto 0; display: block; font-size: var(--f-heading2);}
    #membership .myPage .pageTitle{padding-bottom: 40px;}
    #membership .myPage .pageLink{max-width: 340px; margin: 0 auto;}
    #membership .myPage .messageBox{padding: 16px;}
    #membership .myPage .messageBox .dotList{font-size: var(--f-body1); }
    #membership .myPage .messageBox .dotList li{line-height: 24px; letter-spacing: -0.28px; padding-left: 17px;}
    #membership .myPage .messageBox .dotList li::before{top: 11px; left: 7px;}
    #membership .myPage .messageBox .message-title{padding-left: 27px; margin-bottom: 6px;}
    #membership .myPage .messageBox .message-title figure{left: 0;}

    #membership .myPage .inputArea strong{font-size: var(--f-heading2); padding-left: 24px; padding-top: 33px; line-height: 26px; letter-spacing: -0.36px;}
    #membership .myPage .inputArea strong::after{display: none;}
    #membership .myPage .wrap-round{border: 1px solid var(--s-color1); border-radius: var(--b-radius1); padding: 24px;}
    #membership .myPage .wrap-round.type2{padding: 16px 24px;}
    #membership .myPage .wrap-round > .input:first-child{padding-top: 0;}
    #membership .myPage .inputArea .input.borderN{border-top: 1px solid var(--s-color1);}
    #membership .myPage .inputArea .userWrap label{width: calc(50% - 12px); padding: 16px;}
    #membership .myPage .inputArea .userWrap label p{font-size: var(--f-body1); margin-bottom: 8px; line-height: 20px; letter-spacing: -0.28px;}
    #membership .myPage .inputArea .userWrap label input{font-size: var(--f-heading3); line-height: 22px;}
    #membership .myPage .inputArea .input{display: flex;}
    #membership .myPage .inputArea .input + .input{padding-top: 16px; margin-top: 16px;}
    #membership .myPage .inputArea .input > .tit{font-size: var(--f-body1); width: 156px; line-height: 20px; letter-spacing: -0.28px; padding-top: 8px;}
    #membership .myPage .inputArea .input > .roundWrap{width: calc(100% - 156px); border: none; padding: 0;}
    #membership .myPage .inputArea .input .inputBox + .inputBox{margin-top: 0;}
    #membership .myPage .inputArea .input .tit span{font-size: var(--f-body3); line-height: 16px; letter-spacing: -0.24px;}
    #membership .myPage .inputArea .snsManagement .sns .left {display: flex; align-items: center; font-size: var(--f-body1); width: calc(100% - 130px);}
    #membership .myPage .inputArea .snsManagement .sns .left .top{padding-left: 0; display: flex; align-items: center; font-size: var(--f-body1); width: 252px;}
    #membership .myPage .inputArea .snsManagement .sns .left .top figure{width: 40px; height: 40px; position: static; background-size: 53px; margin-right: 16px;}
    #membership .myPage .inputArea .snsManagement .sns .left .top figure.naver{background-size: 56px;}
    #membership .myPage .inputArea .snsManagement .sns .left .top figure.kakao{background-size: 41px;}
    #membership .myPage .inputArea .snsManagement .sns .email{margin-top: 0;}
    #membership .myPage .inputArea .snsManagement .sns .right{width: 130px; height: 40px;}
    #membership .myPage .inputArea .snsManagement .sns .right .buttonWrap{width: 130px; height: 40px; border-radius: var(--b-radius0); overflow: hidden; color: var(--n-deactivate); display: block; position: relative; text-align: center; background-color: var(--b-color4); line-height: 40px; font-size: var(--f-body1);}
    #membership .myPage .inputArea .snsManagement .sns .right .buttonWrap button{width: 100%; height: 100%; background-color: var(--b-color4); background-color: transparent; border-radius: 0; position: absolute; top: 0; left: 0;}
    #membership .myPage .inputArea .snsManagement .sns .right .buttonWrap button::after{display: none;}
    #membership .myPage .inputArea .snsManagement .sns .right .buttonWrap span{display: inline-block;}
    #membership .myPage .inputArea .snsManagement .sns .right .buttonWrap.active{color: var(--p-color2); border: 1px solid var(--p-color2); background-color: var(--n-white);}
    #membership .myPage .inputArea .snsManagement .sns .right .buttonWrap.active button{background-color: transparent;}
    #membership .myPage .inputArea .input .roundWrap .box + .box{margin-top: 8px;}
    #membership .myPage .inputArea .password .btn-signup{width: 130px;}
    #membership .myPage .formWrap .message{font-size: 11px; width: calc(100% - 286px); left: 294px; bottom: -20px; padding-left: 8px;}
    #membership .myPage .inputArea .phoneNumber{position: relative; flex-wrap: wrap; justify-content: flex-end;}
    #membership .myPage .inputArea .phoneNumber .inputBox{width: calc(100% - 156px);}
    #membership .myPage .inputArea .phoneNumber .phoneBox label{width: calc(100% - 138px);}
    #membership .myPage .inputArea .phoneNumber .inputBox.certifyPhone{position: relative; margin-top: 8px;}
    #membership .myPage .inputArea .phoneNumber .certifyPhone label{width: calc(100% - 138px);}
    #membership .myPage .inputArea .phoneNumber .timer{position: absolute; right: 33px;}

    /* #membership .myPage .inputArea .phoneNumber .timer{display: none;} */
    /* #membership .myPage .inputArea .phoneNumber.type2{flex-wrap: wrap; justify-content: flex-end;}
    #membership .myPage .inputArea .phoneNumber.type2 .timer{display: block; position: absolute; bottom: 15px; right: 166px;}
    #membership .myPage .inputArea .phoneNumber.type2 .phoneBox{width: calc(100% - 156px);}
    #membership .myPage .inputArea .phoneNumber.type2 .certifyPhone{width: calc(100% - 156px); padding-left: 0; margin-top: 8px;}
    #membership .myPage .inputArea .phoneNumber.type2 .certifyPhone label{display: block; width: calc(100% - 130px);} */
    #membership .myPage .inputArea .address{flex-wrap: wrap; justify-content: flex-end;}
    #membership .myPage .inputArea .address .inputBox{width: calc(100% - 156px);}
    #membership .myPage .inputArea .address .inputBox.flex label{width: calc(100% - 138px);}
    #membership .myPage .inputArea .address .inputBox + .inputBox{margin-top: 8px;}
    #membership .myPage .inputArea .messageBox.type2{padding-left: 0;}
    #membership .myPage .inputArea .messageBox.type2 em{font-size: var(--f-body1); font-weight: 700; line-height: 20px;}
    #membership .myPage .inputArea .messageBox.type2 em + p{font-size: var(--f-body3); padding-left: 6px; line-height: 16px;}
    #membership .myPage .wrap-round.type2 .input{width: 100%;}
    #membership .myPage .wrap-round.type2 .input .tit{width: 156px;}
    #membership .myPage .wrap-round.type2 .input .tit + *{width: calc(100% - 156px);}
    #membership .myPage .wrap-round.type2 .input .box{display: flex; align-items: center;}
    #membership .myPage .wrap-round.type2 .input > .roundWrap{width: 100%;}
    #membership .myPage .wrap-round.type2 .notification {display: block;}
    #membership .myPage .wrap-round.type2 .notification .roundWrap{display: flex; flex-wrap: wrap;}
    #membership .myPage .wrap-round.type2 .notification .roundWrap .box{width: 100%;}
    #membership .myPage .wrap-round.type2 .notification .roundWrap .box.agreeTit{width: 50%; margin-top: 16px;}
    #membership .myPage .wrap-round.type2 .notification .roundWrap .box.agreeTit .tit{width: 100%; display: flex; align-items: center; margin: 0; height: 100%;}
    #membership .myPage .wrap-round.type2 .notification .roundWrap .box.agreeTit .tit span{display: inline-block; font-size: var(--f-body3);}
    #membership .myPage .wrap-round.type2 .notification .roundWrap .box.chkWrap{width: 50%; margin-top: 16px; padding-left: 19px;}
    #membership .myPage .wrap-round.type2 .notification > .tit{width: 100%; font-weight: 700; padding-bottom: 16px; border-bottom: 1px solid var(--s-color1); padding-left: 0; margin-bottom: 16px;}
    #membership .myPage .wrap-round.type2 .input.examInfo .box + .box{margin-top: 16px;}

    #membership .myPage .inputArea .input.examInfo .roundWrap{width: 100%;}
    #membership .myPage .inputArea .input.examInfo .box{display: flex; align-items: center;}
    #membership .myPage .inputArea .input.examInfo .box > .tit{width: 156px; margin-bottom: 0;}
    #membership .myPage .inputArea .input.examInfo .box > .right{width: calc(100% - 156px);}
    #membership .myPage .inputArea .input.examInfo .box + .box{margin-top: 16px;}

    #membership .myPage .inputArea .input.notification{display: block;}
    #membership .myPage .inputArea .input.notification > .tit{font-weight: 700; width: 100%; border-bottom: 1px solid var(--s-color1); padding-bottom: 16px; margin-bottom: 16px;}
    #membership .myPage .inputArea .input.notification .roundWrap{width: 100%; display: flex; flex-wrap: wrap;}
    #membership .myPage .inputArea .input.notification .roundWrap .box{display: flex; align-items: center; width: 100%;}
    #membership .myPage .inputArea .input.notification .roundWrap .box > .tit{width: 156px;}
    #membership .myPage .inputArea .input.notification .roundWrap .box > .right{width: calc(100% - 156px);}
    #membership .myPage .inputArea .input.notification .roundWrap .box.agreeTit{width: 385px;}
    #membership .myPage .inputArea .input.notification .roundWrap .box.agreeTit > .tit{width: 100%;}
    #membership .myPage .inputArea .input.notification .roundWrap .box.agreeTit > .tit span{display: inline-block;}
    #membership .myPage .inputArea .input.notification .roundWrap .box.chkWrap{width: calc(100% - 385px);}
    #membership .myPage .inputArea .input.notification .roundWrap .box + .box{margin-top: 16px;}

    #membership .myPage .inputArea .notification .chk label{width: auto;}
    #membership .myPage .inputArea .notification .chk label + label{margin-left: 40px;}
    #membership .myPage .delete{border-top: none; position: absolute; bottom: -40px; right: 0;}
    #membership .myPage .delete .box{justify-content: flex-end; width: 100%; padding-right: 22px;}
    #membership .myPage .delete .txt{margin-right: 17px;}



    /* 마이페이지 - 회원 탈퇴 */
    #membership .myPage.delete .input-wrap .title{font-size: var(--f-heading2); text-align: center; line-height: 26px; letter-spacing: -0.36px; margin-top: 32px;}
    #membership .myPage.delete .messageBox{padding: 24px 16px; }
    #membership .myPage.delete .input-wrap .messageBox.chk{padding-left: 40px;}
    #membership .myPage.delete .input-wrap .messageBox.chk .message-title{margin-bottom: 24px; margin-left: -16px;}
    #membership .myPage.delete .input-wrap .messageBox.chk label{width: calc(100%/3 - 3px); display: inline-block;}
    #membership .myPage.delete .input-wrap .messageBox.chk label + label{margin-top: 0; margin-bottom: 23px;}
    #membership .myPage.delete .input-wrap .messageBox.chk .last-chk{margin-top: 8px;}
    #membership .myPage.delete .input-wrap .messageBox.chk .last-chk label{width: 100%;}
    #membership .myPage.delete .input-wrap .messageBox.chk .last-password span{width: 102px; font-size: var(--f-body1);}
    #membership .myPage.delete .input-wrap .messageBox.chk .last-password label{width: calc(100% - 102px);}
    #membership .myPage.delete .input-wrap .messageBox.chk .last-password label input[type="password"]{background-size: 16px; background-position: right 12px center;}
    #membership .myPage.delete .submitBtn{margin-top: 32px;}




    /* 마이페이지 > 결제/배송조회 */
    #membership .myPage.payment .max-width{max-width: 1200px;}
	#membership .myPage.payment .input-wrap .infoTxt{padding-top: 0;}
    #membership .myPage.payment.first .messageBox{padding: 16px;}
    #membership .myPage.payment.first .messageBox p{display: inline-block;}
    #membership .myPage.payment.first .input-wrap .messageBox a{font-size: var(--f-body3); font-weight: 600;}
    #membership .myPage.payment.first .input-wrap .user-paymentList{display: flex; border-bottom: none;}
    #membership .myPage.payment.first .input-wrap .user-paymentList:last-child{border-bottom: 1px solid var(--s-color1);}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li{min-height: initial; width: auto; display: block; }
    #membership .myPage.payment.first .input-wrap .user-paymentList > li .title{width: 100%; text-align: center; font-size: var(--f-body1); border-bottom: 1px solid var(--s-color1);}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li .textWrap{width: 100%; padding: 0; min-height: 64px; text-align: center; padding: 12px 0; justify-content: center; align-items: center;}
    #membership .myPage.payment.first .input-wrap .user-paymentList:first-child > li .textWrap{height: calc(100% - 49px);}
    #membership .myPage.payment.first .input-wrap .user-paymentList .orderNumber{width: 190px; }
    #membership .myPage.payment.first .input-wrap .user-paymentList .service{width: 90px;}
    #membership .myPage.payment.first .input-wrap .user-paymentList .orderDetails{width: 336px;}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li.orderDetails .textWrap{text-align: left; padding: 0 16px; justify-content: flex-start;}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li.orderDetails .textWrap > p{padding: 12px 16px 12px 0; min-height: 64px; position: relative; display: flex; justify-content: center; flex-direction: column;}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li.orderDetails .textWrap .orderDetail-btn{background-position: right center;}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li.orderDetails .textWrap > p::after{content: ''; position: absolute; width: 1200px; height: 1px; bottom: 0; left: -296px; background-color: var(--s-color1); opacity: 0;}
    #membership .myPage.payment.first .input-wrap .user-paymentList.line > li.orderDetails .textWrap > p::after{opacity: 1;}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li.orderDetails .toggle{width: 100%; padding-top: 0;}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li.orderDetails .toggle p{font-weight: 700; color: var(--n-info); position: relative;}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li.orderDetails .toggle p::after{content: ''; position: absolute; width: calc(100% + 16px); height: 73%; background-color: var(--b-color4); border-radius: 8px; left: -16px; top: 50%; transform: translateY(-50%); z-index: -1; opacity: 0;}
    #membership .myPage.payment.first .input-wrap .user-paymentList > li.orderDetails .toggle p:hover::after{opacity: 1;}
    #membership .myPage.payment.first .input-wrap .user-paymentList .state{width: 90px;}
    #membership .myPage.payment.first .input-wrap .user-paymentList .price{width: 140px;}
    #membership .myPage.payment.first .input-wrap .user-paymentList .price .textWrap{justify-content: flex-end;}
    #membership .myPage.payment.first .input-wrap .user-paymentList .date{width: 120px;}
    #membership .myPage.payment.first .input-wrap .user-paymentList .shipping{width: 117px; }
    #membership .myPage.payment.first .input-wrap .user-paymentList .receipt{width: 117px; }

    #membership .myPage.payment.first .input-wrap .user-paymentList + .user-paymentList{margin-top: 0; border-top: none; /*border-bottom: 1px solid var(--s-color1);*/}
    #membership .myPage.payment.first .input-wrap .user-paymentList + .user-paymentList > li .title{display: none;}

    /* 마이페이지 - 주문 상세 */
    #membership .myPage.payment.orderView .input-wrap .infoTxt{display: none;}
    #membership .myPage.payment.orderView .input-wrap .user-paymentList .title{text-align: center; font-size: var(--f-body1); width: 180px; line-height: 20px; padding: 22px 16px; display: flex; justify-content: center; align-items: center; background-color: var(--b-color5);}
    #membership .myPage.payment.orderView .input-wrap .user-paymentList .textWrap{font-size: var(--f-body1); padding: 22px 16px; width: calc(100% - 180px);}
    #membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .priceWrap p span{display: inline-block;}
    #membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .priceWrap + .priceWrap{border-top: none; padding-top: 12px;}
    #membership .myPage.payment .input-wrap .user-paymentList > li .textWrap.sb{justify-content: flex-end; flex-direction: row-reverse; }
    #membership .myPage.payment .input-wrap .user-paymentList > li .textWrap.sb .detail{margin-left: 32px;}
    #membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .price{text-align: left;}
    #membership .myPage.payment .input-wrap .user-paymentList > li .textWrap .price span{font-size: var(--f-body3);}
    #membership .myPage.payment.orderView .input-wrap .user-paymentList.user{display: flex;}
    #membership .myPage.payment.orderView .input-wrap .user-paymentList.user > li .title{padding: 14px 16px; background-color: var(--b-color4);}
    #membership .myPage.payment.orderView .input-wrap .user-paymentList.user > li .textWrap{width: 216px; padding: 14px 16px; }
    #membership .myPage.payment.orderView .input-wrap .user-paymentList.user > li:first-child .textWrap{width: 228px;}

    /* 마이페이지 - 쿠폰 내역 */
    #membership .myPage.payment .input-wrap .messageBox .couponBox{width: 600px; }
    #membership .myPage.payment .input-wrap .messageBox .couponBox label{width: calc(100% - 138px);}
    #membership .myPage.payment .input-wrap .messageBox .couponBox .btn-signup{width: 130px;}
    #membership .myPage.payment.coupon .messageBox{padding-left: 24px; padding-right: 24px;}
    #membership .myPage.payment.coupon .inputArea .input.message{margin: 0; padding: 0;}
    #membership .myPage.payment.coupon .inputArea .input.message + .input{border-top: none; padding-top: 0;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList{display: flex; border-bottom: none;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList + .user-paymentList{margin-top: 0; border-top: none;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList + .user-paymentList .title{display: none;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList:last-child{border-bottom: 1px solid var(--s-color1);}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList > li{display: block; min-height: initial;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .code{width: 124px;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .service{width: 120px;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .name{width: 436px;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .discount{width: 140px;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .date{width: 140px;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .use{width: 240px;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList > li .title{width: 100%; text-align: center; font-size: var(--f-body1);}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList > li .textWrap{width: 100%; padding: 12px 16px; flex-wrap: nowrap; justify-content: space-between; text-align: center; min-height: 64px;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList > li .textWrap .detail{width: auto;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .textWrap p + .detail{margin-top: 0;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .code .textWrap,
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .service .textWrap,
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .date .textWrap{justify-content: center; align-items: center;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .discount .textWrap{justify-content: flex-end;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .date .textWrap{flex-wrap: wrap;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .date .textWrap p{width: 100%;}
    #membership .myPage.payment.coupon .input-wrap .user-paymentList .use .textWrap{flex-wrap: wrap;}



    /*************************************************************
        hover effect
    *************************************************************/
    @media (hover: hover) and (pointer: fine) {
        .popupWrap .popup .popupClose:hover{background-color: var(--p-color2); color: var(--n-white);}
    }
}




/*************************************************************
    hover effect
*************************************************************/
@media (hover: hover) and (pointer: fine) {
    #membership .btn-signup:hover{background-color: var(--p-color2); color: var(--n-white); font-weight: 400;}
    #membership .myPage.payment.coupon .input-wrap .messageBox .couponBox .btn-signup:hover{background-color: var(--p-color2) !important;}

	#membership .myPage #mypageForm .submitBtn:hover{background-color: var(--n-subTitle);}
}