/* 共用 */
.main-content h1{
    font-weight: bold;
    line-height: 1;
    margin:0;
}
header{
    position: static;
    top:0;
    height:3.5rem;
    padding:0 3.5rem;
    width: 100%;
    background-color: #fff;
    z-index: 1;
}
main{
    height: calc(100vh - 3.5rem - 1.75rem);
    position: relative;
    top: 0;
    width:960px;
    margin:0 auto;
    min-height: calc(768px - 3.5rem - 1.75rem);
}
footer{
    position: fixed;
    bottom:0;
    width:100%;
    background-color: #3fb0bf ;
    height: 1.75rem;
    font-size: 12px;
    z-index: 2;
    color:#fff;
}
main form{
    max-width: 300px;
    margin:0 auto;
}
main .field-list{
    margin-bottom: calc(var(--spacing-m));
}
main .field-list.field-list-btn{
    margin-top: calc(var(--spacing-xxl-2))
}
button.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    height:36px;
}
button.btn.btn-s{
    height:30px;
}
.btn-loading{
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-loading .spinner-border,
.btn-loading .spinner-grow{
    display: none;
    color:#fff;
}
.btn-loading:disabled .spinner-border,
.btn-loading:disabled .spinner-grow{
    display: block;
}
input.form-control{
    height:36px;
}
.form-control ~.error-message{
    display: none;
    line-height: 1.2;
    margin-bottom: 0;
}
.form-control.error ~label.error-message{
    display: block;
}
.form-control-container .validate-explanation{
    line-height: 1.2;
    display: block;
    color:#737373;
    margin-top:var(--spacing-xxs);
}
.form-control-container .input-icon-append{
    position: absolute;
    right: var(--spacing-m);
    display: block;
    top: 8px;
    max-width: 20px;
    cursor: pointer;
}
.nav-tabs li >a{
    font-weight: normal;
    margin-right: 1.75rem;
    line-height: 1;
    border-bottom: 1px solid transparent;
    padding-bottom: var(--spacing-xs);
    display: block;
}
.nav-tabs li >a.active{
    border-color: #61c7d0;
    color:#61c7d0;
}
.nav-tabs li >a.disabled{
    color:#d7d7d7;
    cursor: context-menu;
}
.nav-tabs li >a .number-container{
    margin:0 var(--spacing-xxs);
}

/* 開通資訊頁 */
#main-content-activate-info main{
    padding-top: 90px;
}
#main-content-activate-info .form-control-container{
    margin:2.5rem auto 0;
}
#main-content-activate-info #activateinfo-form{
    margin-top:68px;
}
/* 註冊頁*/
#main-content-signup{
    visibility: hidden;
}
#main-content-signup main{
    padding-top: 56px;
    min-width: 768px;
}
#main-content-signup .nav-tabs{
    margin-top:var(--spacing-xl);
    margin-bottom:var(--spacing-xxl-6);
}
#main-content-signup .nav-tabs li >a{
    font-size: 20px;
    margin-right:0;
    cursor: default;
}
#main-content-signup .nav-tabs li:nth-of-type(2){
    margin:0 var(--spacing-m);
}
#main-content-signup .nav-tabs li:nth-of-type(2) >svg{
    margin-top: -8px;
}
#main-content-signup .nav-tabs li:last-of-type >a{
    margin:0;
}

/* 註冊成功頁 */
#main-content-signup-success{
    visibility: hidden;
}
#main-content-signup-success +.loading-container{
    position: fixed;
    top:0;
    bottom:0;
    width:100%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#main-content-signup-success main{
    padding-top: calc(9.75rem - 3rem);
}
#main-content-signup-success .check-success-container{
    border-radius: 50%;
}
#main-content-signup-success .check-success-container >svg{
    width:160px;
    height:160px;
}
#main-content-signup-success .signup-status-warning{
    margin-top:var(--spacing-xxl-2);
    margin-bottom:var(--spacing-m);
}
#main-content-signup-success .redirect-warning{
    margin-top:var(--spacing-xxl-2);
}

