@charset "utf-8";
                    /****************** 基本 ******************/
                    
                    * {
                        font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Geneva, sans-serif;
                    }
                    
                    body {
                        font-size: 17px;
                        font-weight: 400;
                        line-height: 1.8;
                        color: #777777;
                        color: #323232;
                        background-color: #fff;
                        height: 100%;
                        position: relative;
                        /*padding-top: 70px;*/
                    }
                    
                    @media screen and (max-width: 1400px) {
                        body {
                            padding-top: 60px;
                        }
                    }
                    
                    .text-center {
                        /* margin-bottom: 20px; */
                    }
                    
                    hr {
                        border-top: 1px solid #afafaf;
               
                    }
                    
                    
                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    h6 {
                        color: #000;
                        font-weight: 400;
                    }
                    
                    p {
                        margin-bottom: 1.5em;
                    }
                    
                    a {
                        color: #009999;
                        -webkit-transition: 0.5s;
                        -o-transition: 0.5s;
                        transition: 0.5s;
                        text-decoration:none;
                    }
                    
                    a:hover,
                    a:active,
                    a:focus,
                    a:visited {
                        /* color: rgb(255, 255, 255); */
                        outline: none;
                        text-decoration: none;
                    }
                    
                    img,
                    object,
                    embed,
                    video {
                        max-width: 100%;
                    }
                    
                    .overlay {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        z-index: 0;
                        background: #000;
                        opacity: .2;
                    }

                    .bgw{
                        background-color: #f4f4f4;
                    }

                    .bgwhite{
                        width: 100%; 
                        background-color: #f4f4f4;
                    }

                    .top{
                        background-image:url(images/top.jpg);
                        
                    }

                    .h-100{
                       height: 100%;
                    }

                    .d-none{
                        display: none;
                    }
                    .w-0{
                        width: 0px;
                    }
                    .pb-10{
                        padding-bottom: 10px;
                    }

                    .rtnMessage{
                        font-size: 16px;
                        margin-left: -15px; 
                        text-align: center;
                        display: none;
                    }

                    /*
--- 按鈕 btn ---*/
                    
                    .btn:hover,
                    .btn:active,
                    .btn:focus {
                        background: #393e46 !important;
                        color: #fff;
                        outline: none !important;
                    }
                    
                    .btn {
                        border-radius: 0px;
                    }
                    
                    .btn.btn-primary {
                        background: #009999;
                        color: #fff;
                        border: none !important;
                        border: 2px solid transparent !important;
                        display: inline-block;
                        margin-top: 5px;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .btn.btn-lg {
                            padding-top: 10px;
                            padding-right: 8px;
                            padding-left: 8px;
                            padding-bottom: 10px;
                            font-size: 16px;
                        }
                    }
                    /*--- 切換裝置顯示項目 ---*/
                    #banner_pc {
                        display: block;
                    }
                    
                    #banner_m {
                        display: none;
                    }
                    
                    @media screen and (max-width: 576px) {
                        #banner_pc {
                            display: none;
                        }
                        #banner_m {
                            display: block;
                        }
                    }
                    
                    /****************** 導覽列 navbar ******************/
                    
                    .navbar {
                        background-color: #f8f8f8;
                        border-bottom: 1px solid #e8e8e8;
                        padding: 0;
                    }
                    
                    .navbar-header {}
                    /*
--- 聯邦LOGO navbar-brand ---*/
                    
                    .navbar-brand {
                        padding-right: 0;
                    }
                    
                    .navbar .navbar-brand {
                        margin-right: 50px;
                        margin-left: 20px;
                        width: 250px;
                        height: 70px;
                        background: url(https://card.ubot.com.tw/eCard/activity/RWD/images/UBOT-logo.png) no-repeat 0 50%;
                    }
                    
                    .navbar-header .navbar-brand img {
                        width: 90%;
                    }
                    
                    .navbar-light .navbar-toggler {
                        border: none;
                    }
                    
                    .navbar-light .navbar-toggler-icon {
                        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 153, 153, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
                    }
                    
                    .navbar-light .navbar-toggle .icon-bar {
                        background-color: #009999;
                    }
                    
                    .navbar-light .navbar-nav .nav-link {
                        color: rgba(0, 0, 0, .9);
                    }
                    
                    .navbar-light .navbar-toggle:hover,
                    .navbar-light .navbar-toggle:focus {
                        background-color: #f8f8f8;
                    }
                    
                    .navbar-nav>li>a {
                        margin-left: 15px;
                        margin-top: 10px;
                        display: block;
                    }
                    
                    .navbar-light .navbar-nav>li>a:hover,
                    .navbar-light .navbar-nav>li>a:focus {
                        color: #009999;
                        background-color: transparent;
                    }
                    
                    .navbar-light .navbar-nav>.active>a,
                    .navbar-light .navbar-nav>.active>a:hover,
                    .navbar-light .navbar-nav .active>.nav-link,
                    .navbar-light .navbar-nav>.active>a:focus {
                        color: #009999;
                    }
                    
                    .navbar-toggle {
                        margin-top: 13px;
                        margin-bottom: 15px;
                        border: 0px;
                        border-radius: 0px;
                    }
                    /* :hover */
                    
                    .navbar-nav>li>a:after {
                        content: '';
                        display: block;
                        width: 100%;
                        transform: scaleX(0);
                        height: 2px;
                        background: #009999;
                        z-index: -1;
                        transition: all .5s;
                    }
                    
                    .navbar-nav>li:hover>a:after {
                        transform: scaleX(1);
                    }
                    /*
--- 導覽列下拉dropdown-menu ---*/
                    
                    .dropdown-menu {
                        background-color: rgba(255, 255, 255, 0.8);
                        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
                        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
                    }
                    
                    .dropdown-item.active,
                    .dropdown-item:active {
                        background-color: #009999;
                    }
                    
                    .dropdown-item:hover,
                    .dropdown-item:focus {
                        background-color: #eaeaea;
                    }
                    
                    @media screen and (max-width: 1200px) {
                        .navbar .navbar-brand {
                            margin-right: 0px;
                            margin-left: 20px;
                            width: 200px;
                            height: 60px;
                            /* 60 only*/
                            background: url(https://card.ubot.com.tw/eCard/activity/RWD/images/UBOT-logo_s.png) no-repeat 0 50%;
                        }
                    }
                    
                    @media screen and (max-width: 576px) {
                        .navbar .navbar-brand {
                            margin-right: 50px;
                            margin-left: 15px;
                            background: url(https://card.ubot.com.tw/eCard/activity/RWD/images/UBOT-logo_s.png) no-repeat 0 50%;
                        }
                    }
                    /****************** 輪播 carousel  ******************/
                    
                    .carousel-indicators li {
                        width: 10px;
                        height: 10px;
                        opacity: .8;
                        border-radius: 50px;
                        border: 1px solid #dedede;
                        background-color: #bbbbbb;
                    }
                    
                    .carousel-indicators .active {
                        background-color: #009999;
                    }
                    /*
--- 主視覺 ---*/
                    
                    .topimg1 {
                        background-image: url(../images/top.jpg) !important;
                    }
                    
                    .topimg2 {
                        background-image: url(../images/inquiry_top.jpg) !important;
                    }
                    
                    .topimg3 {
                        background-image: url(../images/top_3.jpg) !important;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .topimg1 {
                            background-image: url(../images/top_m.jpg) !important;
                        }
                        .topimg2 {
                            background-image: url(../images/inquiry_top_m.jpg) !important;
                        }
                        .topimg3 {
                            background-image: url(../images/top_3m.jpg) !important;
                        }
                    }
                    /****************** 版面 Container ******************/
                    
                    .gridContainer {
                        width: 100%;
                        clear: none;
                        float: none;
                        margin-left: auto;
                        margin-right: auto;
                        background-size: cover;
                    }
                    
                    @media only screen and (max-width: 768px) {
                        .gridContainer {
                            width: 100%;
                            margin: auto;
                            clear: none;
                            float: none;
                            margin-left: auto;
                            background-size: cover;
                        }
                    }
                    /*--- 活動主版 mainArea ---*/
                    
                    .mainArea {
                        padding-top: 30px;
                        padding-bottom: 30px;
                    }
                    
                    .mainArea h3 {
                        color: #0c8f94;
                        font-size: 18pt;
                        font-weight: bold;
                        border: 2px solid #0c8f94;
                        border-radius: 10px;
                        margin-top: 20px;
                        margin-bottom: 20px;
                        line-height: 30pt;
                        text-align: center;
                        padding: 10px;
                    }
                    
                    .mainArea h2 {
                        /* 活動主標 */
                        color: #FFFFFF;
                        font-size: 21pt;
                        font-weight: bold;
                        background-color: #722e95;
                        /* border-radius: 50px; */
                        border: 2px solid #722e95;
                        width: 400px;
                        margin-top: 20px;
                        margin-bottom: 20px;
                        line-height: 28pt;
                        text-align: center;
                        padding: 10px;
                    }
                    
                    .mainArea h2 small {
                        color: #333333;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainArea h2 {
                            /* 活動主標 */
                            font-size: 20px;
                            width: 260px;
                            padding: 0;
                        }
                        .mainArea h3 {
                            font-size: 14pt;
                            line-height: 24pt;
                        }
                    }
                    
                    .mainArea h3.date {
                        /* 活動起訖日+對象 */
                        line-height: 1.5;
                        font-size: 1.5rem;
                    }
                    
                    .mainArea h4 {
                        /* 活動敘述文 */
                        /* color: #797979; */
                        font-size: 16pt;
                        line-height: 1.5;
                        padding: 10px 100px 3px;
                        /*    text-align: center;*/
                        margin: 0 auto;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        left: 0;
                    }
                    
                    @media screen and (max-width: 1200px) {
                        .mainArea h4 {
                            /* 活動敘述文 */
                            padding: 10px 50px 3px;
                        }
                    }
                    
                    @media screen and (max-width: 992px) {
                        .mainArea h4 {
                            /* 活動敘述文 */
                            padding: 10px 0px 3px;
                        }
                    }
                    
                    .mainArea h5 {
                        /* 內文區塊下方備註 */
                        color: #2A2A2A;
                        font-size: 14px;
                        line-height: 1.8;
                        text-align: left;
                        padding-left: 10px;
                        padding-right: 10px;
                    }
                    
                    .mainArea p {
                        display: block;
                        color: #000000;
                        font-size: 13pt;
                        text-align: center;
                        margin-bottom: 0px;
                        line-height: 32px;
                    }
                    
                    .mainArea img {
                        margin: 0px auto;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainArea {
                            padding-top: 20px;
                            padding-bottom: 0px;
                        }
                        .mainArea h3.date {
                            /* 活動起訖日+對象 */
                            font-size: 1rem;
                            margin-bottom: 0;
                        }
                        .mainArea h4 {
                            /* 活動敘述文 */
                            font-size: 12pt;
                            line-height: 1.5;
                            padding: 10px 0px 3px;
                        }
                    }
                    /*--- 活動內文區塊 mainText ---*/
                    /*--- 活動主版 mainArea2 ---*/
                    
                    .mainArea2 {
                        padding-top: 50px;
                        padding-bottom: 30px;
                        background: #eee5ed;
                    }
                    
                    .mainArea2 h2 {
                        /* 活動主標 */
                        color: #FFFFFF;
                        font-size: 21pt;
                        background-color: #009999;
                        border-radius: 50px;
                        border: 1px solid #009999;
                        max-width: 350px;
                        margin: 0 auto 10px;
                        line-height: 28pt;
                        text-align: center;
                    }
                    
                    .mainArea2 h2 small {
                        color: #333333;
                    }
                    
                    .mainArea2 h3.date {
                        /* 活動起訖日+對象 */
                        line-height: 1.5;
                        font-size: 1.5rem;
                    }
                    
                    .mainArea2 h4 {
                        /* 活動敘述文 */
                        display: block;
                        /* color: #797979; */
                        font-size: 16pt;
                        line-height: 1.5;
                        padding: 0px;
                        /* text-align: center; */
                    }
                    
                    @media screen and (max-width: 768px) {
                        .mainArea2 h4 {
                            padding: 0px;
                        }
                    }
                    
                    .mainArea2 h5 {
                        /* 內文區塊下方備註 */
                        color: #2A2A2A;
                        font-size: 14px;
                        line-height: 1.8;
                        text-align: left;
                        padding-left: 10px;
                        padding-right: 10px;
                    }
                    
                    .mainArea2 p {
                        display: block;
                        color: #000000;
                        font-size: 13pt;
                        text-align: center;
                        margin-bottom: 0px;
                        line-height: 32px;
                    }
                    
                    .mainArea2 img {
                        margin: 0px auto;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainArea2 {
                            padding-top: 20px;
                            padding-bottom: 0px;
                        }
                        .mainArea2 h3.date {
                            /* 活動起訖日+對象 */
                            font-size: 1rem;
                        }
                        .mainArea2 h4 {
                            /* 活動敘述文 */
                            font-size: 12pt;
                            line-height: 1.4;
                            padding: 3px;
                            margin-bottom: 0px;
                        }
                    }
                    /*


/*--- 活動主版 mainArea3 ---*/
                    
                    .mainArea3 {
                        padding-top: 30px;
                        padding-bottom: 30px;
                        background: rgb(255, 232, 249);
                    }
                    
                    .mainArea3 h2 {
                        /* 活動主標 */
                        color: #FFFFFF;
                        font-size: 21pt;
                        background-color: #009999;
                        border-radius: 50px;
                        border: 1px solid #009999;
                        max-width: 350px;
                        margin: 0 auto 10px;
                        line-height: 28pt;
                        text-align: center;
                    }
                    
                    .mainArea3 h2 small {
                        color: #333333;
                    }
                    
                    .mainArea3 h3.date {
                        /* 活動起訖日+對象 */
                        line-height: 1.5;
                        font-size: 1.5rem;
                    }
                    
                    .mainArea3 h4 {
                        /* 活動敘述文 */
                        display: block;
                        /* color: #797979; */
                        font-size: 16pt;
                        line-height: 1.5;
                        padding: 10px 100px 3px;
                        text-align: center;
                    }
                    
                    .mainArea3 h5 {
                        /* 內文區塊下方備註 */
                        color: #2A2A2A;
                        font-size: 14px;
                        line-height: 1.8;
                        text-align: left;
                        padding-left: 10px;
                        padding-right: 10px;
                    }
                    
                    .mainArea3 p {
                        display: block;
                        color: #000000;
                        font-size: 13pt;
                        text-align: center;
                        margin-bottom: 0px;
                        line-height: 32px;
                    }
                    
                    .mainArea3 img {
                        margin: 0px auto;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainArea3 {
                            padding-top: 0px;
                            padding-bottom: 30px;
                        }
                        .mainArea3 h3.date {
                            /* 活動起訖日+對象 */
                            font-size: 1rem;
                        }
                        .mainArea3 h4 {
                            /* 活動敘述文 */
                            font-size: 12pt;
                            line-height: 1.5;
                            padding: 10px 0px 3px;
                        }
                    }
                    /*




.tableC{
z-index: -1;
/* background-color: rgb(228, 197, 228); */
                    
                    .mainText2 {
                        font-size: 24px;
                        color: #545559;
                        margin-top: 50px;
                        margin-bottom: 15px;
                        line-height: 50px;
                        /* border: 1px solid #ff6600; */
                        padding: 30px 0px 0px;
                        text-align: center;
                        z-index: -1;
                    }
                    
                    .mainText4 {
                        font-size: 24px;
                        color: #545559;
                        margin-top: 0px;
                        margin-bottom: 15px;
                        line-height: 50px;
                        /* border: 1px solid #ff6600; */
                        padding: 20px;
                        text-align: center;
                        z-index: -1;
                    }
                    
                    .mainText5 {
                        font-size: 24px;
                        color: #545559;
                        margin-top: 0px;
                        margin-bottom: 15px;
                        line-height: 50px;
                        /* border: 1px solid #ff6600; */
                        padding: 0px 500px;
                        text-align: center;
                        z-index: -1;
                    }
                    
                    @media screen and (max-width: 1600px) {
                        .mainText5 {
                            padding: 0px 300px;
                        }
                    }
                    
                    @media screen and (max-width: 1200px) {
                        .mainText5 {
                            padding: 0px 150px;
                        }
                    }
                    
                    @media screen and (max-width: 992px) {
                        .mainText5 {
                            padding: 0px 80px;
                        }
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainText5 {
                            padding: 0px 60px;
                        }
                    }
                    
                    @media screen and (max-width: 480px) {
                        .mainText5 {
                            padding: 0px 40px;
                        }
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainText2 {
                            margin-top: 0px;
                            padding: 0;
                            margin-bottom: 0;
                        }
                    }
                    
                    .mainText1 h2 {
                        text-align: center;
                    }
                    
                    .mainText2 h2 {
                        width: 150px;
                        margin-top: -60px;
                        background-color: #ff6600;
                        border: 1px solid #ff6600;
                        font-weight: bold;
                    }
                    
                    .mainText1 .title,
                    .mainText2 .title {
                        text-align: center;
                        font-weight: bold;
                        font-size: 22px;
                        color: #545559;
                        padding: 10px;
                        letter-spacing: 1px;
                        line-height: 24pt;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                    }
                    
                    .mainText1 .title1 {
                        text-align: center;
                        font-weight: bold;
                        font-size: 22px;
                        color: #545559;
                        padding-top: 10px;
                        padding-left: 10px;
                        padding-right: 10px;
                        /* letter-spacing: 1px; */
                        line-height: 24pt;
                    }
                    
                    .mainText3 {
                        font-size: 24px;
                        color: #545559;
                        /* margin-top: -30px; */
                        margin-bottom: 15px;
                        line-height: 50px;
                        border: 1px dashed #ffffff;
                        padding: 30px;
                        text-align: center;
                        background-color: white;
                        /* border-radius: 10px; */
                        z-index: 10;
                    }
                    
                    .mainText1 {
                        /* border-bottom: 2px solid #09a5bd; */
                        text-align: center;
                    }
                    
                    .mainText1 h1 {
                        font-size: 1.5em;
                    }
                    
                    .mainText1 h1:after {
                        content: '';
                        display: block;
                        width: 60%;
                        height: 2px;
                        background-color: #0ea9a1;
                        margin: 10px auto 0px;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainText3 {
                            padding: 40px 0px 30px;
                            margin-bottom: 0;
                            margin-top: 40px;
                        }
                    }
                    
                    .reward {
                        font-size: 24px;
                        color: #d60000;
                        margin-right: 3px;
                        margin-left: 3px;
                        padding: 5px;
                    }

                    .rewardRed {
                        color: #d60000;
                    }
                    
                    .flex-container {
                        flex-direction: row;
                    }
                    
                    .flexBox {
                        display: flex;
                        justify-content: space-between;
                        align-items: stretch;
                    }
                    
                    @media screen and (max-width: 991px) {
                        .flexBox {
                            -webkit-flex-direction: column;
                            -moz-flex-direction: column;
                            -ms-flex-direction: column;
                            -o-flex-direction: column;
                            flex-direction: column;
                        }
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainText1 .title,
                        .mainText2 .title {
                            font-size: 22px;
                            line-height: 1.5;
                            padding-left: 5px;
                            padding-right: 5px;
                        }
                        .mainText2 h2 {
                            width: 200px;
                            font-size: 23px;
                        }
                    }
                    /*
--- 備註文字 ---*/
                    
                    .memoTable {
                        font-size: 15px;
                        text-align: left;
                        line-height: 1.8;
                    }
                    
                    .memoTable td {
                        vertical-align: top;
                    }
                    
                    .memoTable1 {
                        font-size: 32px;
                        text-align: center;
                        line-height: 1.8;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                    }
                    
                    .memoTable1 th {
                        font-size: 25px;
                        font-weight: normal;
                        color: rgb(130, 130, 130);
                        vertical-align: top;
                    }
                    
                    .memoTable1 td {
                        font-weight: bold;
                        vertical-align: top;
                        border-bottom: 1px solid #dee2e6;
                    }
                    
                    @media screen and (max-width: 768px) {
                        .memoTable1 {
                            font-size: 24px;
                            text-align: center;
                            line-height: 1.8;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            margin: 0 auto;
                        }
                        .memoTable1 th {
                            font-size: 17px;
                            font-weight: bold;
                            font-weight: normal;
                            color: rgb(130, 130, 130);
                            vertical-align: top;
                        }
                    }
                    
                    @media screen and (max-width: 576px) {
                        .memoTable1 td {
                            padding: 0;
                        }
                        .memoTable1 th {
                            padding: 0;
                        }
                    }
                    
                    @media screen and (max-width: 480px) {
                        .memoTable1 td {
                            font-size: 16px;
                            padding: 0;
                        }
                        .memoTable1 th {
                            font-size: 12px;
                            font-weight: bold;
                            color: #000;
                            vertical-align: top;
                            padding: 0;
                        }
                    }
                    /*
--- 活動表格 ---*/
                    
                    .table td {
                        border-bottom: 1px solid #dee2e6;
                    }
                    
                    .mainArea .table thead th {
                        height: 30px;
                        border-bottom: 1px;
                    }
                    
                    .mainArea .table-bordered th,
                    .mainArea .table-bordered td {
                        padding: 3px;
                        border: 1px solid #a1bbbd;
                        vertical-align: middle;
                    }
                    
                    .mainArea .table-bordered {
                        text-align: center;
                        line-height: 2;
                        vertical-align: middle;
                        border-width: 1px;
                        border-color: #ddd;
                        padding: 10px;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainArea .table thead th {
                            font-size: 17px;
                        }
                        .mainArea .table-bordered td {
                            font-size: 16px;
                        }
                        .mainArea .table-bordered {
                            line-height: 1.5;
                        }
                    }
                    /*
--- 注意事項 ---*/
                    
                    .noticeDesc h3.date {
                        font-size: 1.2rem;
                    }
                    
                    .noticeDesc h4 {
                        font-size: 1.3rem;
                        padding: 0;
                    }
                    
                    .noticeDesc h5 {
                        font-size: 1.2rem;
                        padding-top: 10px;
                    }
                    
                    .noticeDesc .table-bordered {}
                    
                    ul.list-style {
                        margin-bottom: .3rem;
                        padding: 0 0 0 20px;
                    }
                    /*
--- 注意事項表格 exTable ---*/
                    
                    .table th,
                    .table td {
                        vertical-align: middle;
                    }
                    
                    #resettable table {
                        padding: 0 50px;
                    }
                    
                    #resettable th {
                        color: white;
                        text-align: center;
                        padding: 5px;
                        border: 1px solid white;
                        background: rgb(160, 94, 160);
                    }
                    
                    #resettable td {
                        padding: 5px;
                        border: 1px solid #ffffff;
                        background: rgb(242, 229, 255);
                    }
                    
                    #exTable table th,
                    #exTable table td {
                        text-align: center;
                        font-size: 12px;
                        border: 1px solid #ccc;
                        vertical-align: inherit;
                    }
                    
                    #exTable table th {
                        color: #fff;
                        background-color: #323232;
                    }
                    /*
--- 分頁 tabs submenu ---*/
                    
                    .tabs {
                        margin-top: 50px;
                        margin-bottom: 20px;
                        padding-right: 0px;
                        padding-left: 0px;
                        border-bottom: 1px solid #00859a;
                    }
                    
                    .submenu ul {
                        list-style-type: none;
                    }
                    
                    .submenu li {
                        float: left;
                        height: 30px;
                        width: 33.333%;
                        font-size: 13pt;
                        font-weight: 500;
                        line-height: 20px;
                        color: #1c100b;
                        text-align: center;
                        padding: 0 24px;
                        list-style-type: none;
                    }
                    
                    .submenu li a {
                        color: #a9a9a9;
                        padding-bottom: 5px;
                    }
                    
                    .submenu li a.active {
                        color: #FFFFFF;
                        font-size: 15pt;
                        background: #00859a;
                        padding: 10px 10% 8px;
                        border-radius: 10px 10px 0 0;
                    }
                    
                    @media screen and (max-width: 587px) {
                        .submenu {
                            padding: 0 0 0 0;
                        }
                        .submenu li {
                            font-size: 12pt;
                            padding: 0px;
                        }
                        .submenu li a {
                            padding-bottom: 8px;
                        }
                        .submenu li a.active {
                            font-size: 12pt;
                            padding: 10px 10% 10px;
                        }
                    }
                    
                    @media screen and (max-width: 320px) {
                        .submenu li {
                            font-size: 10pt;
                        }
                        .submenu li a.active {
                            font-size: 10pt;
                            padding-bottom: 13px;
                        }
                    }
                    /* 備註-注意事項 */
                    
                    .memo {
                        /* font-size: 0.95rem; */
                        list-style-type: none;
                        padding: 15px 5px 15px;
                        text-align: center;
                    }
                    
                    @media all and (min-width: 320px) and (max-width: 576px) {
                        .memo {
                            font-size: .8rem;
                        }
                    }
                    /*
--- 版權宣告footer ---*/
                    
                    #footer {
                        background-color: #eeeeee;
                    }
                    
                    .copyright {}
                    
                    .copyright a {
                        color: #7f7f7f;
                        outline: none;
                        text-decoration: none;
                    }
                    
                    .copyright h4,
                    .copyright h5 {
                        margin-top: 15px;
                    }
                    
                    .copyright h4 {
                        font-size: 26px;
                        text-align: right;
                    }
                    
                    .copyright h5 {
                        font-size: 12px;
                        text-align: left;
                        color: #777;
                        margin-left: 70px;
                    }
                    
                    .copyright p {
                        font-size: 16px;
                        text-align: center;
                        margin-top: 5px;
                        margin-bottom: 5px;
                    }
                    
                    .copyright .list-inline {
                        margin-bottom: 0;
                    }
                    
                    @media screen and (max-width: 992px) {
                        .copyright h4 {
                            font-size: 20px;
                            text-align: center;
                        }
                        .copyright h5 {
                            font-size: 12px;
                            margin-left: auto;
                        }
                        .copyright p {
                            font-size: 12px;
                            text-align: center;
                        }
                    }
                    
                    @media only screen and (max-width: 768px) {
                        #footer {
                            padding: 10px 0;
                            color: #7f7f7f;
                            background-color: #eeeeee;
                        }
                        #footer .copyright {
                            margin-bottom: 0px;
                            padding-bottom: 0;
                        }
                        .copyright h5 {
                            text-align: center;
                        }
                        .copyright a {
                            color: #7f7f7f;
                            outline: none;
                            text-decoration: none;
                        }
                    }
                    /* animate */
                    
                    .js .to-animate,
                    .js .to-animate-2,
                    .js .single-animate .js .animate-single {
                        opacity: 0;
                    }
                    
                    .js .animate-box {
                        opacity: 0;
                    }
                    /* boxItem:hover 20200428 */
                    
                    .boxItem {
                        -webkit-transition: 0.5s;
                        -o-transition: 0.5s;
                        transition: 0.5s;
                        max-width: 330px;
                        border: 2px solid #e0e0e0;
                    }
                    
                    .boxItem:hover {
                        cursor: pointer;
                        /* 滑鼠手指 */
                        -webkit-transform: translateY(-4px);
                        -ms-transform: translateY(-4px);
                        transform: translateY(-4px);
                        border: 2px solid #009999;
                        box-shadow: 0px 4px 5px rgba(120, 120, 120, 0.3);
                    }
                    
                    @media screen and (max-width: 991px) {
                        .boxItem {
                            max-width: none;
                        }
                    }
                    /*
--- Swiper -------------------------------*/
                    
                    .swiper-wrapper {
                        list-style: none;
                        padding: 10px;
                    }
                    
                    .swiper-slide {
                        min-height: 300px;
                        padding: 5px;
                        margin-bottom: 20px;
                        border-radius: 5px;
                        border: 1px solid #ccc;
                        background-color: #FFFFFF;
                        text-align: center;
                        /*display: flex;
flex-direction: column;*/
                    }
                    
                    .swiper-slide .btn {
                        bottom: 0;
                    }
                    
                    .swiper-button-next,
                    .swiper-button-prev {
                        display: none;
                    }
                    
                    @media screen and (max-width: 991px) {
                        .swiper-button-next,
                        .swiper-button-prev {
                            display: block;
                        }
                    }
                    /* 活動內文贈底紅圓白字 */
                    
                    .circle {
                        border-radius: 50px;
                        background-color: #ff0000;
                        color: #fff;
                        font-weight: bold;
                        padding: 0 4px;
                    }
                    /* 內文區塊手機版 */
                    
                    .mainText2 .train {
                        color: white;
                        font-weight: bold;
                        /* margin-top: 20px;   */
                        /* max-width: 300px;   */
                        /* background-image:linear-gradient(to top, #ecb5db 50%, rgba(0, 0, 0, 0) 50.1%); */
                        padding: 10px;
                        /* width: 100%; */
                        /* height: 100%; */
                        /* text-align: center; */
                        border: 2px dotted rgb(128, 19, 138);
                        background-color: rgb(128, 19, 138);
                        width: 400px;
                        margin-bottom: 20px;
                        border-radius: 0px;
                    }
                    
                    .mainText2 .train2 {
                        color: white;
                        font-weight: bold;
                        /* margin-top: 20px;   */
                        /* max-width: 300px;   */
                        /* background-image:linear-gradient(to top, #ecb5db 50%, rgba(0, 0, 0, 0) 50.1%); */
                        padding: 10px;
                        /* width: 100%; */
                        /* height: 100%; */
                        /* text-align: center; */
                        border: 2px dotted #722e95;
                        background-color: #722e95;
                        width: 400px;
                        margin-bottom: 20px;
                        border-radius: 0px;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainText2 .train {
                            font-size: 20px;
                            width: 240px;
                            padding: 0;
                        }
                        .mainText2 .train2 {
                            font-size: 20px;
                            width: 240px;
                            padding: 0;
                            margin-top: 20px;
                        }
                    }
                    
                    .mainText2 .train1 {
                        font-size: 17pt;
                        color: rgb(0, 0, 0);
                        font-weight: bold;
                        margin-top: 10px;
                        /* max-width: 300px;   */
                        /* background-image:linear-gradient(to top, #ecb5db 50%, rgba(0, 0, 0, 0) 50.1%); */
                        /* padding: 10px 0px; */
                        /* width: 100%; */
                        /* height: 100%; */
                        /* text-align: center; */
                        border: 0px;
                        border: 1px solid purple;
                        background-color: white;
                        border-radius: 8px;
                    }
                    /*注意事項button*/
                    
                    .button1 .btn.btn-lg.btn-default {
                        background-color: #ffffff;
                        border: 1px solid rgba(183, 183, 183, 1.00);
                        font-size: 18px;
                        letter-spacing: 0px;
                    }
                    
                    .button1 {
                        /* margin-top: 20px; */
                        /* [disabled]margin-right: 20px; */
                        /* [disabled]margin-left: 20px; */
                        /* [disabled]margin-bottom: 40px; */
                        padding-top: 10px;
                        padding-right: 20px;
                        padding-left: 20px;
                        padding-bottom: 10px;
                        text-align: center;
                        line-height: 24pt;
                        font-size: 20px;
                        font-weight: bold;
                        color: white;
                        border: 1px solid #ccc;
                        /* [disabled]border-radius: 20px; */
                        background-color: purple;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .button1 {
                            font-size: 18px;
                        }
                    }
                    
                    .button1 a:hover,
                    .button1 a:focus,
                    .button1 a:visited,
                    .button1 a:active {
                        color: #000;
                    }
                    
                    .button1:hover,
                    .button1:focus {
                        color: #ff6600;
                        font-size: 20px;
                        border-color: rgba(255, 171, 107, 1.00);
                        border-width: thin;
                    }
                    /*---------button2-----------*/
                    
                    .button2 .btn.btn-lg.btn-default {
                        background-color: #ffffff;
                        border: 1px solid rgba(183, 183, 183, 1.00);
                        font-size: 18px;
                        letter-spacing: 0px;
                    }
                    
                    .button2 {
                        /* margin-top: 20px; */
                        /* [disabled]margin-right: 20px; */
                        /* [disabled]margin-left: 20px; */
                        /* [disabled]margin-bottom: 40px; */
                        padding-top: 10px;
                        padding-right: 20px;
                        padding-left: 20px;
                        padding-bottom: 10px;
                        text-align: center;
                        line-height: 24pt;
                        font-size: 20px;
                        font-weight: bold;
                        color: white;
                        border: 1px solid #ccc;
                        /* [disabled]border-radius: 20px; */
                        background-color: #722e95;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .button2 {
                            font-size: 18px;
                        }
                    }
                    
                    .button2 a:hover,
                    .button2 a:focus,
                    .button2 a:visited,
                    .button2 a:active {
                        color: #000;
                    }
                    
                    .button2:hover,
                    .button2:focus {
                        color: rgba(255, 79, 0, 1.00);
                        font-size: 20px;
                        border-color: rgba(255, 171, 107, 1.00);
                        border-width: thin;
                    }
                    
                    .linkB {
                        padding: 20px 0px 30px;
                        margin: 0 auto;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .linkB {
                            padding: 10px 0px 30px;
                        }
                    }
                    
                    .blockIN {
                        display: block;
                    }
                    
                    .ANG {
                        font-size: 120%;
                        color: #722e95;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .ANG {
                            font-size: 100%;
                        }
                    }
                    
                    .dateA {
                        margin-left: 80pt;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .dateA {
                            margin-left: 60pt;
                            line-height: 24px;
                        }
                    }
                    
                    .dateB {
                        display: block;
                    }
                    
                    .cardN {
                        text-align: center;
                    }
                    
                    .tgoBTN {
                        margin: 0 auto;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        left: 0;
                    }
                    /* 
------------------------for 前月新增消費查詢頁面------------------------ */
                    
                    .mainText1 {
                        margin-top: -0px;
                        margin-bottom: -30px;
                        padding: 30px 20px 30px;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainText1 {
                            padding: 40px 0px 30px;
                        }
                    }
                    
                    #btn-nav-apply {
                        /* position: absolute; */
                        right: 0px;
                        top: 20px;
                        margin-left: 15px;
                        margin-right: 20px;
                        width: 100px;
                        padding: 5px 15px;
                        background-color: #00859a;
                        border-radius: 18px;
                        color: #fff;
                        font-size: 16px;
                    }
                    /*--- 主視覺 ---*/
                    
                    .topimg-Half-ckeck {
                        background-image: url(../images/inquiry_top.jpg) !important;
                    }
                    
                    @media screen and (max-width: 736px) {
                        .topimg-Half-ckeck {
                            background-image: url(../images/inquiry_top.jpg) !important;
                        }
                    }
                    
                    @media screen and (max-width: 576px) {
                        .topimg-Half-ckeck {
                            background-image: url(../images/inquiry_top_m.jpg) !important;
                        }
                    }
                    
                    .fill .container h2 {
                        width: 400px;
                        text-align: center;
                        margin-left: 2%;
                        font-size: 40px;
                    }
                    
                    .fill .container h2:after {
                        content: '';
                        display: block;
                        width: 80%;
                        height: 2px;
                        background-color: #0ea9a1;
                        margin: 3px auto 0px;
                    }
                    
                    .fill .container h1 {
                        width: 240px;
                        text-align: center;
                        margin-left: 5%;
                        font-size: 40px;
                    }
                    
                    .fill .container h1:after {
                        content: '';
                        display: block;
                        width: 34px;
                        height: 2px;
                        background-color: #0ea9a1;
                        margin: 3px auto 0px;
                    }
                    
                    @media screen and (max-width: 1400px) {
                        .fill .container {
                            width: 100%;
                            height: 90%;
                            padding-top: 0px;
                        }
                    }
                    
                    @media screen and (max-width: 991px) {
                        .fill .container h2 {
                            width: 160px;
                            text-align: center;
                            margin-left: 5%;
                            font-size: 36px;
                            margin-top: -50px;
                        }
                        .fill .container h2:after {
                            margin: -2.8rem auto 0px;
                        }
                        .fill .container h1 {
                            width: 240px;
                            text-align: center;
                            margin-left: 5%;
                            font-size: 36px;
                        }
                    }
                    
                    @media screen and (max-width: 768px) {
                        .fill .container h2 {
                            width: 150px;
                            margin-top: -90px;
                            font-size: 30px;
                        }
                        .fill .container h2:after {
                            margin: -2.3rem auto 0px;
                        }
                        .fill .container h1 {
                            width: 140px;
                            margin-top: -50px;
                            font-size: 30px;
                        }
                    }
                    
                    @media screen and (max-width: 560px) {
                        .fill .container h2 {
                            margin-top: -70px;
                            margin-left: 1%;
                        }
                        .fill .container h1 {
                            margin-top: 20px;
                            margin-left: 1%;
                        }
                    }
                    /*--- 活動主版 mainArea ---*/
                    
                    .mainAreaL {
                        padding-top: 10px;
                        padding-bottom: 10px;
                    }
                    
                    @media screen and (max-width: 576px) {
                        .mainAreaL {
                            padding-top: 10px;
                            padding-bottom: 30px;
                        }
                    }
                    /* for iphoneSE */
                    
                    @media screen and (max-width: 320px) {
                        .formLogin .form-group>.form-control {
                            min-width: 15rem !important;
                        }
                        .formList li select:first-of-type {
                            min-width: 50px !important;
                        }
                        .formList select:first-of-type {
                            max-width: 80px !important;
                        }
                        .formList select {
                            margin-left: 0 !important;
                        }
                        .formLogin .inDate {
                            min-width: 0rem !important;
                        }
                        /* .nav-link{padding: 0.5rem 0.3rem;} */
                        a#btn-nav-apply {
                            margin-left: 0px;
                        }
                    }
                    /* ------------------------for login end------------------------ */