@charset "utf-8";
/* index */
/* banner */
.header_index {
    min-height: 42.5rem;
    background: var(--white) url("../images/topbg.jpg") center top no-repeat;
    background-size: cover;
    padding-top: 13.1875rem;
}

.slogan1 {
}

.slogan2 {
    margin-top: 2.8125rem;
}

    .slogan2 br {
        display: none;
    }

.index_application {
    background: var(--gray) url("../images/bg_green.jpg") left top repeat-x;
}

.application_btn,
.application_btn .icoani,
.application_btn .icoani {
    transition: 0.3s linear;
}

    .application_btn:hover .application_p1,
    .application_btn:focus .application_p1 {
        background-color: var(--color16);
        transition: 0.3s linear;
    }

    .application_btn:hover .icoani,
    .application_btn:focus .icoani {
        margin-left: 0.5rem !important;
        transition: 0.3s linear;
    }

    .application_btn:hover .application_p2,
    .application_btn:focus .application_p2 {
        background-color: var(--color14);
        transition: 0.3s linear;
    }

.shadowfen {
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}

.shadowfen2 {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}

.shadowfen3 {
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08);
}

.title_yb {
    padding-left: 1rem;
    border-left: 0.5rem solid var(--color11);
}

.aboutcomplete {
    width: 49%;
    border-radius: 2px;
    padding: 2rem 3rem 150px;
}

.ac1 {
    background: var(--gray6) url(../images/form_p4.png) center bottom no-repeat;
}

.ac2 {
    background: var(--gray6) url(../images/form_p5.png) center bottom no-repeat;
}

.index_statistics {
    min-height: 330px;
}
/* .index_slider{
    min-height:290px;
} */
.statisticsbg {
    background: var(--gray) url(../images/mapbg.jpg) center center no-repeat;
}
/* .statistics_box{
    border-radius:2px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
} */
/* logo swiper */

.index_slider .swiper-button-prev,
.index_slider .swiper-button-next {
    position: static;
    margin-top: 0;
    width: 32px;
    height: 44px;
    padding: 0 9px;
    text-align: center;
    line-height: 44px;
    background-color: var(--gray1);
    color: var(--white);
}

    .index_slider .swiper-button-prev:hover,
    .index_slider .swiper-button-next:hover {
        background-color: var(--color2);
    }

    .index_slider .swiper-button-prev:after,
    .index_slider .swiper-button-next:after {
        display: none;
    }

.index_slider .swiper-slide {
    text-align: center;
}

    .index_slider .swiper-slide img {
        max-width: 220px;
    }

/* qa */
.qabg {
    padding-bottom: 200px;
    background: var(--gray) url(../images/qa_bg.png) center bottom no-repeat;
}

.tab_qamenu {
    width: 100%;
    padding: 12px 0;
    border-radius: 2px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}

.tab_qabtn {
    color: var(--color3);
    font-weight: bold;
    text-align: center;
    background-color: transparent;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    margin: 0 7px 7px;
    white-space: nowrap;
    position: relative;
}

    .tab_qabtn:hover,
    .tab_qabtn.active {
        cursor: pointer;
        color: var(--white);
        background-color: var(--color3);
    }

        .tab_qabtn:hover::after,
        .tab_qabtn.active::after {
            position: absolute;
            display: block;
            content: "";
            width: 18px;
            height: 18px;
            background-color: var(--color3);
            transform: rotate(45deg);
            left: calc(50% - 9px);
            bottom: -6px;
        }

.accordion-flush .accordion-item.qa_list {
    padding: 1rem;
    margin-bottom: 0;
    border: 1px solid #ccd1d9;
    border-bottom: none;
}

.qa_A .list_num {
    padding-left: 17px;
}

    .qa_A .list_num li {
        list-style-type: decimal;
    }

.qa_Qtxt {
    padding: 0;
    font-weight: bold;
    font-size: 1.13rem;
}

    .qa_Qtxt.accordion-button:not(.collapsed) {
        color: inherit;
        background-color: transparent;
        box-shadow: none;
    }

    .qa_Qtxt.accordion-button::after {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        padding: 6px;
        margin-left: auto;
        content: "";
        background-image: url(../images/icon_add.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: var(--bs-accordion-btn-icon-width);
        transition: var(--bs-accordion-btn-icon-transition);
        line-height: 0;
        border-radius: 50%;
        text-align: center;
    }

    .qa_Qtxt.accordion-button:not(.collapsed)::after {
        transform: rotate(45deg);
    }

.qa_A {
    color: var(--Black);
    padding-left: 7px;
}

    .qa_A a {
        color: var(--color3);
    }

        .qa_A a:hover {
            color: var(--red);
        }

.accordion-flush .qa_list.accordion-item:last-child {
    border-bottom: 1px solid #ccd1d9;
}

/* page */
.page {
    background: var(--gray) url("../images/topbg.jpg") center top no-repeat;
    background-size: contain;
    padding-top: 5.125rem;
}

    .page .footerbg_top {
        background-color: var(--gray);
    }

.header_page {
    padding-bottom: 6.625rem;
}

.btn_home {
    left: 0;
    top: 0;
}

    .btn_home .btn_home_icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.75rem;
        height: 2.75rem;
        text-align: center;
        border-radius: 50%;
    }

    .btn_home:hover .btn_home_icon,
    .btn_home:focus .btn_home_icon {
        background-color: var(--color2);
    }

    .btn_home:hover .btn_home_txt,
    .btn_home:focus .btn_home_txt {
        color: var(--color2);
    }

