@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");


.FtEn {
  font-family: "Roboto", "Microsoft JhengHei";
}

.FtTw {
  font-family: "Noto Sans TC", "Microsoft JhengHei";
}





.OutFrame {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #001F2E;

}

.InnerFrame {
    width: 84%;
    max-width: 806px;

    position: relative;
    top: -50px;
    text-align: center;
}

.MainGif {
    padding: 10px 0;
}


.InfoBox {
    width: 100%;
    padding: 32px 6% 30px 8%; 
    margin: 20px auto 0px auto;
    border-radius: 20px;
    background-color: #FFF4E6;

    color: #000000;
    text-align: left;
    line-height: 22px;
}

    .Title {
        display: block;
        margin: 0 0 12px 0; 
        color: #714400;
    }


    h1 {
        display: inline-block;
        font-size: 23px;
        font-weight: bold;
        line-height: 32px;
    }

    h2 {
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        line-height: 26px;
    }

    h3 {
        font-size: 17px;
        line-height: 24px;
        margin: 0 0 2px 0; 
    }

    small {
        display: block;
        font-size: 12px;
        line-height: 19px; 
        color: #707070;
    } 
      
    .Fw5 {
        font-weight: 500;
    }



    .GridBox {
        display: flex;
        align-items: center;
        margin: 12px auto 0px auto;

        font-size: 16px;
    }

        .Grid:nth-child(1) {
            width: calc( 210px + 9% );
        }

        .Grid:nth-child(2){
            width: 1px;
            min-height: 40px;
            background-color: #707070;
        }

        .Grid:nth-child(3) {
            flex: 1;
            padding: 0 0 0 3%;
        }

        .GridBox i {
            display: inline-block;
            margin: 0 4px 0 0;
        }

        .Grid a {
            color: #000000;
        }
        .Grid a:hover {
            color: #714400;
        }




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

    .OutFrame {
        /* width: 100%; */
        /* height: 100vh; */
        /* display: flex; */
        /* justify-content: center; */
        /* align-items: center; */

        /* background-color: #054984; */

        /* border:  1px solid #fc0; */
    }


    .InnerFrame {
        /* width: 84%; */
        /* max-width: 806px; */

        /* position: relative; */
        top: -10px;
        /* text-align: center; */
    }

    .MainGif img {
        width: 100%;
        max-width: 548px;
        height: auto;
    }

    .InfoBox {
        /* width: 100%; */
        padding: 30px 10% 32px 10%; 
        margin: 5px auto 0px auto;
        /* border-radius: 20px; */
        /* background: rgba(255, 255, 255, 0.9); */

        /* color: #000000; */
        /* text-align: left; */
        /* line-height: 22px; */
    }


        h1 {
            /* display: inline-block; */
            font-size: 22px;
            /* font-weight: bold; */
            line-height: 38px;
        }

        h2 {
            /* display: inline-block; */
            font-size: 19px;
            /* font-weight: bold; */
            line-height: 23px;
        }

        h3 {
            font-size: 16px;
            line-height: 23px;
            /* margin: 0 0 2px 0;  */
        }

        small {
            display: block;
            font-size: 13px;
            line-height: 17px;
            /* color: #707070; */
        } 


    .GridBox {
        /* display: flex; */
        /* align-items: center; */
        margin: 15px auto 0px auto;

        font-size: 15px;
        flex-wrap: wrap;
    }

        .Grid:nth-child(1) {
            width: 100%;
        }

        .Grid:nth-child(2){
            /* width: 1px;
            min-height: 40px;
            background-color: #707070; */

            display: none;
        }

        .Grid:nth-child(3) {
            flex: 100%;
            padding: 0px 0 0 0;
        }



}