/* common */
body {
    font-size: 1.6rem;
    line-height: 24px;
    font-family: "黑體","微軟正黑體","Arial","sans-serif";
    color: #33414a;
    background-color: #fff;
}

a:hover,
a:focus {
    text-decoration: none;
}

input[type=text],
input[type=password] {
    height: 3em;
}

.btn-orange {
    color: #fff;
    background-color: #ff6700;
    border: 0;
}

    .btn-orange:hover {
        color: #fff;
        background: #ff936a;
    }

    .btn-orange:active {
        box-shadow: none;
    }

    .btn-orange:focus {
        color: #fff;
    }

.btn-white {
    background: #fff;
    border: 1px solid #ddd;
    color: #7c7c7c;
    margin-top: 6px;
}

    .btn-white:hover {
        color: #333;
    }

    .btn-white:active {
        box-shadow: none;
    }

.btn-fb {
    margin-top: 5px;
    background: #5575ba;
    border: 0;
    color: #fff;
}

    .btn-fb:hover {
        color: #fff;
        background: #7d9cdf;
    }

    .btn-fb:active {
        box-shadow: none;
    }

    .btn-fb:focus {
        color: #fff;
    }

.btn-add-child {
    color: #fc7a3c;
    font-size: 18px;
}

.btn-google {
    background: #db3236;
    color: white;
}

    .btn-google:hover {
        color: #fff;
        background: #fd5658;
    }

.btn-apple {
    margin-top: 5px;
    background: #000;
    color: white;
}

    .btn-apple:hover {
        color: #fff;
        background: #333;
    }

.child-panel {
    position: relative;
    margin-top: 30px;
    box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.16);
}

/* 刪除小孩按鈕 */
.btn-rm-child {
    position: absolute;
    right: -24px;
    top: -24px;
    color: #fc7a3c;
    font-size: 16px;
}

/* vue element */
[v-cloak] {
    display: none;
}

.fade-enter-active, .fade-leave-active {
    transition: all .2s;
}

.fade-enter, .fade-leave-active {
    opacity: 0;
}

/* 錯誤訊息 */
.invalid-msg {
    color: #ff6700;
    font-size: 14px;
}

    .invalid-msg span {
        font-size: 14px;
    }

/* 錯誤欄位 */
.invalid-form {
    border: 1px solid #ff6700 !important;
}

/* kimy step */
.f1-steps {
    overflow: hidden;
    position: relative;
    margin-top: 20px;
}

.f1-progress {
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ddd;
}

.f1-progress-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    background: #f35b3f;
}

.f1-step {
    position: relative;
    float: left;
    width: 25%;
    text-align: center;
}

.f1-step-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-top: 4px;
    background: #ddd;
    font-size: 16px;
    color: #fff;
    line-height: 40px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
}

.f1-step.activated .f1-step-icon {
    background: #fff;
    border: 1px solid #f35b3f;
    color: #f35b3f;
    line-height: 38px;
}

.f1-step.active .f1-step-icon {
    width: 48px;
    height: 48px;
    margin-top: 0;
    background: #f35b3f;
    font-size: 22px;
    line-height: 48px;
}

.f1-step p {
    color: #ccc;
}

.f1-step.activated p {
    color: #f35b3f;
}

.f1-step.active p {
    color: #f35b3f;
}


/* 圖片驗證碼欄位 */
.captchagrp input[type=text] {
    display: inline-block;
    width: 70%;
}

/* 圖形驗證碼 */
.captchaImg {
    cursor: pointer;
}

/* 驗證碼欄位 */
.codegrp input[type=text] {
    display: inline-block;
    width: 50%;
}

/* 手機/E-mail註冊tab */
#regTab {
    position: relative;
    margin: 40px auto;
    margin-bottom: 0;
    box-sizing: border-box;
}

    #regTab > li {
        width: 50%;
    }

        #regTab > li.active:after {
            content: " ";
            position: absolute;
            left: 45%;
            opacity: 1;
            margin: 0 auto;
            bottom: 0px;
            border: 10px solid transparent;
            border-bottom-color: #ddd;
        }

        #regTab > li a {
            width: 70px;
            height: 70px;
            margin: 20px auto;
            border-radius: 100%;
            padding: 0;
        }

        #regTab > li.active > a span.round-tabs {
            background: #fafafa;
        }

.round-tabs {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: white;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}

    .round-tabs.one {
        color: rgb(34, 194, 34);
        border: 2px solid rgb(34, 194, 34);
    }

    .round-tabs.two {
        color: #febe29;
        border: 2px solid #febe29;
    }

#regContent {
    position: relative;
    padding-top: 50px;
}

/* header */
.header {
    height: 120px;
    text-align: center;
    background: url(../../images/header-bg.jpg);
}

/* footer */
.footer {
    background-color: #f2f2f2;
    padding: 20px 0;
    font-size: 0.9em;
    color: #595757;
}

    .footer ul {
        margin: 0 auto;
        padding: 0;
        list-style: none;
        display: inline-block;
        border-right: 1px solid #ccc;
    }

        .footer ul li {
            float: left;
            border-left: 1px solid #ccc;
            padding: 0 15px;
        }

            .footer ul li a {
                color: #fc7a3c;
            }

/* 選單 */
.drawer-navbar {
    background: #f2f2f2;
}

    .drawer-navbar .drawer-navbar-header {
        background: #f2f2f2;
    }

.drawer-nav {
    background: #f2f2f2;
}

.drawer-menu a {
    font-size: 1.1em;
}


/* 大型螢幕 */
@media (min-width: 1171px) {
    .drawer-navbar .drawer-navbar-header {
        padding-left: 2%;
    }

    .form-panel {
        padding: 40px 4%;
    }

    .drawer-menu--right {
        margin-right: 10%;
    }
}

/* 桌機 */
@media (min-width: 768px) and (max-width: 1170px) {
    .drawer-navbar .drawer-navbar-header {
        padding-left: 2%;
    }

    .header {
        display: none;
    }

    .drawer-menu--right {
        margin-right: 2%;
    }
}

/* 手機 */
@media (max-width: 767px) {
    .header {
        display: none;
    }

    .drawer-navbar .drawer-navbar-header {
        padding-left: 0;
    }

    .footer ul {
        display: none;
    }

    .captchagrp input[type=text] {
        display: inline-block;
        width: 60%;
    }

    .codegrp input[type=text] {
        display: inline-block;
        width: 40%;
    }
}

/* 各平台登入圓形圖示的 CSS 樣式 */
.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* 圓形的寬 */
    height: 50px; /* 圓形的高 */
    border-radius: 50%; /* 關鍵：變成圓形 */
    font-size: 24px; /* 圖示本身的大小 */
    color: #ffffff; /* 圖示顏色 (白色) */
    border: none; /* 移除按鈕的邊框 */
    cursor: pointer; /* 顯示可點擊的滑鼠指標 */
    transition: opacity 0.2s; /* 增加平滑的 hover 效果 */
}

    .social-icon:hover {
        opacity: 0.8;
    }

/* 各平台的品牌顏色 */
.facebook {
    background-color: #1877F2;
}

.google {
    background-color: #DB4437;
}

.apple {
    background-color: #000000;
}