/* 註冊timeout頁 */
#main-content-validate-timeout .timeout-container{
    margin-top:100px;
    margin-bottom:32px;
}
#main-content-validate-timeout .timeout-remind{
    margin-top:var(--spacing-xxl-2);
}
/* 收信完成驗證頁*/
#main-content-email-validate{
    visibility: hidden;
}
#main-content-email-validate main{
    padding-top: 56px;
}
#main-content-email-validate main >h1{
    margin-bottom:16px;
}
#main-content-email-validate .loading-container{
    background: #fff;
    position: fixed;
    top: 0;
    left:0;
    height: 100vh;
    width: 100%;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}
#main-content-email-validate .mail-remind{
    color:#2e2e2e;
    line-height: 1.75;
    margin-bottom: var(--spacing-xs);
}
#main-content-email-validate .mail-warning{
    color:#898a89;
    line-height: 1.67;
    margin-bottom:40px;
}
#main-content-email-validate .mail-warning >span{
    color:#8fd4dd;
}
#main-content-email-validate .segment-container{
    margin-bottom:var(--spacing-m);
}
#main-content-email-validate .segment-container:last-of-type{
    margin-bottom:calc(100px + 1.75rem);
}
#main-content-email-validate .segment-container .segment{
    max-width: 466px;
}
#main-content-email-validate .segment .btn{
    font-size: 14px;
    min-width: 70px;
}
.notfound-mail-container .segment-content p{
    margin-bottom:var(--spacing-l);
}
.fillerror-mail-container .segment-header{
    margin-bottom:var(--spacing-l);
    position: relative;
    overflow: hidden;
}
.fillerror-mail-container .segment-header.active{
    padding-bottom:var(--spacing-m);
    margin-bottom:var(--spacing-m);
}
.fillerror-mail-container .segment-header.active::before{
    content: "";
    position: absolute;
    border-bottom: 3px dashed #d7d7d7;
    width: 100%;
    bottom: -2px;
    left:0;
}
.fillerror-mail-container .segment-content p{
    margin-bottom:var(--spacing-xs);
}
.resend-remind-container .btn,
.resend-remind-container .btn:hover{
    background-color: #fff;
    border-color: #d7d7d7;
    color: #737373;
    margin: 0 auto;
}
.resend-mail-container form{
    max-width: inherit;
}
.resend-mail-container .segment-content-warning{
    margin-bottom:var(--spacing-s);
    color:#7e7e7e;
}
.email-submit-container .btn{
    margin-left:var(--spacing-xs);
}
.email-submit-container label.error{
    margin:var(--spacing-xxs) 0 0;
}

/* 隱私權頁*/
#main-content-privacy-policy header{
    position: static;
}
#main-content-privacy-policy main{
    padding: calc(6.25rem - 3rem) 56px 0;
    height: auto;
    min-height: auto;
    top:0;
}
#main-content-privacy-policy footer{
    padding-top: 0;
    position: static;
}
#main-content-privacy-policy p{
    margin:0;
}
#main-content-privacy-policy .tab-content{
    margin-bottom: calc(100px + 3rem);
}
#main-content-privacy-policy .nav-tabs{
    color:#d7d7d7;
}
#main-content-privacy-policy .nav-tabs li >a{
    font-size: 24px;
    line-height: 1.15;
    height: 36px;
}
#main-content-privacy-policy .nav-tabs li >a:not(.active):hover{
    color:#737373;
}
#main-content-privacy-policy .section-content{
    margin-top:var(--spacing-xxl-2);
}
#main-content-privacy-policy .section-content a:hover{
    border-bottom: 1px solid #28b9d5;
    color:#28b9d5;
}
#main-content-privacy-policy .header-title{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom:var(--spacing-xs);
    display: block;
}
#main-content-privacy-policy .section-secondary-content{
    margin-top:var(--spacing-xl);
}
#main-content-privacy-policy .header-secondary-title{
    font-weight: bold;
    margin-bottom:var(--spacing-xs);
    display: block;
}
#main-content-privacy-policy .list-outline{
    margin-bottom:1.5rem;
}
#main-content-privacy-policy ol{
    padding-left: 20px;
}
#main-content-privacy-policy ol li{
    line-height: 24px;
    margin-bottom: 24px;
}

@media screen and (max-width:960px){
    /* 共用 */
    main{
        width:auto;
    }
}