﻿.investor-info-select-text-red-box{
    display: flex;
}

.investor-info-select-text-red{

    font-size: 14px;

    color: #FF0000;

    font-size: 16px;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 1.4;

    vertical-align: middle;

}

.investor-box {

    display: block;

    position: relative;

    width: 100%;

    font-size: 0;

    background-color: #f5f5f5;

    min-height: 100vh;

}

.investor-all-box {

    width: 1200px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 130px 0;

}

.investor-title {

    font-size: 26px;

    font-weight: bold;

    color: #79be3f;

    letter-spacing: 2px;

    margin-bottom: 20px;

}

.investor-category-box{

    width: 200px;

    margin-right: 60px;

    display: inline-block;

    vertical-align: top;

    box-shadow: 0 0 10px rgba(0, 0, 0, .15);

    background: #fff;

    position: sticky;

    top: 90px;

}

.investor-category{

    box-sizing: border-box;

    padding: 15px 20px;

    cursor: pointer;

    z-index: 2;

    text-decoration: none;

    border: 0px;

    line-height: 26px;

    font-size: 16px;

    color: #555;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    width: 100%;

    display: block;

    transition: all .3s linear;

}

.investor-category:nth-child(n + 2){

    border-top: 2px solid #f5f5f5;

}

.investor-info-box{

    width: calc(100% - 260px);

    display: inline-block;

    display: -webkit-inline-block;

    vertical-align: top;

    background-color: #fff;

    box-sizing: border-box;

    padding: 20px 30px;

    box-shadow: 0 0 10px rgba(0, 0, 0, .15);

}

.investor-info-title-box{

    box-sizing: border-box;

    padding-bottom: 15px;

    border-bottom: 2px solid #ddd;

    margin-bottom: 30px;

}

.investor-info-title{

    font-size: 24px;

    color: #000;

    font-weight: bold;

    letter-spacing: 0.1em;

    line-height: 1;

    display: inline-block;

    vertical-align: middle;

    width: 240px;

}

.investor-info-path-box{

    display: inline-block;

    vertical-align: middle;

    width: calc(100% - 240px);

    box-sizing: border-box;

    padding-left: 20px;

    text-align: right;

}

.investor-info-path{

    display: inline-block;

    vertical-align: middle;

    box-sizing: border-box;

    position: relative;

    font-size: 14px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 1.4;

    margin-right: 25px;

    transition: all .3s linear;

}

.investor-info-path:last-child{

    margin-right: 0;

    color: #00a4a5;

}

a.investor-info-path::after{

    content: '>';

    font-size: 14px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 1.4;

    position: absolute;

    top: -1px;

    left: calc(100% + 7px);

}

.investor-info-select-box{

    margin-bottom: 20px;

}

.investor-info-select-text{

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 1.4;

    display: inline-block;

    vertical-align: middle;

}

.investor-info-select{

    width: 200px;

    display: inline-block;

    vertical-align: middle;

    height: 32px;

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    margin-left: 10px;

    box-sizing: border-box;

    cursor: pointer;

    transition: all .3s linear;

}

.investor-overview-info-name-box{

    position: relative;

}

.investor-overview-info-name-box p{

    font-size: 14px;

    color: #666;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 1;

    position: absolute;

    bottom: 10px;

    right: 0;

}

.investor-overview-info-title-box{

    display: flex;

    display: -webkit-flex;

    flex-direction: row;

}

.investor-overview-info-title-month{

    width: 40%;

    font-size: 18px;

    color: #333;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 30px;

    text-align: center;

    box-sizing: border-box;

    padding: 16px 10px;

    background-color: #ddd;

}

.investor-overview-info-title-right{

    width: 60%;

    display: inline-block;

    vertical-align: middle;

    box-sizing: border-box;

    border-left: 2px solid #fff;

}

.investor-overview-info-title-consolidated{

    width: 100%;

    font-size: 18px;

    color: #333;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 20px;

    text-align: center;

    box-sizing: border-box;

    padding: 5px 10px;

    background-color: #ddd;

}

.investor-overview-info-title-amount,

.investor-overview-info-title-ratio{

    width: calc(50% - 1px);

    font-size: 18px;

    color: #333;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 20px;

    text-align: center;

    box-sizing: border-box;

    padding: 5px 10px;

    background-color: #ddd;

    margin-top: 2px;

    display: inline-block;

    vertical-align: middle;

}