.tabbtn {
    width: 20%;
    color: var(--gray1);
    font-size: 1.13rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
    border-bottom: 4px solid var(--gray1);
}

    .tabbtn.active {
        color: var(--color1);
        border-bottom: 4px solid var(--color1);
    }

    .tabbtn.tabbtn6 {
        width: calc(100% / 6);
    }

.next_btn a {
    display: block;
    text-align: center;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    font-size: 1.13rem;
    color: var(--white);
    background-color: var(--color2);
}

    .next_btn a:hover {
        background-color: var(--color14);
    }

.back_btn a {
    display: block;
    text-align: center;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    font-size: 1.13rem;
    color: var(--white);
    background-color: var(--gray2);
}

    .back_btn a:hover {
        background-color: var(--black2);
    }
/* form */
.form-group {
    font-size: 1rem;
}

.col-form-label {
    font-weight: 700;
    color: var(--color4);
}

form input,
form input.form-control,
form select.form-control,
form textarea.form-control {
    border-radius: 4px;
    border: 1px solid var(--gray3);
    padding: 1rem;
    background-color: var(--White);
}

    form input:focus,
    form input.form-control:focus,
    form textarea.form-control:focus {
        background-color: var(--gray);
    }

form textarea.form-control {
    resize: none;
}

::placeholder {
    color: var(--gray2) !important;
}

.app_select {
    position: relative;
}

    .app_select::before {
        width: 1.5625rem;
        height: 1.5625rem;
        line-height: 1.5625rem;
        text-align: center;
        position: absolute;
        right: 0.88rem;
        top: 1.125rem;
        background-color: var(--white);
        color: var(--black2);
        font-family: "Font Awesome 5 Free";
        font-size: 0.88rem;
        content: "\f078";
        font-weight: 600;
        pointer-events: none;
    }

.backnext_btn {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back_btn,
.next_btn {
    width: 100%;
}

.store_lst {
    margin-left: 1.5rem;
}

    .store_lst li {
        list-style: disc;
    }

.Bonusbtn {
    cursor: pointer;
}

.BonusInfo,
.noBonusInfo,
.upload1Info,
.upload2Info,
.nouploadInfo {
    display: none;
    transition: all 0.3s linear;
}

    .BonusInfo.active,
    .noBonusInfo.active,
    .upload1Info.active,
    .upload2Info.active,
    .nouploadInfo.active {
        display: block;
        transition: all 0.3s linear;
    }

.uploadbox {
    border-radius: 8px;
    border: 2px dashed var(--color1);
    background: var(--gray4);
}

.uploadbtn {
    padding: 0.75rem 2rem;
}

    .uploadbtn:hover,
    .uploadbtn:focus {
        background: var(--color16);
    }

.link {
    color: var(--color1);
    text-decoration: underline;
}

    .link:hover,
    .link:focus {
        color: var(--color2);
        text-decoration: underline;
    }

.noperson input {
    margin-top: 0.32rem;
}

.signin {
    width: 100%;
    height: 16.875rem;
}

/* modified 08/23, 09/04 */
@media screen and (max-width: 992px) {
    .ticks {
        align-items: center;
    }

    .myTitle {
        align-items: center;
    }

    .logoAndName {
        justify-content: center;
    }

        .logoAndName img {
            width: 52px;
            height: 48px;
        }
}

@media screen and (min-width: 992px) {
    .myTitle {
        align-items: start;
    }
}

.myTitle {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

@media screen and (min-width: 1400px) {
    .header_index .container {
        padding-left: 100px;
    }
}

@media screen and (max-width: 992px) {
    header {
        height: 900px;
    }
}

@media screen and (max-width: 768px) {
    header {
        height: 160px;
    }

    .df_title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .df_title_1 {
        font-size: 28px;
    }

    .df_logo {
        max-width: 46px;
        max-height: 42px;
        margin-top: 4px;
    }

    .slogan2 {
        margin-top: 36px;
    }

    .main_title_1 {
        font-size: 30px;
    }

    .main_title_2 {
        font-size: 30px;
    }

    .green_tick {
        max-width: 12px;
        max-height: 12px;
    }

    .header_index {
        background: var(--white) url("../images/topbg.png") calc(-700px + 90vw) 240px no-repeat;
        background-size: cover;
        background-size: auto 40%; /* 背景圖片寬度為容器寬度的 50%，高度自動調整 */
    }

    .index_application {
        background: none;
        margin-top: -50px;
    }
}

.df_title {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media screen and (max-width: 768px) and (min-width: 640px) {
    .header_index {
        background: var(--white) url("../images/topbg.jpg") -440px 160px no-repeat;
        background-size: cover;
        background-size: auto 60%; /* 背景圖片寬度為容器寬度的 50%，高度自動調整 */
    }

    .index_application {
        background: none;
        margin-top: -200px;
    }
}

@media screen and (min-width: 640px) {
    .add_green {
        display: none;
    }
}

.add_green {
    margin-top: -240px;
    z-index: -999;
    min-height: 100px;
    min-width: 600px;
}

.add_green_svg {
    min-height: 100%;
}