@charset "utf-8";
/*CSS Info ======================================================================
File Name: Layout.css
Editor: Sophia
CreateDate:2010/12/06
Last Editor: Sophia
LastDate: 2021/06/17
Version: 3.2
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	使用jQuery
    Responsive Design
=================================================================================*/



/*===============================================================================
                         以下是內頁版面設定
=================================================================================*/



/*#region .OverviewArea */

.OverviewArea {
    padding-bottom: 40px;
    -webkit-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    transition: all .35s ease-out;
}

    .OverviewArea.Debut {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 64px);
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
        padding-bottom: 0px;
        background: #FFF;
        z-index: 900;
    }

    /*#region .DataCards */

    .OverviewArea .DataCards {
    }

        .OverviewArea .DataCards .Card {
            padding: 10px;
            margin-bottom: 20px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
            box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
        }

            .OverviewArea .DataCards .Card .Part {
                display: inline-block;
            }

                .OverviewArea .DataCards .Card .Part + .Part {
                    margin-left: 0.5em;
                }

            .OverviewArea .DataCards .Card dt {
                font-size: 1.25rem;
                line-height: 1.5em;
                font-weight: bold;
                margin-bottom: 0.25rem;
            }

                .OverviewArea .DataCards .Card dt span {
                    font-size: 1.25rem;
                    line-height: 1.5em;
                    font-weight: bold;
                }

                .OverviewArea .DataCards .Card dt.Smaller, .OverviewArea .DataCards .Card dt.Smaller span {
                    font-size: 1.125rem;
                }

                .OverviewArea .DataCards .Card dt .Desc {
                    font-weight: normal;
                    font-size: 0.875rem;
                }


            .OverviewArea .DataCards .Card dd {
                font-size: 1.875rem;
                line-height: 1.5em;
                font-weight: bold;
                text-align: right;
                color: #FFF;
                background-color: #009688;
                padding: 5px 10px;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;
            }

                .OverviewArea .DataCards .Card dd .Date {
                    font-size: 1.5rem;
                }

                .OverviewArea .DataCards .Card dd .Unit {
                    font-weight: normal;
                    font-size: 0.75rem;
                    line-height: 1em;
                    vertical-align: bottom;
                    margin-left: 0.5em;
                }

                .OverviewArea .DataCards .Card dd .Prefix {
                    font-weight: normal;
                    font-size: 0.875rem;
                    line-height: 1em;
                    font-weight: normal;
                    margin-right: 0.5em;
                }

    .OverviewArea .PublishDate {
        margin-bottom: 20px;
    }

        .OverviewArea .PublishDate dt, .OverviewArea .PublishDate dd {
            display: inline-block;
        }

        .OverviewArea .PublishDate dt {
            font-size: 0.875rem;
            line-height: 1em;
            color: #707070;
        }

        .OverviewArea .PublishDate dd {
            font-size: 1.25rem;
            line-height: 1.5em;
            color: #000;
        }

    /*#endregion */

    /*#region .MyChart */
    .OverviewArea .chartWrap {
        padding: 5px;
        margin-bottom: 20px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
        box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
    }

    .OverviewArea .MyChart {
        min-width: 180px;
        width: 100%;
        height: 380px;
    }

/*#endregion */


@media only screen and (max-width: 61em) {
    .OverviewArea.Debut {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        min-height: 500px;
        overflow-y: auto;
    }

    .OverviewArea .DataCards .Card .Part {
        display: inline;
    }
}

@media only screen and (min-width: 48em) and (max-width:61em) {
    .OverviewArea.Debut {
        width: calc(100% - 64px);
    }

        .OverviewArea.Debut .columns {
            max-width: 100%;
        }
}

@media only screen and (min-width: 48em) and (max-width:820px) {
    .OverviewArea.Debut > .wrapper {
        width: Calc(100% - 64px);
    }

    .OverviewArea.Debut .columns {
        max-width: 100%;
        width: 100%;
    }
}


@media only screen and (max-width: 47.9735em) {
    .OverviewArea.Debut {
        width: calc(100% - 48px);
    }

        .OverviewArea.Debut .columns {
            max-width: 100%;
        }

    .OverviewArea > .wrapper {
        width: calc(420px + 20px );
    }
}

/*@media only screen and (min-width: 30em) and (max-width: 47.9735em) {

  
}*/

@media only screen and (max-width: 29.9375em) {

    .OverviewArea.Debut > .wrapper {
        width: calc(300px + 20px - 48px );
        max-width: calc(100% - 20px - 48px)
    }

    .OverviewArea > .wrapper {
        width: calc(300px + 20px );
    }

    .OverviewArea.Debut .DataCards .Card {
        margin-bottom: 10px;
    }

    .OverviewArea .DataCards .Card .Part {
        display: inline-block;
    }
        .OverviewArea .DataCards .Card .Part + .Part {
            margin-left: 0em;
        }

    .OverviewArea.Debut .DataCards .Card dt {
        font-size: 1rem;
        line-height: 1.25em;
    }

    .OverviewArea.Debut .DataCards .Card dd {
        font-size: 1.5rem;
        line-height: 1.25em;
    }

    .OverviewArea.Debut .PublishDate {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 20em) {

}

/*#endregion */
/*#region .SpecialDesc */
.SpecialDesc {
}

    .SpecialDesc h4 {
        font-size: 1.25rem;
        font-weight: bold;
        color: #1a706b;
    }

    .SpecialDesc p {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
/*#endregion */
/*#region .ExplainArea*/
.ExplainArea {
    background-color: #1a706b;
    color: #FFF;
}

    .ExplainArea h4 {
        color: #ffeb3b;
    }

    .ExplainArea p {
        color: #FFF;
    }

#endregion*/
/*#region .MyDescAdds 文字旁的小標誌 */
.MyDescAdds {
    margin-left: .25em;
    font-size: 1.5em;
    cursor: pointer;
    vertical-align: middle;
    color: #ffeb3b;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.MyDescAdds:hover {
    color: #FFF;
}
/*#endregion */

/*#region .ui-tooltip*/

.ui-tooltip, .arrow:after {
    background: #242424;
    border: 2px solid #FFF;
}

.ui-tooltip {
    padding: 0.75rem 0.75rem;
    color: #FFF;
    font-size: 0.875rem;
    /*  border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;*/
    text-transform: uppercase;
    box-shadow: 0 0 7px #818181;
}

    .ui-tooltip div {
        line-height: 1.5em;
    }
/*#endregion */