.investor-overview-info-title-ratio{

    margin-left: 2px;

}

.investor-overview-info-list{

    box-sizing: border-box;

    border-bottom: 1px solid #d1d1d1;

    padding: 5px 0;

}

.investor-overview-info-list-month{

    width: 40%;

    font-size: 18px;

    color: #333;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 20px;

    text-align: center;

    box-sizing: border-box;

    padding: 5px 10px;

    display: inline-block;

    vertical-align: middle;

}

.investor-overview-info-list-amount,

.investor-overview-info-list-ratio{

    width: calc(30% - 2px);

    font-size: 18px;

    color: #333;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 20px;

    text-align: center;

    box-sizing: border-box;

    padding: 5px 10px;

    display: inline-block;

    vertical-align: middle;

    margin-left: 2px;

}



.investor-overview-info-total-month{

    width: 40%;

    font-size: 18px;

    color: #333;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 20px;

    text-align: center;

    box-sizing: border-box;

    padding: 5px 10px;

    display: inline-block;

    vertical-align: middle;

    background-color: #ddd;

}

.investor-overview-info-total-amount,

.investor-overview-info-total-ratio{

    width: calc(30% - 2px);

    font-size: 18px;

    color: #333;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 20px;

    text-align: center;

    box-sizing: border-box;

    padding: 5px 10px;

    display: inline-block;

    vertical-align: middle;

    margin-left: 2px;

    background-color: #ddd;

}

.investor-overview-info-statement-box{

    font-size: 14px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 1;

    margin-top: 10px;

}





.investor-overview-year-box{

    width: 100%;

    box-sizing: border-box;

    padding: 0;

}

.investor-overview-year{

    line-height: 1;

    font-size: 30px;

    font-weight: 700;

    color: #79be3f;

    letter-spacing: 0.06em;

    font-family: "Roboto";

    box-sizing: border-box;

    padding: 10px 10px;

}

.investor-overview-month{

    box-sizing: border-box;

    padding: 10px 10px;

}

.investor-overview-month:last-child{

    margin-bottom: 0;

}

.investor-overview-month:nth-child(even){

    background-color: #f5f5f5;

}

.investor-overview-month-text{

    width: calc(100% - 70px);

    line-height: 36px;

    font-size: 16px;

    font-weight: 700;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    display: inline-block;

    vertical-align: middle;

    position: relative;

    margin-right: 20px;

}

.investor-overview-month-download{

    width: 50px;

    line-height: 36px;

    font-size: 16px;

    color: #555;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    display: inline-block;

    vertical-align: middle;

    text-align: center;

    transition: all .3s linear;

}





.investor-dividends_stockPrices-title{

    line-height: 36px;

    font-size: 16px;

    font-weight: 700;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    position: relative;

    margin-bottom: 10px;

}

.investor-dividends_stockPrices-text{

    line-height: 36px;

    font-size: 16px;

    color: #555;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

}

.investor-dividends_stockPrices-text>p>a{

    display: inline-block;

}

.investor-dividends-box{

    margin-top: 40px;

}



.investor-importantMessage-box{

    display: inline-block;

    display: -webkit-inline-block;

}

.investor-importantMessage-info{

    display: block;

    cursor: pointer;

    transition: all .3s linear;

}

.investor-importantMessage-info:nth-child(odd){

    background-color: #f5f5f5;

}

.investor-importantMessage-info-top-box{

    box-sizing: border-box;

    padding: 15px 20px;

}

.investor-importantMessage-info-date{

    font-size: 16px;

    color: #888;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    display: inline-block;

    vertical-align: middle;

    width: 120px;

    transition: all .3s linear;

}

.investor-importantMessage-info-name{

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    display: inline-block;

    vertical-align: middle;

    width: calc(100% - 160px);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: all .3s linear;

}

.investor-importantMessage-info-arrow{

    text-align: right;

    width: 40px;

    font-size: 16px;

    color: #888;

    display: inline-block;

    vertical-align: middle;

    transition: all .3s linear;

}

.investor-importantMessage-info-text-box{

    width: 100%;

    display: none;

    box-sizing: border-box;

    padding: 10px 20px;

    padding-bottom: 50px;

    border-top: 1px solid #d1d1d1;

    position: relative;

}

