body {
  padding: 15px;
  font-size: 12px;
  background: #253746;
}

.question-text {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

a { text-decoration: none!important; }

#app {
    margin: 10%;
    margin-top: 2%;
    background: white;
    padding: 20px;
    float: left;
    width: 80%;
    box-shadow: 12px 15px 8px 5px #00000087;
}

#app * {
    font-size: 1.8vw;
}

#app h5, .btnn {
    font-size: 5.2vw!important;
}

@media(min-width:768px){
    #app h5, .btnn {
        font-size: 2.2vw!important;
    }
}

@media only screen and (max-width: 600px) and (min-width: 200px) {
    #app {
        margin: 0%;
        width: 100%;
    }
    #app * {
        font-size: 4.5vw;
    }
    #app h5 {
        font-size: 4.5vw;
        line-height: 6vw;
    }
    #app .terms * {
        font-size: 3vw !important;
    }
    .logo {
        width: 30%;
    }
    .mobile-only {
        display: block !important;
    }
    .desktop-only {
        display: none !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 #f1f1f1;
    cursor: pointer;
    width: 90%;
    margin-left: 5%;
    border-radius: 0px;
    text-align: center;
    font-size: 1.5em;
    transition: background 0.2s linear;
    transition: box-shadow 0.2s linear;
    background-color: #66cbe8;
}

.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: #f1f1f1;  border-radius: 8px; }
.question-choices a { color:#000; text-decoration:none; }

.btnn:hover,
.question-choice:hover {
    background: #d3e0e4;
    box-shadow: 1px 1px 1px 1px #cbcbcb;
}

.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: #253746;
    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;
    }
@media(min-width: 768px) {
    .question-text {
        font-weight: bold;
        /*font-size: 32px !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: 18px !important;

    }

    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: 16px !important;
        margin-top: 40px;
        /*color: grey;*/
    }

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

   .title-box h2 { background-color: #17354a; 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: #f1f1f1; padding: 30px 15px; }
   .form-box .title { width: 18%; float: left; padding-top: 8px; }
   .form-box .input-box { width: 82%; float: left; }
   @media(min-width: 768px) {
   .form-box .title { width: 12%; float: left; padding-top: 8px; }
   .form-box .input-box { width: 88%; 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: 100%; margin-left: 0; 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:18px !important; line-height:24px; }
 @media(min-width: 768px) {
   .add-text { font-size:24px !important; line-height:28px; }
}


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


/*-------------------- 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;
}

@media (min-width: 768px){
    .form-box .title {
        width: 15%;
    }
    .form-box .input-box {
        width: 85%;
    }
}

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

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

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

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

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

@media only screen and (max-width: 600px) and (min-width: 200px) {
    .yzm-logo img{
        width: 45%;
        height: 35px;
        margin-bottom: 6px;
    }

    #captcha-div-class{
        padding-bottom: 60px;
    }
    #app .startnowbtn, #app .btn-end {
        width: 65% !important;
        /* margin: 0 auto !important; */
    }

}

@media (min-width: 768px){
    .add-text {
        font-size: 20px !important;
        line-height: 28px;
    }
}

/*.glaucoma-time{*/
    /*margin-bottom: 40px;*/
/*}*/

/*.glaucoma-time p{*/
    /*font-size: 30px;*/
/*}*/

/*.glaucoma-time p input{*/
    /*height:44px;*/
    /*vertical-align:text-top;*/
    /*margin-top:0;*/
/*}*/



/*.question_title { display:none; }*/

@media(max-width:768px){
    #nickname, #input-email { width:63%; }
}


.logo-box img { max-width:100%; }

@media(min-width:1024px){
    .text-2 { font-size:22px!important; }
    .logo-box img { max-width:62%; }
}


 i {
    font-size: inherit !important;
}

p span{
    font-size: inherit !important;
    font-weight:bolder;
}