#contentWrap{display: flex;justify-content: center;-ms-flex-pack: center;align-items: center;height: calc(100% - 171px);}
#app{max-width: 550px;width: 100%;margin: 0 1em;}
#app>#loginArea{width: 100%;max-width: 550px;display: flex;}
#app>#loginArea>#methodSelector{display: flex;flex-direction: column;margin-right: 2em;width: 13em;}
#methodSelector>input{display: none;}
#methodSelector>input + label{padding: 2em;border-radius: 1em;background: linear-gradient(0deg, #ddd 0%, #fff 100%);cursor: pointer;border: 1px solid #ddd;font-weight: bold;}
#methodSelector>input + label:not(:last-child){margin-bottom: 1em;}
#methodSelector>input + label>.point{}
#methodSelector>input + label.member>.point{color: #4472c4;}
#methodSelector>input + label.caddie>.point{color: #ff7174;}
#methodSelector>input:checked + label{background: linear-gradient(0deg, #eee 0%, #ccc 100%);}

#app>#loginArea>#loginForm{display: flex;flex-direction: column;flex: auto;}
#loginForm>#loginInfo{flex: auto;font-size: 14px;}
#loginForm>#loginInfo>section{}
#loginForm>#loginInfo>section.member{}
#loginForm>#loginInfo>section.member>.inputWrap{border: 2px solid #ddd;}
#loginForm>#loginInfo>section.member>.inputWrap:not(:last-child){margin-bottom: 1em;}
#loginForm>#loginInfo>section.member>.inputWrap>input{display: block;background: #fff;border: none;padding: 0.5em 0.5em;width: 100%;font-family: sans-serif;}
#loginForm>#loginInfo>section.caddie{}
#loginForm>#loginInfo>section.caddie>.inputWrap{border: 2px solid #ddd;}
#loginForm>#loginInfo>section.caddie>.inputWrap>input{display: block;background: #fff;padding: 0.5em 0.5em;width: 100%;border: none;}
#loginForm>#loginInfo>section.caddie>.otpArea{display: flex;margin-top: 1em;border: 2px solid #ddd;padding: 0.2em 0.5em;color: #999;align-items: center;background: #fff;}
#loginForm>#loginInfo>section.caddie>.otpArea>label{margin: auto 1em auto 0;color: #777;}
#loginForm>#loginInfo>section.caddie>.otpArea>div{flex: auto;display: flex;}
#loginForm>#loginInfo>section.caddie>.otpArea>div>.otpCode{background: transparent;width: 5em;color: #000;flex: auto;line-height: 1.6em;border: 1px solid #ddd;}
#loginForm>#loginInfo>section.caddie>.otpArea>div>.otpCode:disabled{background: #f1f1f1;}
#loginForm>#loginInfo>section.caddie>.otpArea>div>.otpTime{text-align: right;width: 3em;line-height: 1.8em;color: #555;}
#loginForm>#loginInfo>section.caddie>.otpArea>button{background: #666;border: none;height: 100%;width: 4em;color: #fff;padding: 0.2em 0;margin-left: 0.3em;border-radius: 0.5em;font-size: 0.9em;}

#loginForm>#loginButtons{}
#loginForm>#loginButtons>button{display: block;width: 100%;padding: 0.7em 0.5em;margin-bottom: 0.5em;border: none;color: #fff;cursor: pointer;}
#loginForm>#loginButtons>button.member{background: #104ea1;}
#loginForm>#loginButtons>button.caddie{background: #ef97b0;}
#loginForm>#loginButtons>input{display: none;}

@media (max-width: 991px) {
}
@media (max-width: 576px) {
}