.investor-importantMessage-info-text{

    font-size: 16px;

    color: #333;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 2;

    overflow : hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 6;

    -webkit-box-orient: vertical;

}

.investor-importantMessage-info-more{

    position: absolute;

    bottom: 20px;

    right: 10px;

    font-size: 16px;

    color: #888;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 20px;

    transition: all .3s linear;

}





.investor-importantMessage-pages-info-box{

    text-align: center;

}

.investor-importantMessage-pages-info-name{

    font-size: 28px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    font-weight: 700;

}

.investor-importantMessage-pages-info-date{

    font-size: 16px;

    color: #888;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

}

.investor-importantMessage-pages-info-edit{

    font-size: 18px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 2;

    box-sizing: border-box;

    padding: 20px 0;

    margin: 20px 0;

}

.investor-importantMessage-pages-info-arrow-box{

    width: 100%;

    height: 20px;

    display: block;

    position: relative;

    margin-bottom: 10px;

}

.investor-importantMessage-pages-info-arrow{

    font-size: 16px;

    color: #888;

    font-weight: 700;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    position: absolute;

    transition: all .3s linear;

}

.investor-importantMessage-pages-info-arrow-prev{

    top: 0;

    left: 0;

}

.investor-importantMessage-pages-info-arrow-next{

    top: 0;

    right: 0;

}

.investor-importantMessage-pages-info-back-box>a{

    font-size: 16px;

    color: #888;

    font-weight: 700;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    transition: all .3s linear;

}





.investor-governance-info-title-box{

    background-color: #E4E4E4;

    display: block;

    box-sizing: border-box;

    padding: 0 20px;

}

.investor-governance-info-title-name{

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 50px;

    width: calc(100% - 60px);

    display: inline-block;

    vertical-align: middle;

    box-sizing: border-box;

    padding-right: 10px;

}

.investor-governance-info-title-download{

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 50px;

    width: 60px;

    display: inline-block;

    vertical-align: middle;

    text-align: center;

}

.investor-governance-info{

    display: block;

    box-sizing: border-box;

    padding: 13px 20px;

}

.investor-governance-info:nth-child(odd){

    background-color: #f5f5f5;

}

.investor-governance-info-name{

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 24px;

    width: calc(100% - 60px);

    display: inline-block;

    vertical-align: middle;

    box-sizing: border-box;

    padding-right: 10px;

}

.investor-governance-info-download{

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 24px;

    width: 60px;

    display: inline-block;

    vertical-align: middle;

    text-align: center;

    cursor: pointer;

    transition: all .3s linear;

}





.investor-service-topText-box{

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 30px;

    margin-bottom: 40px;

}

.investor-service-info-list:nth-child(n + 2){

    margin-top: 60px;    

}

.investor-service-info-list-left{

    width: 120px;

    display: inline-block;

    vertical-align: middle;

    border: 1px solid #ddd;

    border-radius: 20px;

    box-sizing: border-box;

    padding: 15px;

}

.investor-service-info-list-left-icon{

    width: 40px;

    height: 40px;

    overflow: hidden;

    display: block;

    margin: 0 auto;

    border-radius: 50%;

}

.investor-service-info-list-left-text{

    font-size: 16px;

    color: #79be3f;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 30px;

    margin-top: 5px;

    width: 85px;

    display: block;

    margin: 0 auto;

    overflow: hidden;

    word-break: keep-all;

    text-align: center;

}

.investor-service-info-list-text{

    width: calc(100% - 120px);

    display: inline-block;

    vertical-align: middle;

    box-sizing: border-box;

    padding-left: 40px;

}

.investor-service-info-title{

    display: inline-block;

    vertical-align: middle;

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 24px;

    margin-right: 10px;

    transition: all .3s linear;

}

.investor-service-info-name{

    display: inline-block;

    vertical-align: middle;

    font-size: 16px;

    color: #000;

    letter-spacing: 0.06em;

    font-family: "微軟正黑體";

    line-height: 24px;

    transition: all .3s linear;

}

.investor-service-info-appellation{

    margin-bottom: 5px;

}

.investor-service-info-units .investor-service-info-name{

    font-weight: 700;

    font-size: 22px;

    color: #79be3f;

}

.investor-service-info-appellation .investor-service-info-name{

    font-weight: 700;

    font-size: 28px;

    line-height: 1.2;

    color: #00a4a5;

}

