body {
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", sans-serif;
  padding: 15px;
  font-size: 16px;
  /*background: #0177C1;*/
  background: #FFF;
}


a { text-decoration: none!important; }

    #app {
        margin: 0 auto;
        margin-top: 2%;
        background: white;
        /*padding: 20px;*/
        /*float: left;*/
        width: 100%;
        max-width:800px;
        /*box-shadow: 12px 15px 8px 5px #00000087;*/
    }

    #app {
        font-size: 16px;
    }
    .dr-title { font-size:20px !important; }

    /*@media (max-width: 992px) {
        #app {
            font-size: 16px;
        }
        .dr-title { font-size:23px !important; }
    }*/

    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }
    /*.en *{
        font-size: 1em;
    }*/

    .question_title {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .btnn {
        padding: 10px;
        /*box-shadow: 0px 0px 4px 5px #EFEFEF;*/
        cursor: pointer;
        width: 90%;
        margin-left: 5%;
        border-radius: 0px;
        text-align: center;
        font-size: 16px;
        transition: background 0.2s linear;
        transition: box-shadow 0.2s linear;
        background-color: #4a4a4a;
        color:#FFF;
    }


    .btnn a { color:#000; text-decoration:none; }

    .startnowbtn a { color:#fff; }
    .reset a { color:#fff; }
    .getresult a { color:#fff; }
    .getresult a { color:#fff; }

    .btm .btnn {
        float: left;
        margin-top: 20px;
        border-radius: 20px;
        color:#000;
    }

    .btnn.reset {
        background: #ffb813;
        color: #fff;
        border-radius: 20px
    }

    /*.btnn.lang {
        float: right;
        width: 10vw;
        font-size: 1em;
        margin-left: 5px;
    }*/

    .roww.btm {
        float: left;
        width: 100%;
        display: flex;
        margin-bottom: 30px;
    }

    .roww.btm .coll {
        float: left;
        width: 33%;
        margin: 0px;
        flex: 1;
        text-align: center;
    }

    .center {
        text-align: center;
    }


    .btnn.clicked {
        padding: 10px;
        background: #d3e0e4;
        box-shadow: 1px 1px 1px 1px #cbcbcb;
    }

    #myProgress {
        width: 100%;
        background-color: whitesmoke;
        border-radius: 10px;
    }

    #myBar {
        width: 1%;
        color: transparent;
        height: 20px;
        background-color: #01a9e7;
        border-radius: 10px;
        color: white;
        line-height: 21px;
        font-size: 14px;
    }

    .question-choice { background-color: #EFEFEF;  border-radius: 8px; }
    .question-choices a { color:#000; text-decoration:none; }

    .btnn:hover,
    .question-choice:hover {
        background: #f56032;
        box-shadow: 1px 1px 1px 1px #cbcbcb;
        transition: background 0.2s linear;
    }

    .question-choices {
        float: left;
        width: 100%;
    }
   



    .question {
        float: left;
        width: 100%;
    }

    .result {
        float: left;
        width: 100%;
        margin-top: 20px;
    }

    .question-choice {
        cursor: pointer;
        padding: 10px;
        box-shadow: 0px 4px 1px 1px #cbcbcb;
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
        font-weight: bold;
        font-size: 25px;
        transition: background 0.5s linear;
        transition: box-shadow 0.5s linear;
    }

    .question-choices .clicked {
        color: #0177C1;
        background: #d3e0e4;
        box-shadow: 1px 1px 1px 1px #cbcbcb;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .center {
        text-align: center;
    }

    .date1choice {
        margin-top: 10px;
    }

    .date1choice .times:hover {
        background: #cbcbcb;
    }

    .date1choice span {
        float: left;
        width: 90%;
        cursor: pointer;
    }

    .date1choice .checkboxx {
        width: 10%;
    }

    .bannerbar .langbar {
        float: left;
        width: 100%;
    }

    .banner {
        width: 100%;
    }

    .progress {
        float: left;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 10px;
        background: transparent;
    }

.question-text {
        font-weight: bold;
        font-size: 20px !important;
        color: #fff;
    }

    .question-text { background-color: #3c29f7; padding: 10px 30px; border-radius: 10px; }

    .statement * {
        text-align: left;
    }

    .btnn.getresult,
    .btnn.submit {
        background: #30986a;
        color: white;
    }

   .btnn.submit a { color: #fff;  text-decoration: none;}

    .statement {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .event_detail {
        float: left;
        width: 100%;
    }

    .event_detail,
    .event_detail * {
        float: left;
        width: 100%;
    }

    .event_detail .coll {
        width: 30%;
    }

    .event_detail .roww {
        margin-top: 10px;
    }

    .question-result h1 {
        padding-top: 20px;
    }

    .question-result h1 * {
        font-size: 40px !important;
    }

    .roww .coll.full {
        width: 100%;
    }


    .event_detail .coll.data {
        width: 70%;
    }

    input {
        outline: 0;
        border-width: 0 0 2px;
        border-color: grey;
    }

    input:focus {
        border-color: green
    }

    /*.terms * {
        font-size: 1.5vw !important;
    }

    .logo {
        width: 20%;
    }*/

    .powered {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        font-size: 16px;

    }

    body div {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }

    .block {
        float: left;
        width: 100%;
    }

    .intro {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /*.intro .center {
        margin: 50px;
        line-height: 4vw;
    }*/

    .question-result .reference {
        text-align: left;
        font-size: 22px !important;
        margin-top: 40px;
        /*color: grey;*/
    }

    .startnowbtn {
        color: white;
        background: #20a570;
    }
   

   .title-box h1 { background-color: #467764; padding: 10px; text-align: center; color: #fff; margin-bottom: 0; margin-top: 30px;}
   .form-box h3 { font-size:24px !important; margin-top:30px; color:#138cff; }
   /*.form-box { background-color: #EFEFEF; padding: 30px 15px; }*/
   /*.form-box { background-color: #e6f3fd; padding: 30px 20px; }*/
   .form-box { background-color: #eefff1; padding: 30px 20px; }
   .form-box .title { width: 18%; float: left; padding-top: 8px; }
   .form-box .input-box { width: 100%; }
   /*@media(min-width: 768px) {
       .form-box .title { width: 12%; float: left; padding-top: 8px; }
       .form-box .input-box { width: 100%; float: left; }
    }*/
   .form-box ol li { font-size: 20px !important; padding: 10px 0; }
   /*add shi*/
   .form-box ul li { font-size: 20px !important; padding: 10px 0; }
   .form-box .checkbox label { /*font-size: 20px !important;*/ color: #ff3a3a; }
   .form-box a { color: #000; text-decoration: none; }
   .form-box .btnn { width: 35%; margin:0 auto; margin-top: 30px; border-radius: 20px;}

   .welcome-box .btm a { color:#000; text-decoration:none; }
   .welcome-box .photo { padding:30px 0 0; }
   .welcome-box h3 { text-align:center; margin-top:0;margin-bottom:50px; }
  .add-text { font-size:22px; line-height:24px; }



.end-text ul li { margin:5px 0 ; font-size:22px; }


/*-------------------- add by power 2019.8.14 --------------------------*/
.end-text ul li{
    font-size: 28px !important;
}

.btnn{
    /*width: 94%;*/
    /*margin-left:3%;*/
}

.question_title{
    margin-top: 0px;
}

.form-control{
    height: auto;
}



.form-box .title{
    width: 24%;
}

.form-box .input-box {
    width: 100%;
}

.yzm-input{
    width: 40%;
    display: inline-block;
}

.yzm-logo img{
    width: 26%;
    height: 78px;
    margin-bottom: 22px;
}

#captcha-div-class{
    padding-bottom: 130px;
}