@layer base, plugin, components, layout, custom, pages, inline_style, media_query, print_query;



@import "swiper-bundle.min.css" layer(plugin);



/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all base css inside @layer base {}
***
* please make sure all base css inside @layer base {}
* please make sure all base css inside @layer base {}
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/


/* ========================= ========================= ========================= ========================= ========================= =========================
***
* use base.css to reset the browser style and style basic tag, some class cannot be clasifiy also include in base css, color variable also set in base.css for global use
***
* then use @layer plugin to include all plugin related css
* then use @layer components to include all components such as button, modal, card, accordion, etc
* then use @layer form_components to include all components related to form
* then use @layer layout to put style the layout. @layer layout also inculde header footer, mobile menu and body area styling
* then use @layer custom to put style for special styling
* then use @layer pages to put style for specfic pages. eg login page has login.css with @layer pages
* then use @layer inline_style for inline_style class
* then use @layer media_query to put style for mobile and responsive design
* last use @layer print to put style for print version
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
/*!
* myCss v1.0.0
* Copyright © 2022 NetSoft Limited. All rights reserved.
*/
/*======================Temp Css========================*/
@layer base {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        font-size: clamp(14px, calc(0.5vw + 0.4rem), 20px);
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: "Open Sans", "Arial", "Helvetica", "sans-serif", "microsoft jhenghei";
        visibility: visible;
        color: #212121;
        font-size: 1.125rem;
        overflow-x: hidden;
    }

    body.tradition {
        font-family: "Noto Sans TC", "microsoft jhenghei", "Open Sans", "Arial", "Helvetica", sans-serif;
        /*font-family: "Microsoft JhengHei", '微軟正黑體', "Open Sans", "Arial", "Helvetica", sans-serif;*/
    }


    body.simplify {
        font-family: "Noto Sans SC", "microsoft jhenghei", "Open Sans", "Arial", "Helvetica", sans-serif;
        /*font-family: "Microsoft JhengHei", '微軟正黑體', "Open Sans", "Arial", "Helvetica", sans-serif;*/
    }

    body.ieVersion {
        overflow-x: hidden;
    }




    @font-face {
        font-family: 'Oxygen';
        src: local(Oxygen-Regular),
            url(fonts/Oxygen-Regular.ttf) format("truetype");
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'Oxygen';
        src: local(Oxygen-Bold),
            url(fonts/Oxygen-Bold.ttf) format("truetype");
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'Oxygen';
        src: local(Oxygen-Light),
            url(fonts/Oxygen-Light.ttf) format("truetype");
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'Open Sans';
        src: local(OpenSans-Light),
            url(fonts/OpenSans-Light.ttf) format("truetype");
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'Open Sans';
        src: local(OpenSans-Regular),
            url(fonts/OpenSans-Regular.ttf) format("truetype");
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'Open Sans';
        src: local(OpenSans-Regular),
            url(fonts/OpenSans-Semibold.ttf) format("truetype");
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'Open Sans';
        src: local(OpenSans-Bold),
            url(fonts/OpenSans-Bold.ttf) format("truetype");
        font-weight: 700;
        font-style: normal;
        font-stretch: normal;
    }

    @font-face {
        font-family: 'Open Sans';
        src: local(OpenSans-ExtraBold),
            url(fonts/OpenSans-ExtraBold.ttf) format("truetype");
        font-weight: 800;
        font-style: normal;
        font-stretch: normal;
    }

    .container {
        /*max-width: 1900px;*/
        max-width: 2500px;
        width: 100%;
        padding-left: 9.0625rem;
        padding-right: 9.0625rem;

    }

    img,
    table {
        border: 0;
    }

    img {
        vertical-align: middle;
        max-width: 100%;
    }

    table {
        width: 100%;
    }

    table,
    div {
        border-collapse: collapse;
        text-align: left;
        vertical-align: top;
    }
    body .disNone {
        display: none;
    }


    .nowrap,
    .noWrap {
        white-space: nowrap;
    }

    body #fontSize0 {
        font-size: 0.75em;
    }

    body #fontSize1 {
        font-size: 1em;
    }

    body #fontSize2 {
        font-size: 1.25em;
    }

    .access {
        position: absolute;
        left: -9999px;
    }

    #skiptocontent.access {
        position: fixed !important;
        top: 0 !important;
        left: 0.5rem !important;
        background-color: #555;
        color: var(--white);
    }

    .disIB {
        display: inline-block;
    }

    .nobr {
        display: inline-block;
        margin: 0;
        word-break: break-all;
        word-wrap: break-word;
    }

    

    a,
    a:link,
    a:active,
    a:visited {
        text-decoration: none;
    }

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



    body .bold {
        font-weight: bold;
    }

    video {
        max-width: 100%;
    }

    iframe {
        max-width: 100%;
    }


    .font_bold {
        font-weight: bold;
    }

    .float_center {
        text-align: center;
    }

    .font_underline {
        text-decoration: underline;
    }

    .caption {
        font-style: italic;
    }

    .font_italic {
        font-style: italic;
    }

    .float_right {
        float: right;
        padding: 0 0 1em 1em;
    }

    .float_left {
        float: left;
        padding: 0 1em 1em 0;
    }

    .img-cap {
        font-size: 7pt;
    }

    .center {
        margin: 0 auto;
    }

    .align-left {
        text-align: left;
    }

    .clear:after {
        content: "";
        display: table;
        clear: both;
    }

    .note {
        font-size: 0.9em
    }

    .right {
        text-align: right;
    }

    p {
        text-align: left;
        margin-top: 0;
        margin-bottom: 1.375rem;
    }

    li>p:last-child {
        margin-bottom: 0;
    }

    .content-inner-inside-fulltxt {
        width: 100%;
        padding-right: 0;
        min-height: auto;
    }


    /*.ieVersion .contentArea p{
	text-justify: newspaper;
}*/


    ol>li>ul {
        list-style-type: disc;
    }

    #wrap,
    .headerArea {}

    :root {
        --mainblue: #005A9E;
        --secondblue: #286EA0;
        --buttonblue: #0077C1;
        --lightblue: #EEF7FF;
        --lightblue2: #29a0da;
        --headermenu_active_blue: #1C3F5F;
        --moredetailhoverblue: #340569;
        --maindarkgrey: #040404;
        --maindarkgrey2: #2d2d2d;
        --maindarkgrey3: #666666;
        --lightgrey: #707070;
        --lightgrey2: #ccc;
        --extlightgrey: #e8e7e7;
        --extlightgrey2: #f5f5f5;
        --extlightgrey3: #E5E5E5;
        --maindarkgreen: #005239;
        --green1: #3C8132;
        --lightgreen: #F6FFED;
        --white: #fff;
        --black: #000;
        --greenbgcolor: rgba(199, 213, 81, 1);
        --enhanceconnectivity: #0066B5;
        --urban: #00B050;
        --unleash: #00B050;
        --enliven: #0070C0;
        --headermenu_submenu_bgcolor: rgba(245, 245, 245, 0.9);
        --pdfred: #b30b00;
        --pdfredhover: #9F2323;
        /*--imgborderradius: 1.6875rem;*/
        --imgborderradius: 0.75rem;

        --oxygen: "Oxygen", "Arial", "Helvetica", "sans-serif", "microsoft jhenghei";
    }



    body a {
        color: var(--mainblue);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        margin-bottom: 0.5rem;
        font-weight: 500;
        line-height: 1.2;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    h1,
    h2 {}


    h1 {
        font-weight: bold;
        text-align: left;
        display: block;
        font-size: 2.15rem;
        margin-bottom: 0;
        color: var(--mainblue);
        border-radius: var(--imgborderradius);
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        color: var(--white);
        background-color: #0074CC;
        width: fit-content;
        border-bottom-left-radius: 0;
        min-width: calc(20% - 4rem);
    }

    h1.no_border_right_radius {
        border-bottom-right-radius: 0;
    }


    h2 {
        margin-right: 0;
        padding-right: 0;
        font-size: 2rem;
        margin-bottom: 1rem;
        font-weight: 500;
        color: var(--maindarkgrey);
        padding-left: 1.3125rem;
        padding-top: 1rem;
        position: relative;
    }


    h2:before {
        content: '';
        width: 0.3125rem;
        height: 2rem;
        display: inline-block;
        background-color: var(--secondblue);
        position: absolute;
        left: 0;
        top: 1.25rem;
    }

    h3,
    .h3 {
        font-size: 1.6875rem;
        margin-left: 0;
        padding: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0.75rem;
        font-weight: bold;
        color: var(--mainblue);
    }

    h4 {
        margin-top: 0;
        font-size: 1.5rem;
    }

    h5 {
        font-size: 1rem;
        margin-top: 0;
        color: #000000;
    }

    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body label {
        font-weight: inherit;
    }

    .mainContent li {
        margin-left: 0;
        margin-right: 0.6em;
        margin-top: 0.6em;
        margin-bottom: 0.6em;
    }

    .mainContent hr {
        color: #bbb;
        max-width: 100%;
    }

    body .row {
        margin: 0;
        width: 100%;
        /*ie11*/
    }

    ol,
    ul,
    dl {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    img,
    table {
        border: 0;
    }

    table {
        border-collapse: collapse;
    }

    .access {
        position: absolute !important;
        /*	visibility: hidden;*/
        left: -9999px;
        font-size: 0 !important;
        padding: 0 !important;
        width: 0 !important;
        height: 0 !important;
        z-index: -1 !important;
    }

    .navbar-menu {
        position: relative;
        padding: 0;
        margin: 0;
        background-color: transparent;
        background-image: none;
        border: 0;
    }

    .mobileLangTool {
        float: right;
    }

    .searchToolBigWrapper {}

    .langmenu {}

    .footerMenu ul {
        list-style-type: none;
        list-style-position: outside;
        padding: 0;
        margin: 0;
    }

    .mainContent .listContent ul,
    .mainContent .listContent ul li {
        padding: 0;
    }

    .mainContent .siteMenu {
        padding-left: 0;
    }

    .siteMenu>li {
        margin: 0.625rem 0;
    }

    .siteMenu .firstLi img {
        display: none;
    }

    .siteMenu .firstLi .mOnly {
        position: relative;
        visibility: visible;
        left: 0;
    }

    .siteMenu,
    .siteMenu>li {
        list-style: none;
    }

    .siteMenu>li>a br {
        display: none;
    }

    .siteMenu ul {
        margin-top: 0.625rem;
        margin-bottom: 0.625rem;
    }

    .siteMenu .menuLv1 .extmenu {
        display: none;
    }

    .mainContent .siteMenu .menuLv1 {
        margin-left: 1.875rem;
    }

    .dOnly {
        position: static;
        left: auto;
    }

    .dtOnly {
        position: static;
        left: auto;
    }

    .mOnly {
        position: absolute;
        visibility: hidden;
        left: -9999px;
    }

    .tmOnly {
        position: absolute;
        visibility: hidden;
        left: -9999px;
    }

    .smOnly {
        position: absolute;
        visibility: hidden;
        left: -9999px;
    }

    .anchor {
        display: block;
        position: relative;
        height: 1px;
        visibility: hidden;
        width: 100%;
    }



    .content>*:last-child {
        margin-bottom: 0;
    }

    .caption2 {
        margin-top: 0.7rem;
        text-align: center
    }

    .caption2 a {
        text-align: center
    }

    .welcome_text {
        font-size: 1.3rem;
        font-weight: 400;
    }

    .imgwrap2 {
        border-radius: var(--imgborderradius);
        overflow: hidden;
        border: 1px solid #ddd;
    }

    .section_other {
        border-top: 1px solid var(--lightgrey);
        padding-top: 2.1875rem;
    }

    .sub_title {
        font-weight: bold;
    }

}