.investor-service-info-statement-box{

    margin-top: 40px;

}







@media only screen and (max-width: 1200px){

    .investor-all-box{

        width: 1000px;

        padding: 100px 0;

    }

}

@media only screen and (max-width: 1000px){

    .investor-all-box{

        width: 750px;

        padding: 60px 0;

    }

    .investor-category-box{

        width: 100%;

        display: block;

        position: relative;

        margin-right: 0;

        margin-bottom: 40px;

        top: inherit;

    }

    .rwd-investor-category{

        width: 100%;

        height: 46px;

        border: 1px solid #d1d1d1;

        font-size: 16px;

        letter-spacing: 1px;

        text-align: center;

        display: block;

        line-height: 46px;

        position: relative;

        box-sizing: border-box;

    }

    .rwd-investor-category:after {

        content: '';

        width: 0px;

        height: 0px;

        margin: 0 auto;

        border-right: 5px solid transparent;

        border-top: 8px solid #888;

        border-left: 5px solid transparent;

        display: block;

        position: absolute;

        bottom: calc(50% - 5px);

        right: 5%;

        box-sizing: border-box;

    }

    .investor-category-all-box{

        width: 100%;

        display: none;

        box-sizing: border-box;

        border: 1px solid #d1d1d1;

        border-top: none;

        background-color: #fff;

        position: absolute;

        z-index: 9;

    }

    .investor-category{

        padding: 0 20px;

        text-align: center;

    }

    .investor-info-box{

        width: 100%;

        padding: 20px;

    }

}

@media only screen and (max-width: 750px){

    .investor-all-box{

        width: 550px;

        padding: 40px 0;

    }

    .investor-info-box{

        padding: 15px;

    }

}

@media only screen and (max-width: 550px){

    .investor-all-box{

        width: 95vw;

        padding: 20px 0;

    }

    .investor-category-box{

        margin-bottom: 20px;

    }

    .rwd-investor-category{

        line-height: 36px;

        height: 36px;

        font-size: 14px;

    }

    .investor-category{

        font-size: 14px;

        line-height: 36px;

    }

    .investor-info-box{

        padding: 5px;

    }



    .investor-info-title{

        font-size: 18px;

        width: 100%;

        display: block;

        letter-spacing: 0.03em;

    }

    .investor-info-path-box{

        width: 100%;

        display: block;

        margin-top: 10px;

    }

    .investor-info-path{

        font-size: 12px;

        margin-right: 15px;

    }

    a.investor-info-path::after{

        font-size: 12px;

        left: calc(100% + 3px);

    }

    .investor-info-title-box{

        padding-bottom: 5px;

        margin-bottom: 15px;

    }

    .investor-info-select-text{

        font-size: 14px;

    }



    .investor-info-select{

        width: 160px;

        height: 26px;

        font-size: 14px;

        margin-left: 5px;

    }



    .investor-overview-info-name-box p{

        font-size: 12px;

    }

    .investor-overview-info-title-month{

        width: 30%;

        font-size: 14px;

        padding: 16px 5px;

        letter-spacing: 0.03em;

    }

    .investor-overview-info-title-right{

        width: 80%;

    }

    .investor-overview-info-title-consolidated,

    .investor-overview-info-title-amount, 

    .investor-overview-info-title-ratio{

        font-size: 14px;

        padding: 5px 4px;

        letter-spacing: 0.03em;

    }

    .investor-overview-info-list-month{

        width: 30%;

        font-size: 16px;

        padding: 5px 5px;

    }

    .investor-overview-info-list-amount, 

    .investor-overview-info-list-ratio{

        width: calc(35% - 2px);

        font-size: 16px;

    }

    .investor-overview-info-total-month{

        width: 30%;

        font-size: 14px;

        padding: 5px 4px;

    }

    .investor-overview-info-total-amount, 

    .investor-overview-info-total-ratio{

        width: calc(35% - 2px);

        font-size: 16px;

    }



    .investor-overview-year{

        line-height: 30px;

        font-size: 20px;

        padding: 5px 5px;

    }

    .investor-overview-month {

        padding: 5px 5px;

    }

    .investor-overview-month-text{

        width: calc(100% - 40px);

        margin-right: 10px;

        line-height: 30px;

    }

    .investor-overview-month-download{

        width: 30px;

        line-height: 30px;

    }

    .investor-overview-info-statement-box{

        font-size: 12px;

    }



    .investor-dividends-box {

        margin-top: 20px;

    }

    .investor-dividends_stockPrices-title{

        line-height: 26px;

        margin-bottom: 5px;

    }

    .investor-dividends_stockPrices-text{

        line-height: 1.4;

    }

    .investor-dividends_stockPrices-text p:nth-child(2){

        margin-top: 10px;

    }



    .investor-importantMessage-info-top-box{

        padding: 5px 10px;

        position: relative;

    }

    .investor-importantMessage-info-name{

        width: calc(100% - 20px);

    }

    .investor-importantMessage-info-arrow{

        width: 20px;

        line-height: 40px;

        position: absolute;

        top: calc(50% - 20px);

        right: 10px;

    }

    .investor-importantMessage-pages-info-name{

        font-size: 20px;

    }

    .investor-importantMessage-pages-info-date{

        font-size: 14px;

    }

    .investor-importantMessage-pages-info-edit{

        font-size: 16px;

        padding: 10px 0;

        margin: 10px 0;

    }

    .investor-governance-info-title-box{

        padding: 0 10px;

    }

    .investor-governance-info-title-name{

        line-height: 40px;

    }

    .investor-governance-info-title-download{

        line-height: 40px;

    }

    .investor-governance-info{

        padding: 8px 10px;

    }

    .investor-service-topText-box{

        line-height: 20px;

        margin-bottom: 20px;

    }

    .investor-service-info-title,

    .investor-service-info-name{

        font-size: 14px;

        line-height: 20px;

    }

    .investor-service-info-appellation{

        margin-bottom: 10px;

    }

    .investor-service-info-list:nth-child(n + 2){

        margin-top: 40px;    

    }

    .investor-service-info-list-left{

        border-radius: 10px;

        padding: 10px;

        display: block;

    }

    .investor-service-info-list-text{

        width: 100%;

        padding-left: 0px;

        padding-top: 20px;

    }





}

