@charset "utf-8";
@font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Thin/notokr-thin.eot'); src: url('/support/notosans-kr/NotoKR-Thin/notokr-thin.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Thin/notokr-thin.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Thin/notokr-thin.woff') format('woff'), url('/support/notosans-kr/NotoKR-Thin/notokr-thin.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Thin/notokr-thin.svg#notokr-thin') format('svg'); font-weight: 100; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Light/notokr-light.eot'); src: url('/support/notosans-kr/NotoKR-Light/notokr-light.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Light/notokr-light.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Light/notokr-light.woff') format('woff'), url('/support/notosans-kr/NotoKR-Light/notokr-light.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Light/notokr-light.svg#notokr-light') format('svg'); font-weight: 200; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.eot'); src: url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.woff') format('woff'), url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.svg#notokr-demilight') format('svg'); font-weight: 300; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Regular/notokr-regular.eot'); src: url('/support/notosans-kr/NotoKR-Regular/notokr-regular.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Regular/notokr-regular.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Regular/notokr-regular.woff') format('woff'), url('/support/notosans-kr/NotoKR-Regular/notokr-regular.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Regular/notokr-regular.svg#notokr-regular') format('svg'); font-weight: 400; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Medium/notokr-medium.eot'); src: url('/support/notosans-kr/NotoKR-Medium/notokr-medium.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Medium/notokr-medium.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Medium/notokr-medium.woff') format('woff'), url('/support/notosans-kr/NotoKR-Medium/notokr-medium.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Medium/notokr-medium.svg#notokr-medium') format('svg'); font-weight: 500; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Bold/notokr-bold.eot'); src: url('/support/notosans-kr/NotoKR-Bold/notokr-bold.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Bold/notokr-bold.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Bold/notokr-bold.woff') format('woff'), url('/support/notosans-kr/NotoKR-Bold/notokr-bold.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Bold/notokr-bold.svg#notokr-bold') format('svg'); font-weight: 700; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Black/notokr-black.eot'); src: url('/support/notosans-kr/NotoKR-Black/notokr-black.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Black/notokr-black.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Black/notokr-black.woff') format('woff'), url('/support/notosans-kr/NotoKR-Black/notokr-black.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Black/notokr-black.svg#notokr-black') format('svg'); font-weight: 900; font-style: normal; }
html{-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body{width: 100%; height: 100%; }
html, input, button, select, textarea, optgroup{font-family: "Noto Sans KR", dotum, sans-serif; line-height: 1.6; }
body{padding: 0; margin: 0; }


@-webkit-keyframes membership-effect {
    from {-webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
    10%, 20% {-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -4deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -4deg); }
    30%, 50%, 70%, 90% {-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 4deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 4deg); }
    40%, 60%, 80% {-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -4deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -4deg); }
    to {-webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
}
@keyframes membership-effect {
    from {-webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
    10%, 20% {-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -4deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -4deg); }
    30%, 50%, 70%, 90% {-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 4deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 4deg); }
    40%, 60%, 80% {-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -4deg); transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -4deg); }
    to {-webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
}
.membership-effect{-webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: membership-effect; animation-name: membership-effect; }

/**
 * 레이아웃
 */
