﻿
.body_wrap_layout {
    background-image: linear-gradient(90deg, rgb(25, 75, 115), rgb(60, 115, 160));
    position: relative;
}

.outer_wrap_layout {
    background-image: url(../img/NewInner_blank.jpg);
    background-position: top;
    /*background-size: contain;*/
    background-repeat: no-repeat;
    max-width: 1920px;
    min-height: 100vh;
}

.blank_wrap_layout {
    height: 34vh;
    width: 650px;
    margin: 0 auto;
}

@media (max-width: 650px) {
    .blank_wrap_layout {
        width: 100%;
    }
}

.link_layout {
    display: inline-block;
    width: 140px;
    height: 140px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 1560px) {
    .nav_sub_wrap {
        width: 100%;
    }
    .link_layout {
        width: 120px;
        height: 120px;
    }
}

.login_wrap_layout, .qa_wrap_layout {
    width: 60%;
    margin: 3rem auto;
    min-height: 300px;
    border-radius: 20px;
    border: black 1px solid;
    background-color: rgb(137, 184, 214);
}

.acct_wrap_layout {
    /*width: 50%;*/
}

.btn_layout {
    color: white;
    border-color: white;
    background-color: #F4A053;
    border-radius: 2rem;
    font-size: 1.2rem;
}

.footer_wrap_layout {
    /*position: absolute;*/
    /*bottom: 0.5rem;*/
}

.footer_wrap_index {
    position: absolute;
    top: calc(122vh + 4rem);
}

.footer_link {
    /*width: 20%;*/
    /*min-width: 140px;*/
    color: #ffffff;
    text-align: center;
    border-right: #ffffff 2px solid;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.footer_link:last-child {
    border-right: none;
    padding-right: 0;
}

@media (max-width: 385px){
    /*.footer_wrap_index {
        top: calc(110vh + 4rem);
    }*/
}

@media (max-width: 300px) {
    .footer_wrap_index {
        top: 150vh;
    }
}

@media (min-width: 900px) {
    .footer_wrap_index {
        top: 105vh;
    }
}

@media (min-width: 768px) and (max-width: 1020px) {
    .blank_wrap_layout {
        height: 50vh;
    }
}


/* 行動裝置使用 */
@media (orientation: portrait), (max-width: 767px) {
    .blank_wrap_layout {
        height: 30vh;
    }

    /*.link_layout {
        width: 120px;
        height: 120px;
    }*/

    .acct_wrap_layout {
        width: 90%;
    }

    .login_wrap_layout {
        width: 95%;
    }

    .qa_wrap_layout {
        width: 95%;
    }
}

