@charset "UTF-8";
@import url("bootstrap.min.css");

/*手機版*/
.Option-size-md {
    cursor: pointer;
    width: 64%;
    height: 8%;
    position: relative;
    right: 18%;
}

.Question-One {
    background-image: url('QuestionImg/App/Q1.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.Option-first-Q1 {
    /*border: 5px solid red;*/
    top: 31%;
}

.Option-second-Q1 {
    /*border: 5px solid blue;*/
    top: 36%;
}

.Option-third-Q1 {
    /*border: 5px solid green;*/
    top: 41%;
}

.Option-fourth-Q1 {
    /*border: 5px solid orange;*/
    top: 46%;
}

.Question-Two {
    background-image: url('QuestionImg/App/Q2.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.Option-first-Q2 {
    /*border: 5px solid red;*/
    top: 31%;
}

.Option-second-Q2 {
    /*border: 5px solid blue;*/
    top: 36%;
}

.Option-third-Q2 {
    /*border: 5px solid green;*/
    top: 41%;
}

.Option-fourth-Q2 {
    /*border: 5px solid orange;*/
    top: 46%;
}

.Question-Three {
    background-image: url('QuestionImg/App/Q3.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.Option-first-Q3 {
    /*border: 5px solid red;*/
    top: 31%;
}

.Option-second-Q3 {
    /*border: 5px solid blue;*/
    top: 36%;
}

.Option-third-Q3 {
    /*border: 5px solid green;*/
    top: 41%;
}

.Option-fourth-Q3 {
    /*border: 5px solid orange;*/
    top: 46%;
}

.Question-Four {
    background-image: url('QuestionImg/App/Q4.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.Option-first-Q4 {
    /*border: 5px solid red;*/
    top: 31%;
}

.Option-second-Q4 {
    /*border: 5px solid blue;*/
    top: 36%;
}

.Option-third-Q4 {
    /*border: 5px solid green;*/
    top: 41%;
}

.Option-fourth-Q4 {
    /*border: 5px solid orange;*/
    top: 46%;
}

.Question-Five {
    background-image: url('QuestionImg/App/Q5.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.Option-first-Q5 {
    /*border: 5px solid red;*/
    top: 31%;
}

.Option-second-Q5 {
    /*border: 5px solid blue;*/
    top: 36%;
}

.Option-third-Q5 {
    /*border: 5px solid green;*/
    top: 41%;
}

.Option-fourth-Q5 {
    /*border: 5px solid orange;*/
    top: 46%;
}

.Question-Six {
    background-image: url('QuestionImg/App/Q6.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.Option-first-Q6 {
    /*border: 5px solid red;*/
    top: 31%;
}

.Option-second-Q6 {
    /*border: 5px solid blue;*/
    top: 36%;
}

.Option-third-Q6 {
    /*border: 5px solid green;*/
    top: 41%;
}

.Option-fourth-Q6 {
    /*border: 5px solid orange;*/
    top: 46%;
}

.Question-Seven {
    background-image: url('QuestionImg/App/Q7.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.Option-first-Q7 {
    /*border: 5px solid red;*/
    top: 31%;
}

.Option-second-Q7 {
    /*border: 5px solid blue;*/
    top: 36%;
}

.Option-third-Q7 {
    /*border: 5px solid green;*/
    top: 41%;
}

.Option-fourth-Q7 {
    /*border: 5px solid orange;*/
    top: 46%;
}

.result-img-1 {
    background-image: url("ResultImg/App/result-img-1.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-2 {
    background-image: url("ResultImg/App/result-img-2.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-3 {
    background-image: url("ResultImg/App/result-img-3.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-4 {
    background-image: url("ResultImg/App/result-img-4.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-5 {
    background-image: url("ResultImg/App/result-img-5.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-6 {
    background-image: url("ResultImg/App/result-img-6.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-7 {
    background-image: url("ResultImg/App/result-img-7.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-8 {
    background-image: url("ResultImg/App/result-img-8.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-9 {
    background-image: url("ResultImg/App/result-img-9.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-10 {
    background-image: url("ResultImg/App/result-img-10.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-11 {
    background-image: url("ResultImg/App/result-img-11.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-12 {
    background-image: url("ResultImg/App/result-img-12.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-13 {
    background-image: url("ResultImg/App/result-img-13.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-14 {
    background-image: url("ResultImg/App/result-img-14.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-15 {
    background-image: url("ResultImg/App/result-img-15.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-16 {
    background-image: url("ResultImg/App/result-img-16.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-17 {
    background-image: url("ResultImg/App/result-img-17.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-18 {
    background-image: url("ResultImg/App/result-img-18.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-19 {
    background-image: url("ResultImg/App/result-img-19.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-20 {
    background-image: url("ResultImg/App/result-img-20.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.result-img-21 {
    background-image: url("ResultImg/App/result-img-21.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.Close-btn {
    /*border: 5px solid orange;*/
    cursor: pointer;
    width: 38%;
    height: 7%;
    position: relative;
    left: 31%;
    top: 80%;
}

.Basic-btn {
    /*border: 5px solid green;*/
    cursor: pointer;
    width: 66%;
    height: 8%;
    position: relative;
    left: 17%;
    top: 79%;
}

/*電腦版*/
@media (min-width: 896px) {
    .Option-size-md {
        width: 30%;
        height: 10%;
        position: relative;
        right: 13%;
    }
    
    .Question-One {
        background-image: url('QuestionImg/Web/Q1.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .Option-first-Q1 {
       /* border: 5px solid red;*/
        top: 14%;
    }

    .Option-second-Q1 {
        /*border: 5px solid blue;*/
        top: 23%;
    }

    .Option-third-Q1 {
        /*border: 5px solid green;*/
        top: 33%;
    }

    .Option-fourth-Q1 {
       /* border: 5px solid orange;*/
        top: 42%;
    }

    .Question-Two {
        background-image: url('QuestionImg/Web/Q2.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .Option-first-Q2 {
        /*border: 5px solid red;*/
        top: 14%;
    }

    .Option-second-Q2 {
        /*border: 5px solid blue;*/
        top: 23%;
    }

    .Option-third-Q2 {
        /*border: 5px solid green;*/
        top: 33%;
    }

    .Option-fourth-Q2 {
        /*border: 5px solid orange;*/
        top: 42%;
    }

    .Question-Three {
        background-image: url('QuestionImg/Web/Q3.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .Option-first-Q3 {
        /*border: 5px solid red;*/
        top: 14%;
    }

    .Option-second-Q3 {
        /*border: 5px solid blue;*/
        top: 23%;
    }

    .Option-third-Q3 {
        /*border: 5px solid green;*/
        top: 33%;
    }

    .Option-fourth-Q3 {
        /*border: 5px solid orange;*/
        top: 42%;
    }

    .Question-Four {
        background-image: url('QuestionImg/Web/Q4.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .Option-first-Q4 {
       /* border: 5px solid red;*/
        top: 14%;
    }

    .Option-second-Q4 {
        /*border: 5px solid blue;*/
        top: 23%;
    }

    .Option-third-Q4 {
       /*border: 5px solid green;*/
        top: 33%;
    }

    .Option-fourth-Q4 {
        /*border: 5px solid orange;*/
        top: 42%;
    }

    .Question-Five {
        background-image: url('QuestionImg/Web/Q5.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .Option-first-Q5 {
        /*border: 5px solid red;*/
        top: 14%;
    }

    .Option-second-Q5 {
        /*border: 5px solid blue;*/
        top: 23%;
    }

    .Option-third-Q5 {
        /*border: 5px solid green;*/
        top: 33%;
    }

    .Option-fourth-Q5 {
        /*border: 5px solid orange;*/
        top: 42%;
    }

    .Question-Six {
        background-image: url('QuestionImg/Web/Q6.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .Option-first-Q6 {
        /*border: 5px solid red;*/
        top: 14%;
    }

    .Option-second-Q6 {
        /*border: 5px solid blue;*/
        top: 23%;
    }

    .Option-third-Q6 {
        /*border: 5px solid green;*/
        top: 33%;
    }

    .Option-fourth-Q6 {
        /*border: 5px solid orange;*/
        top: 42%;
    }

    .Question-Seven {
        background-image: url('QuestionImg/Web/Q7.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .Option-first-Q7 {
        /*border: 5px solid red;*/
        top: 14%;
    }

    .Option-second-Q7 {
        /*border: 5px solid blue;*/
        top: 23%;
    }

    .Option-third-Q7 {
        /*border: 5px solid green;*/
        top: 33%;
    }

    .Option-fourth-Q7 {
        /*border: 5px solid orange;*/
        top: 42%;
    }

    .result-img-1 {
        background-image: url("ResultImg/Web/result-img-1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-2 {
        background-image: url("ResultImg/Web/result-img-2.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-3 {
        background-image: url("ResultImg/Web/result-img-3.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-4 {
        background-image: url("ResultImg/Web/result-img-4.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-5 {
        background-image: url("ResultImg/Web/result-img-5.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-6 {
        background-image: url("ResultImg/Web/result-img-6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-7 {
        background-image: url("ResultImg/Web/result-img-7.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-8 {
        background-image: url("ResultImg/Web/result-img-8.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-9 {
        background-image: url("ResultImg/Web/result-img-9.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-10 {
        background-image: url("ResultImg/Web/result-img-10.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-11 {
        background-image: url("ResultImg/Web/result-img-11.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-12 {
        background-image: url("ResultImg/Web/result-img-12.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-13 {
        background-image: url("ResultImg/Web/result-img-13.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-14 {
        background-image: url("ResultImg/Web/result-img-14.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-15 {
        background-image: url("ResultImg/Web/result-img-15.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-16 {
        background-image: url("ResultImg/Web/result-img-16.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-17 {
        background-image: url("ResultImg/Web/result-img-17.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-18 {
        background-image: url("ResultImg/Web/result-img-18.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-19 {
        background-image: url("ResultImg/Web/result-img-19.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-20 {
        background-image: url("ResultImg/Web/result-img-20.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .result-img-21 {
        background-image: url("ResultImg/Web/result-img-21.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    .Close-btn {
       /* border: 5px solid blue;*/
        cursor: pointer;
        width: 4%;
        height: 7%;
        position: relative;
        left: 94%;
        top: 3%;
    }

    .Basic-btn {
        display:none;
    }

    .Official-btn {
        /*border: 5px solid blue;*/
        cursor: pointer;
        width: 30%;
        height: 11%;
        position: relative;
        left: 35%;
        top: 73%;
    }
}