.membership-bs-bb{-webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.membership-container{max-width: 450px; margin: 0 auto; letter-spacing: -1px; }

.membership-layout{display: table; width: 100%; height: 100vh; line-height: 1.6; word-break: keep-all; background-color: #f5f5f5; }
.membership-layout > div ,
.membership-layout > section {display: table-cell; vertical-align: middle; }
.membership-layout button{cursor: pointer; }
.membership-layout a{text-decoration: none; color: inherit; transition: color .2s ease; }
.membership-layout a.active,
.membership-layout a:hover{color: #DE5252; }
/**
 * 맴버쉽 하단
 */
.membership-footer{margin: 15px 0 60px; text-align: center; color: #71808e; font-size: 14px; }
.membership-footer span{display: inline-block; vertical-align: middle; margin: -6px 5px 0; color: #c6ccd2; }
.membership-footer-info{margin-top: 15px; padding-top: 15px; border-top: 1px solid #c6ccd2; font-size: 12px; }
/**
 * 로고
 */
.membership-logo{display: block; margin: 60px auto 0; text-align: center; }
.membership-logo > a{display: inline-block; vertical-align: middle; }
.membership-logo > a > img{display: block; margin: 0 auto; max-width: 100%; }
/**
 * 테이블
 */
.membership-table{width: 100%; border-collapse: collapse; border-spacing: 0; background-color: #fff; border: 1px solid #c6ccd2; }
.membership-table tr{border-bottom: 1px solid #c6ccd2; }
.membership-table tr:last-child{border: 0; }
.membership-table th{line-height: 60px; vertical-align: top; padding: 0 15px; font-size: 14px; font-weight: 400; text-align: left; color: #000; white-space: nowrap; }
.membership-table td{vertical-align: top; }
.membership-table p{font-size: 11px; color: #DE5252; margin: 0 0 15px; padding: 0; }
.membership-table p.active{color: #71808e; }
.membership-table p.active2{color: #ff0000; }
/**
 * 약관
 */
.membership-policy{border: 1px solid #c6ccd2; background-color: #fff; }
.membership-policy-box{position: relative; padding: 15px; }
.membership-policy-box.active{border-bottom: 1px solid #c6ccd2; }
.membership-policy-box .msel-checkbox{margin: 0; padding-right: 60px; }
.membership-policy-box > button{position: absolute; top: 21px; right: 15px; border: 0; background-color: transparent; color: #DE5252; font-size: 12px; }
/**
 * 아이디/비밀번호 찾기 탭
 */
.membership-tab{border-bottom: 1px solid #c6ccd2; }
.membership-tab:after{content: ""; display: block; width: 100%; clear: both; }
.membership-tab > label{position: relative; float: left; width: 50%; height: 40px; line-height: 40px; border: 0; color: #71808e; background-color: transparent; font-size: 13px; text-align: center; }
.membership-tab > label > input{position: absolute; width: 0; }
.membership-tab > label > input:checked + strong{color: #DE5252; }
.membership-tab > label > input:checked ~ em{position: absolute; z-index: 1; bottom: -1px; left: 0; right: 0; height: 3px; background-color: #DE5252; }
.membership-tab > label > input:checked ~ span{position: absolute; top: 14px; left: 0; width: 15px; height: 6px; border: 3px solid #DE5252; border-top: 0; border-right: 0; -webkit-transform : rotate(-45deg); transform : rotate(-45deg); }
/**
 * 로그인 / 소셜 부분
 */
.signin-box{position: relative; }
.signin-box > label{margin: 10px 0 0; }
.signin-box-social{position: absolute; top: 5px; right: 0; text-align: right; }
.signin-box-social > button{display: inline-block; vertical-align: middle; width: 35px; border: 0 ; padding: 0; background-color: transparent; outline: none; }
.signin-box-social > button > img{display: block; }
/**
 * 아이디/비밀번호 찾기 안내문
 */
.membership-confirm{padding: 30px 0; text-align: center; }
.membership-confirm > strong{display: inline-block; vertical-align: bottom; color: #DE5252; font-size: 20px; }
/**
 * 아이콘 (물음표 | 체크)
 */
.membership-chk{position: relative; margin: 0 auto; text-align: center; }
.membership-chk:before{content: ""; display: inline-block; vertical-align: middle; padding: 12%; border-radius: 100%; border: 3px solid #DE5252; }
.membership-chk:after{content: ""; position: absolute; left: 45%; top: 50%; border: 5px solid #DE5252; width: 10%; height: 20%; margin-top: -5%; border-top: 0; border-right: 0; transform : rotate(-45deg); }
.membership-active{position: relative; margin: 0 auto; text-align: center; }
.membership-active:before{content: ""; display: inline-block; vertical-align: middle; padding: 12%; border-radius: 100%; border: 3px solid #DE5252; }
.membership-active:after{content: ""; position: absolute; left: 50%; top: 20%; margin-left: -2px; border: 2px solid #DE5252; height: 40%; border-radius: 20px; }
.membership-active > em{position: absolute; bottom: 20%; left: 50%; margin-left: -3px; border: 3px solid #DE5252; border-radius: 100%; }
/**
 * 엘리먼트
 */
.msel-checkbox{display: inline-block; vertical-align: middle; margin-left: 10px; cursor: pointer; }
.msel-checkbox > em{position: relative; display: inline-block; vertical-align: middle; width: 22px; height: 22px; margin: -3px 5px 0 0; border: 1px solid #c6ccd2; background-color: #fff; }
.msel-checkbox > em:before{content: ""; position: absolute; display: block; width: 20px; height: 10px; border: 3px solid #ddd; border-right: 0; border-top: 0; -webkit-transform : rotate(-45deg); transform : rotate(-45deg); }
.msel-checkbox > input{position: absolute; width: 0; }
.msel-checkbox > input:checked + em:before{border-color: #DE5252; }
.msel-checkbox:last-child{margin-right: 10px; }
.msel-input{display: block; width: 100%; height: 60px; padding-right: 10px; line-height: 60px; font-size: 16px; border: 0; outline: none; }
.msel-input:focus{color: #DE5252; }
.msel-input::placeholder {color: #c6ccd2; }
.msel-input:-ms-input-placeholder {color: #c6ccd2; }
.msel-input::-ms-input-placeholder {color: #c6ccd2; }
.msel-btn{display: block; width: 100%; height: 65px; line-height: 65px; padding: 0 15px; font-size: 16px; font-weight: 500; background-color: transparent; border: 1px solid #DE5252; color: #DE5252; transition: background-color .2s ease; }
.msel-btn.active2{border-color: #B9C0C8; background-color: #B9C0C8; color: #fff; }
.msel-btn.active,
.msel-btn:focus,
.msel-btn:hover{border-color: #DE5252; background-color: #DE5252; color: #fff; }
.msel-btn2{display: block; width: 100%; height: 25px; line-height: 25px; margin: 17.5px 0; padding: 0 15px; background-color: transparent; color: #DE5252; border: 0; border-left: 1px solid #DE5252; font-weight: 500; outline: none; }
/**
 * 엘리먼트 - 버튼 코멘트
 */
.msel-comment{position: relative; margin-bottom: 5px; font-weight: 500; color: #DE5252; text-align: center; }
.msel-comment:before,
.msel-comment:after{content: ""; position: absolute; top: 50%; left: 50%; width: 40px; border-top: 1px solid #DE5252; }
.msel-comment:before{margin: 0 0 0 -110px; }
.msel-comment:after{margin: 0 0 0 70px; }
.msel-comment.active{color: #aaa; }
.msel-comment.active:before,
.msel-comment.active:after{border-color: #aaa; }
/**
 * 엘리먼트 - 버튼 묶기
 */
.msel-group{width: 100%; }
.msel-group:after{content: ""; display: block; width: 100%; clear: both; }
.msel-group > button{float: left; width: 50%; }




@media (min-width: 1024px)
{
    .membership-container{padding: 0 60px; font-size: 16px; }
}
@media (max-width: 1023px) and (min-width: 640px)
{
    .membership-container{padding: 0 60px; font-size: 16px; }
}
@media (max-width: 639px) and (min-width: 321px)
{
    .membership-container{padding: 0 30px; }
}
@media (max-width: 320px)
{
    .membership-container{padding: 0 15px; }
}
@media (max-width: 639px)
{
    .membership-container{font-size: 12px; }
    .membership-footer{font-size: inherit; }
    .membership-policy-box > button{top: 15px; }
    .membership-table th{line-height: 50px; font-size: 12px; }
    .msel-input{height: 50px; line-height: 50px; }
    .msel-btn{height: 55px; line-height: 55px; }
    .msel-btn2{margin: 12.5px 0; }
    .membership-confirm{font-size: 15px; }
    .membership-confirm > strong{font-size: 15px; }
}