.account > .box { width: 100%; margin-left: auto; margin-right: auto; }
.account h1,
.account h2,
.account h3,
.account h4,
.account h5,
.account h6 { color: #666; }

.account .account-header > a { color: #666; }
.account .account-header > a, 
.account .account-header > .icon { display: block; }
.account .account-header p { color: #999; }
.account .account-header p strong { color: #ff0000; vertical-align: middle; }
.account .account-sub-header { font-weight: bold; }
.account.account2 .account-header > a, 
.account.account2 .account-header > .icon { float: left; }
.account.account2 .account-header > a { margin-right: 20px; }

.account h1 { font-size: 18px; font-weight: 700; }
.account .btn-block { width: 100%; font-weight: bold; }
.login-brand { text-align: center; }
.login-brand > img { height: auto; }
.login-brand p { color: #666; }
.login-brand p.copyright { font-size: 11px; letter-spacing: -0.5px; margin-bottom: 0; }

.account .account-body .area { position: relative; }

.account .form-icon-inner i { color: #b5b5b5; }
.account .form-icon-inner input:-internal-autofill-selected + i { color: #9ba5b7; }
.account .form-icon-inner .form-control { padding-left: 40px; }
.account .login-additional { overflow: hidden; margin-bottom: 20px; }
.account .login-additional .checks { float: left; }
.account .login-additional .checks label { font-size: 13px; color: #8d8d8d; }
.account .login-additional .reset-pass { float: right; font-size: 13px; color: #8d8d8d; text-decoration: underline; }
.account button[type="submit"] { height: 50px; }

.account .login-button .btn { width: 100%; }

.account .provider { margin-top: 36px; }
.account .provider .btn { max-width: 140px; height: 35px; font-size: 0.875rem; }

.account .form-group { position: relative; padding-top: 0; padding-bottom: 0; }
.form-group.essential label:after { content: '\002A'; display: inline; color: #ff0000; margin-left: 5px; font-size: 18px; vertical-align: middle; }
.account .form-group .form-condition { color: #999; }
.account .complete input[readonly] { background-color: #ccf2f3; border-color: #bbe4e5; color: #458486; }
.account .complete input[readonly] + i { color: #5ca0a2; }
.account .complete p { color: #999; }
.account .complete p strong { font-weight: 500; color: #f37268; }
.account-footer .join-message { color: #999; text-align: center; }
/*
.account.term { max-width: 720px; }
.term p { font-size: 13px; margin-bottom: 6px; }
.term p.t-h1 { font-size: 16px; font-weight: bold; margin: 40px 0 20px; }
.term p.t-h2 { font-size: 14px; font-weight: bold; margin: 25px 0 15px; }
.term ol { padding-left: 15px; }
.term li { margin-bottom: 6px; font-size: 13px; }
.term ol > li { list-style-type: decimal; }
    */
.login .providers { text-align: left; margin-bottom: 20px; padding: 10px 0 20px; border-bottom: 1px dashed #e0e0e0; }
.login .providers h6 { margin-bottom: 8px; }
.login .providers form { display: flex; margin-left: -4px; margin-right: -4px; }
.login .providers .provider {
    flex: 1; height: auto; margin: 0 4px;
    background-color: #fff; border: 1px solid #e6e6e6; padding: 10px; border-radius: 4px;
}
.login .providers .provider i {
    display: inline-block; vertical-align: middle;
    width: 30px; height: 30px;
    background-image: url('../images/provider_sm.png');
    background-size: 90px 30px;
    margin-right: 8px; 
    margin-bottom: 0;
}
.login .providers .provider.Google i { background-position-x: 0; }
.login .providers .provider.Naver i { background-position-x: -30px; }
.login .providers .provider.Kakao i { background-position-x: -60px; }
.login .providers .provider p { display: inline-block; vertical-align: middle; font-size: 14px; }

.form-description {
    background-color: #fafafa; border: 1px solid #e7e7e7; border-radius: 4px; 
    padding: 7px;
    font-size: 12px; color: #888; }

@media only screen and (min-width: 841px) { /* desktop */
    .account { position: relative; padding-top: 180px; padding-bottom: 120px; }
    .account > .box {
        max-width: 420px; min-height: 420px; 
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
        padding: 30px 35px; 
    }
    .account.account-sm > .box { max-width: 360px; }
    .account.account2 > .box { max-width: 920px; }
    .account.account2.login > .box{ max-width: 840px; }
    
    .account .account-header { margin-bottom: 20px; }
    .account .account-header > a, 
    .account .account-header > .icon { width: 24px; height: 24px; margin-bottom: 32px; font-size: 24px; }
    .account .account-header p { font-size: 13px; margin-top: 12px; margin-bottom: 0; }
    .account .account-header p strong { font-size: 18px; }
    .account .account-sub-header { font-size: 16px; }

    .account-body { flex-grow: 1; }

    .account2 .account-body { display: flex; margin-left: -30px; margin-right: -30px; clear: left; }
    .account2 .account-body .area { width: 50%; padding-left: 30px; padding-right: 30px; }
    .account2 .account-body .area:last-child { border-left: 1px dashed #dadada; }
    .account2 .account-body .area h5 { margin-bottom: 15px; }
    .account2 .account-body .area.register-major { width: 40%; }
    .account2 .account-body .area.register-minor { width: auto; flex: 1; }
    .account2.login .account-body .area { display: flex; flex-direction: column; justify-content: center;  }
    
    
    .account .btn-block { height: 50px; line-height: 46px; font-size: 16px; }
    .login-brand { margin-top: -20px; }
    .login-brand > img { width: 154px; margin-bottom: 20px; }
    .login-brand p { font-size: 14px; margin-bottom: 10px; }
    
    .account .form-control { }
    .account .form-icon-inner i { font-size: 18px; color: #b5b5b5; left: 10px; top: 4px; }
    .account .form-icon-inner input:-internal-autofill-selected + i { color: #9ba5b7; }
    .account .form-icon-inner .form-control { padding-left: 40px; }
    .account .login-additional { overflow: hidden; margin-bottom: 20px; }
    .account .login-additional .checks { float: left; }
    .account .login-additional .checks label { font-size: 13px; color: #8d8d8d; }
    .account .login-additional .reset-pass { float: right; font-size: 13px; color: #8d8d8d; text-decoration: underline; }
    .account button[type="submit"] { height: 50px; }
    
    .account .login-button .btn { width: 100%; }
    
    .account .form-group { margin-bottom: 14px; }
    .account .form-group > label { font-size: 13px; margin-bottom: 2px; letter-spacing: -0.8px; line-height: 24px; }
    .account .form-group .form-condition { font-size: 11px; letter-spacing: -0.8px; position: absolute; right: 0; top: 4px; text-align: right; margin: 0; }
    .account.account-sm .form-message-lg { margin: 10px 0; }
    .account .form-agreement label { font-size: 12px; }
    .account .complete .form { margin-bottom: 10px; }
    .account .complete p {  font-size: 13px; }
    .account-footer { margin-top: 20px; }
    .account-footer .join-message { font-size: 16px; font-weight: 300; margin: 40px 0; }
    
    .account.term { max-width: 720px; }
    .term p { font-size: 13px; margin-bottom: 6px; }
    .term p.t-h1 { font-size: 16px; font-weight: bold; margin: 40px 0 20px; }
    .term p.t-h2 { font-size: 14px; font-weight: bold; margin: 25px 0 15px; }
    .term ol { padding-left: 15px; }
    .term li { margin-bottom: 6px; font-size: 13px; }
    .term ol > li { list-style-type: decimal; }
}

@media only screen and (max-width: 840px) { /* mobile */
    .account { padding-top: 58px; }
    .account .box { width: 90%; margin-top: 20px; padding: 25px; }

    .account .account-header { margin-bottom: 14px; }
    .account .account-header > a, 
    .account .account-header > .icon { width: 24px; height: 24px; margin-bottom: 32px; }
    .account .account-header p { font-size: 13px; margin-top: 12px; margin-bottom: 0; }
    .account .account-header p strong { font-size: 18px; }
    .account .account-sub-header { font-size: 16px; }
    
    .account2 .account-body .area { padding: 20px 0; }
    .account2 .account-body .area h5 { margin-bottom: 15px; }

    .account.login .account-header { display: none; }
    .account .btn-block { height: 50px; line-height: 46px; font-size: 16px; }
    .login-brand { margin-top: -10px; margin-bottom: -10px; padding-left: 20px; padding-right: 20px; }
    .login-brand > img { width: 80px; margin-bottom: 10px; }
    .login-brand p { font-size: 16px; font-weight: bold; }
    .login-brand p.copyright { display: none; }

    .account.login h1 { text-align: center; }

    .account .form-group { margin-bottom: 10px; }
    .account .form-group > label { font-size: 12px; margin-bottom: 3px; letter-spacing: -0.4px; line-height: 1.4; }
    .account .form-group .form-condition { font-size: 11px; letter-spacing: -0.3px; margin-top: 6px; }
    .account.account-sm .form-message-lg { margin: 10px 0; }
    .account .form-agreement label { font-size: 12px; }
    .account .complete .form { margin-bottom: 10px; }
    .account .complete p {  font-size: 13px; }

    .login .providers .provider i { margin-right: 0; }

    .account-footer { margin-top: 60px; }
    .account-footer .join-message { font-size: 16px; font-weight: 300; margin: 40px 0; }

    .account h5 { font-size: 16px; }

    .form-checkbox { margin-bottom: 6px; }
}