.nav_wrap, .nav_wrap_index {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 1480px) {
    .nav_wrap_index div .link_layout {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 520px) {
    .nav_wrap_index div .link_layout {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 440px) {
    .nav_wrap_index div .link_layout {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 370px) {
    .nav_wrap_index div .link_layout {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 520px) {
    .blank_wrap_layout {
        height: 22vh;
    }
}

@media (max-width: 500px){
    .link_layout{
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 370px) {
    .link_layout {
        width: 90px;
        height: 90px;
    }
}

/* 橫放模式下，調整背景圖 */
/*@media (orientation: landscape) {
    .outer_wrap_layout {*/
        /*background-size: cover;*/
        /*background-size: contain;
    }
}*/

.link_match_layout {
    background-image: url(../img/btn/btn-match-2.png);
}

    .link_match_layout:hover {
        background-image: url(../img/btn/btn-match-1.png);
        cursor: pointer;
    }

.link_project_layout {
    background-image: url(../img/btn/btn-project-1.png);
}

    .link_project_layout:hover {
        background-image: url(../img/btn/btn-project-2.png);
    }

.link_qa_layout {
    background-image: url(../img/btn/btn-qa-2.png);
}

    .link_qa_layout:hover {
        background-image: url(../img/btn/btn-qa-1.png);
    }

.link_links_layout {
    background-image: url(../img/btn/btn-link-2.png);
}

    .link_links_layout:hover {
        background-image: url(../img/btn/btn-link-1.png );
    }

.link_progress_layout {
    background-image: url(../img/btn/btn-progress-2.png);
}

    .link_progress_layout:hover {
        background-image: url(../img/btn/btn-progress-1.png );
    }

/* 給首頁使用 */
.outer_wrap {
    background-image: url(../img/index_blank.jpg);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

.h-90 {
    height: 90%;
}

.h-85 {
    height: 85%;
}

.h-10 {
    height: 10%;
}

.h-05 {
    height: 5%;
}

.home_blank_wrap{
    height: 5%;
}

@media (max-width: 520px){
    .home_blank_wrap {
        height: 1rem;
    }
}

.font-extra-small {
    font-size: 8px;
}

.logo {
    background-image: url(../img/logo.png);
    background-position: center;
    background-size: cover;
    height: 50px;
    min-width: 50px;
}

.apply_wrap {
    /* position: absolute;
    bottom: 0; */
}

.apply_btn {
    border-radius: 0.5rem;
    position: relative;
}

    .apply_btn::before {
        content: "•";
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

.link_wrap {
    height: 120px;
}

.link_match {
    background-image: url(../img/btn/btn-match-2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* height: 100%; */
}

    .link_match:hover {
        background-image: url(../img/btn/btn-match-1.png);
    }

.link_project {
    background-image: url(../img/btn/btn-project-1.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

    .link_project:hover {
        background-image: url(../img/btn/btn-project-2.png);
    }

.link_qa {
    background-image: url(../img/btn/btn-qa-2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

    .link_qa:hover {
        background-image: url(../img/btn/btn-qa-1.png);
    }

.link_links {
    background-image: url(../img/btn/btn-link-2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

    .link_links:hover {
        background-image: url(../img/btn/btn-link-1.png);
    }

.link_progress_layout {
    background-image: url(../img/btn/btn-progress-2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

    .link_progress_layout:hover {
        background-image: url(../img/btn/btn-progress-1.png );
    }

.horizontal_line {
    margin-left: 0;
    width: 80%;
    background-color: white;
}


.logo_wrap_layout {
    position: absolute;
    top: 1.5rem;
    left: 32%;
    transform: translateX(-50%);
}

@media (max-width: 767px) {

    .logo_wrap_layout {
        top: 1rem;
        left: 28%;
        transform: translateX(-50%);
    }

        .logo_wrap_layout > div {
            font-size: 1rem;
        }

        .logo_wrap_layout .logo {
            width: 30px;
            height: 30px;
            background-size: contain;
            background-repeat: no-repeat;
        }
}

@media (max-width: 575px) {
    .logo_wrap_layout small {
        display: none;
    }
}

@media (max-width: 390px) {
    .left_col {
        height: 68vh;
    }
}


.right_col {
    width: 50%;
}

@media (max-width: 767px){
    .right_col {
        width: 100%;
    }
}

.left_wrap {
    height: 88vh;
    /* position: relative; */
}

@media (max-width: 767px) {
    .left_wrap {
        height: 65vh;
    }
}

.title_img {
    object-fit: cover;
    object-position: center;
    /* 圖片大小為 */
    max-width: 541px;
}

.blank_section {
    height: 60%;
}

.news_logo {
    object-fit: cover;
    object-position: center;
    height: 30px;
}

.news_title {
    letter-spacing: 5px;
}

@media (max-width: 767px) {
    .blank_section {
        height: auto;
    }
}

@media (max-width: 550px) {
    .title_img {
        width: 100%;
    }
}

.acct_img_layout, .pw_img_layout {
    width: 40px;
    height: 40px;
    object-fit: contain;
    object-position: center;
}

.acct_input_layout, .pw_input_layout, .cap_input_layout {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid white;
    color: white;
}

.acct_input_layout::placeholder, .pw_input_layout::placeholder, .cap_input_layout::placeholder {
    color: white;
}

/*以下給 news 頁用*/

.news_outer_wrap {
    min-height: 40vh;
    width: 50%;
}

@media (max-width: 1100px) {
    .news_outer_wrap {
        width: 60%;
    }
}

@media (max-width: 880px){
    .news_outer_wrap {
        width: 80%;
    }
}

@media (max-width: 660px){
    .news_outer_wrap {
        width: 95%;
    }
}
.newscontent {
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 0.2rem;
}
.newsTitle {
    color: #044087;
    font-size: 1.2rem;
    font-weight: bolder;
    margin-bottom: 1rem;
}
.newsBody {
    margin: 0;
    padding: 0;
    list-style: none;
    color: white;

}

.tableBlue th {
    background-color: rgb(157 205 254);
    border: solid 1px black;
    text-align: center;
    vertical-align: middle;
   
}

.tableBlack thead {
    background-color: #274555;
    color: white;
    border: solid 1px black;
    text-align: center;
    vertical-align: middle;
}


/* 以下給 qa 頁用 */
.Q_content {
    color: #C5192D;
    font-size: 1.5rem;
}

.Q::before {
    content: "Q";
    background-color: #C5192D;
    border-radius: 50%;
    color: #FFFFFF;
    margin-right: 5px;
    height: 37px;
    width: 37px;
    display: inline-block;
    text-align: center;
    color: white;
    font-size: 1.5rem;
}

.A_content {
    color: white;
    font-size: 1.5rem;
}


    .A::before {
        content: "A";
        background-color: #666;
        border-radius: 50%;
        color: #FFFFFF;
        margin-right: 5px;
        height: 37px;
        width: 37px;
        display: inline-block;
        text-align: center;
        color: white;
        font-size: 1.5rem;
    }

.tabRow .tab {
    background-color: #d5d5d5;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.tabRow .tab:first-child {
    border-bottom: 3px solid #009ce1;
}

.tabRow .tab:last-child {
    border-bottom: 3px solid #9839bb;
}

.qa_wrap_layout .container {
    margin-top: 0;
    border: 1px solid #666;
    border-top: 0;
    padding-top: 1rem;
}

.tabRow .tabActive {
    color: #fff;
    background-color: #498035;
}

.tabRow a {
    cursor: pointer;
}


/* 以下給 檔案下載頁 (PubFileDownLoad) 用 */
.F {
    /*color: #C5192D;*/
    display: flex;
    align-items: center;
    font-size:1.3rem
}

    .F::before {

        width: 3px;
        height: 1.2rem;
        background-color: #28a745;
        content: "";
        display: inline-block;
    }

    .F span {
        /*width: calc(100% - 1rem);*/
        padding-left: 0.5rem;
    }

    .F a {
        display: inline-block;
        width: 1.3rem;
        height: 1.3rem;
        /*background-color: navajowhite;*/
        background-position: center;
        background-size: contain;
    }

.odtIcon {
    /*background-image: url(../img/doc_odt.png);*/
    background-image: url(../img/doc_Fileodt.png);
}

.pdfIcon {
    /*background-image: url(../img/doc_pdf.png);*/
    background-image: url(../img/doc_Filepdf.png);
}