@media only screen and (max-width: 400px){

    .investor-overview-year-box:nth-child(n){

        width: 100%;

        margin-top: 0;

        border-left: none;

    }

    .investor-overview-year-box:nth-child(n + 2){

        margin-top: 20px;

    }

}

@media only screen and (max-width: 320px){

    .investor-overview-info-title-month{

        padding: 26px 5px;

    }

    .investor-overview-info-title-ratio{

        height: 50px;

        display: inline-flex;

        display: -webkit-inline-flex;

        align-items: center;

        -webkit-align-items: center;

        justify-content: center;

        -webkit-justify-content: center;

    }

    .investor-overview-info-title-amount{

        line-height: 40px;

    }

}

@media only screen and (max-height: 350px){

    .investor-box{

        min-height: 350px;

    }

}





@media only screen and (min-width: 1001px){

    .investor-category:hover,

    .investor-category.active{

        color: #fff;

        background-color: #00a4a5;

    }

    .investor-overview-month-download:hover{

        color: #00a4a5;

    }

    .investor-importantMessage-info-top-box{

        transition: all .3s linear;

    }

    .investor-importantMessage-info:hover .investor-importantMessage-info-top-box{

        background-color: #00a4a5;

    }

    .investor-importantMessage-info:hover .investor-importantMessage-info-date,

    .investor-importantMessage-info:hover .investor-importantMessage-info-name,

    .investor-importantMessage-info:hover .investor-importantMessage-info-arrow{

        color: #fff;

    }

    .investor-importantMessage-info-more:hover{

        color: #000;

    }

    

    .investor-importantMessage-pages-info-back-box>a:hover{

        color: #00a4a5;

    }

    .investor-importantMessage-pages-info-arrow:hover{

        color: #79be3f;

    }

    .investor-governance-info-download:hover{

        color: #00a4a5;

    }

    .investor-service-info>a:hover .investor-service-info-title,

    .investor-service-info>a:hover .investor-service-info-name{

        color: #79be3f;

    }



    .investor-category-box,

    .investor-info-box{

        opacity: 0;

    }

    .investor-category-box.anima{

        animation: fadeInLeft 1s ease 0s 1 both;

    }

    .investor-info-box.anima{

        animation: fade 1s ease .4s 1 both;

    }



    .investor-info-select:hover{

        box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);

    }

    a.investor-info-path:hover{

        color: #79be3f;

    }

}