/*2021-06-14-6*/
    html {
        overflow-x: hidden;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        line-height: 1.5;    
        background-image: url(bk.png);
        background-repeat: repeat-x;
        background-position: center;
        background-attachment: fixed;
        
    }
    @media screen and (max-width: 576px) {
        body {
            background-image: url(bkMobile.png);
        }
    }
    /* Safari 11+ */
    @media not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    body { 
    background-repeat: space repeat;
    }
    }}

    /* Safari 10.1 */
    @media not all and (min-resolution:.001dpcm){ 
    @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
    body { 
    background-repeat: space repeat;
    }
    }}

    /* Safari 6.1-10.0 (but not 10.1) */
    @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
    @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
    body { 
    background-repeat: space repeat;
    }
    }}

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
    }


    .width1200-adj {
        margin: 0 auto;
        width: 1920px;
        /* background-color: rgb(256, 256, 256); */
    }

    @media (min-width: 1041px) and (max-width: 1919px) {
        .width1200-adj {
            /* width: 1024px; */
            width: 100%;
        }
    }

    @media (min-width:717px) and (max-width: 1040px) {
        .width1200-adj {
            width: 100%;
        }
    }

    @media screen and (max-width: 716px) {
        .width1200-adj {
            width: 100%;
        }
    }
    .img {
        width: 100%;
    }
    .topRelative{
        position: relative;
    }

    .headbar{
        background-color: white;
        position: fixed;
        top: 0px;
        width: 100%;
        height: 77px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition-property: top;
        transition-duration: 0.5s;
    }
    .headbarImg{    
        padding: 0 1em;
        max-width: 200px;
    }
    .headbarSign{
        background-color: #e94627;
        color: white;
        font-family: 'Noto Sans TC', sans-serif;
        font-weight: 400;
        font-size: 2em;
        padding: 0.15em 1em;
        margin: 0 0.5em;
        letter-spacing: 0.2em;
    }

    /*show & hide in screen width 576px*/
    .showbox576 {
        display: block;
    }
    .hidebox576 {
        display: none ;
    }
    @media screen and (max-width: 576px) {
        .showbox576 {
            display: none;
        }
        .hidebox576 {
            display: block;
        }
    }

    /*show & hide in screen width 992px*/
    .showbox992 {
        display: block;
    }
    .hidebox992 {
        display: none ;
    }
    @media screen and (max-width: 992px) {
        .showbox992 {
            display: none;
        }
        .hidebox992 {
            display: block;
        }
    }

    /*show & hide in screen width 576~992px*/
    .showbox576992 {
        display: block;
    }
    .hidebox576992 {
        display: none ;
    }
    @media screen and (min-width: 577px)  and (max-width: 991px) {
        .showbox576992 {
            display: none;
        }
        .hidebox576992 {
            display: block;
        }
    }




    .TitleShare{
        font-family: 'Noto Sans TC', sans-serif;
        text-align: justify;
        color: black;
        font-size: 1.75em;
        letter-spacing: 0.059em;
        font-weight: 400;
        width: 920px;
        line-height: 1.75em;
        margin: 2em auto 0em auto;
        z-index: 1;
    }
    .redButton{
        background-color: #e94627;
        color: white;
        font-family: 'Noto Serif TC', serif;
        font-weight: 700;
        font-size: 1.8em;
        line-height: 1.2em;
        letter-spacing: 0.025em;
        width: 17em;
        margin: 2em auto;
        text-align: center;
        letter-spacing: 0.025em;
        padding: 5px 25px;
        border-radius: 1em;
    }
    .imageTitle{
        margin: 7em auto 3em auto;
    }
    .ArticleMain{
        font-size: 1.55em;
        letter-spacing: 0.01em;
        margin: 0.5em auto 0em auto;
    }
    .redText{
        color: #e94627;
        font-family: 'Noto Serif TC', serif;
        font-size: 1.55em;
        letter-spacing: 0.01em;
        margin: 0 auto;
    }    
    .ArticleIndent{
        text-indent: -5.2em;
        padding-left: 5.2em;
        margin: 0.1em auto 0em auto;
    }
    .ArticleIndent2{
        text-indent: -6.7em;
        padding-left: 6.7em;
        margin: 0.1em auto 0em auto;
    }
    .ArticleIndent3{
        text-indent: -1.6em;
        padding-left: 1.6em;
        margin: 0.1em auto 0em auto;
        width: 100%;
    }
    .Indentblock{
        width: 920px;
        padding-left: 7.8em;
        margin: auto;
    }
    .downloadBTN{
        background-color: #e94627;
        color: white;
        font-family: 'Noto Serif TC', serif;
        font-weight: 700;
        font-size: 2.7em;
        line-height: 1.2em;
        /* width: max-content; 這個語法不適用於IPHONE,儘量不用 */
        width: 10em;
        margin: 2em auto;
        text-align: center;
        letter-spacing: 0.06em;
        padding: 0.5em 1.0em;
        border-radius: 1em;
    }
    .ArticleEmail {
        text-align: center;
        margin: 0em auto 0em auto;
    }
    .downloadArea{
        margin-bottom: 2em;
    }
    .footer{
        background-color: white;
        width: 100%;
        padding-top: 0.5em;
        padding-bottom: 1em;
    }
    .showUnit{
        text-align: justify;display: flex;justify-content: center;align-items: center;
    }

    .paraBlock{
        /* background-color: grey; */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        width: 920px;
        margin: 1em auto 1em auto;
    }
    .paraLeft{
        /* background-color: greenyellow; */
        flex: 0 0 5.5em;
    }
    .paraRight{
        /* background-color: rgb(235, 168, 226); */
        flex-grow:0;
        flex-shrink:0;
        flex-basis: calc(100% - 5.5em);
    }
    .paraText{
        font-family: 'Noto Sans TC', sans-serif;
        font-size: 1.55em;
        letter-spacing: 0.01em;
        text-align: left;
        color: black;
        font-weight: 400;
        line-height: 1.75em;
    }
    .paraIndent{
        text-indent: -1.6em;
        padding-left: 1.6em;
    }
    @media screen and (max-width: 992px) {
        .headbar{height: 50px;}
        .headbarSign{font-size: 1.25em;}
        .paraBlock{width: 86%;}
        .paraText{font-size: 1.30em;}
        .TitleShare {
            width: 86%;
            font-size: 1.30em;        
            letter-spacing: 0em;
        }    
        .ArticleMain{font-size: 1.2em;}
        .redText{font-size: 1.2em;}
        .Indentblock{width: 86%;padding-left: 2.6em;}
    }
    @media screen and (max-width: 768px) {
        .headbar{height: 50px;}
        .headbarSign{font-size: 1.25em;}
        .paraBlock{width: 86%;}
        .paraText{font-size: 1.20em;}
        .TitleShare {
            width: 86%;
            font-size: 1.20em;        
            letter-spacing: 0em;
        }
        .ArticleMain{font-size: 1.15em;}
        .redText{font-size: 1.15em;}
        .Indentblock{width: 86%;padding-left: 3.1em;}
    }

    @media screen and (max-width: 576px) {
        .headbarImg{max-width: 166px;}
        .headbar{height: 50px;}
        .headbarSign{font-size: 1.25em;}
        .paraBlock{width: 86%;}
        .paraText{font-size: 1.20em;}
        .TitleShare {
            width: 86%;
            font-size: 1.20em;        
            letter-spacing: 0em;
        }
        .ArticleMain{font-size: 1.15em;}
        .redText{font-size: 1.15em;}
        .Indentblock{width: 86%;padding-left: 4.5em;}
        .redButton{
            font-size: 1.25em;
        }
        .imageTitle{
            margin: 5em auto 1.5em auto;
        }
        .downloadBTN {font-size: 1.5em;}
        .ArticleEmail{font-size: 1.1em;}    
        .downloadArea{margin-bottom: 1.5em;}
        .redButton{padding: 5px 5px;width: 16em;}
    }
    @media screen and (max-width: 384px) {
        .headbar{height: 50px;}
        .headbarSign{font-size: 1.0em;}
        .paraBlock{width: 86%;}
        .paraText{font-size: 1.20em;}
        .TitleShare {
            width: 86%;
            font-size: 1.20em;        
            letter-spacing: 0em;
        }
        .ArticleMain{font-size: 1.15em;}
        .redText{font-size: 1.15em;}
        .Indentblock{width: 86%;padding-left: 5em;}
        .redButton{
            font-size: 1.05em;
        }
        .imageTitle{
            margin: 5em auto 1.5em auto;
        }
        .downloadBTN {font-size: 1.5em;}
        .ArticleEmail{font-size: 1.1em;} 
        .downloadArea{margin-bottom: 1.5em;}
        .redButton{padding: 5px 5px;width: 16em;}
    }



    .shadow {
        -webkit-box-shadow: 5px 5px 6px 0px #aaa;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
        -moz-box-shadow:    5px 5px 6px 0px #aaa;  /* Firefox 3.5 - 3.6 */
        box-shadow: 5px 5px 6px 0px #aaa;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    }

    .AexampleTitle{
        text-align:center;flex:0 0 100%;font-weight: bolder;font-size: 1.8em;
    }
    @media screen and (max-width: 576px) {
        .AexampleTitle{
            text-align:center;flex:0 0 100%;font-weight: bolder;font-size: 1.5em;
        }
    }
    .list-item>a  {
        font-weight: 400;
        text-decoration: none;
        color:black;
    }
    .list-item>a:hover  {
        font-weight: bold;
        color:blue;
    }
    .list-item>a:active  {
        font-weight: bold;
        background-color:#f9dd94;
    }
    .list-item>a:visited  {
        font-weight: bold;
        color:darkblue;
    }


    ol li {
        list-style-type: none;
        counter-increment: item;
      }
      
      ol li:before {
        content: counter(item);
        margin-right: 5px;
        font-size: 80%;
        background-color: #f9dd94;
        color: #7eb4e2;
        font-weight: bold;
        padding: 3px 8px;
        border-radius: 3px;
      }