html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: "微軟正黑體"
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

#personal-container {
    height: 100vh;
    width: 100vw;
    background-image: url("../img/personal/background.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-weight: 550;
    font-size: 1.5em
}

#personal-container .personal {
    padding-bottom: 2vh;
    margin-top: 24vh
}

#personal-container .personal .information {
    display: flex;
    flex-direction: column
}

#personal-container .personal .information .question {
    margin-bottom: .5em;
    margin-bottom: 2vh
}

#personal-container .personal .information label {
    display: flex;
    align-items: center
}

#personal-container .personal .information label input[type=radio] {
    width: .5em;
    height: .5em;
    margin-right: .1em
}

#personal-container .personal .information label input {
    margin: auto auto auto .4em;
    flex-grow: 1;
    font-size: 1em;
    height: 1.7em;
    border-radius: 10px;
    border-style: solid;
    border-width: .01em;
    border-color: #9ecad6
}

#personal-container .personal .btn {
    display: flex;
    justify-content: center;
    margin-top: 3.5vh
}

#personal-container .personal .btn input[type=image] {
    width: 9vw
}

#consent-container {
    width: 100vw;
    height: 100vh;
    background-image: url("../img/consent/background.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    caret-color: rgba(0, 0, 0, 0)
}

#consent-container .content-container {
    width: 35%;
    height: 70%;
    margin: auto;
    margin-top: 20vh
}

#consent-container .content-container .content {
    width: 100%;
    height: 85%;
    background-color: #e6f7fc;
    border-style: solid;
    border-width: .05em;
    border-radius: 2em;
    border-color: #276778;
    padding: 2em;
    box-sizing: border-box
}

#consent-container .content-container .content .word {
    max-height: 100%;
    overflow-y: scroll;
    display: block;
    line-height: 1.5em;
    padding-right: 1em
}

#consent-container .content-container .content .word ol {
    padding: revert;
    list-style-type: disc
}

#consent-container .content-container .content .word::-webkit-scrollbar {
    background-color: #fff;
    border-radius: .5em;
    width: 1.5em
}

#consent-container .content-container .content .word::-webkit-scrollbar-thumb {
    background-color: #8bbdc6
}

#consent-container .form-container {
    margin-top: .6em;
    font-size: 1.4em;
    height: 25%
}

#consent-container .form-container form {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#consent-container .form-container form span {
    color: #276778;
    font-weight: bold;
    margin-left: .5em;
    letter-spacing: 1.5px
}

#consent-container .form-container .btn input[type=image] {
    width: 10vw;
    margin-top: 1.4em
}

.round {
    position: relative
}

.round label {
    background-color: #fff;
    border: 1px solid #276778;
    border-radius: 50%;
    cursor: pointer;
    height: 1em;
    left: 0;
    position: absolute;
    top: 0;
    width: 1em
}

.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 4px;
    left: 4px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 12px
}

.round input[type=checkbox] {
    visibility: hidden
}

.round input[type=checkbox]:checked+label {
    background-color: #276778;
    border-color: #276778
}

.round input[type=checkbox]:checked+label:after {
    opacity: 1
}

.pre-container {
    height: 100vh;
    width: 100vw;
    background-size: 100% 100%
}

.pre-container.pre_1-5 {
    background-image: url(../img/pre-test/pre-test01/background.png)
}

.pre-container.pre_6-10 {
    background-image: url(../img/pre-test/pre-test02/background.png)
}

.pre-container.post_1-5 {
    background-image: url(../img/post-test/post-test01/background.png)
}

.pre-container.post_6-10 {
    background-image: url(../img/post-test/post-test02/background.png)
}

.pre-container form {
    position: relative;
    width: 85%;
    display: flex
}

.pre-container .btn {
    position: absolute;
    left: 95%;
    bottom: 2%;
    box-sizing: border-box
}

.pre-container .btn input[type=image] {
    width: 14vw
}

.pre-container .test-container {
    font-size: 1.4em;
    color: #182831;
    font-weight: 550;
    max-width: 85%;
    margin: 18vh auto 0 auto;
    padding-bottom: 1em
}

.pre-container .test-container .que {
    margin-top: 1em
}

.pre-container .test-container .que .Q3 {
    margin-left: .9em
}

.pre-container .test-container .que input[type=radio] {
    width: 1.5em;
    height: 1.5em;
    margin-right: .5em
}

.pre-container .test-container label {
    display: inline-block;
    margin-left: .8em;
    margin-top: .5em
}

.pre-container .test-container span {
    display: block;
    margin-bottom: .4em
}

#post-container {
    height: 100vh;
    width: 100vw;
    background-image: url(../img/post-test/post-test04/background.png);
    background-size: 100% 100%;
    caret-color: rgba(0, 0, 0, 0);
    position: relative
}

#post-container form {
    min-height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative
}

#post-container form .test-container {
    color: #182831;
    font-weight: 550;
    max-width: 100%;
    padding: 14vh 3em 0 3em;
    box-sizing: border-box;
    margin-bottom: 2em
}

#post-container form .test-container .title {
    font-size: 1.4em
}

#post-container form .test-container th {
    font-size: 1.2em;
    padding-left: 2em
}

#post-container form .test-container td {
    font-size: 1.2em;
    padding-top: .5em
}

#post-container form .test-container input[type=radio] {
    height: 2em;
    width: 2em;
    margin-left: 5.3em
}

#post-container form .test-container .que {
    font-size: 1.2em
}

#post-container form .test-container .que2 {
    padding-bottom: 1em
}

#post-container form .test-container .que3 {
    padding-bottom: .3em
}

#post-container form .btn {
    position: absolute;
    right: 4em;
    bottom: 2em;
    box-sizing: border-box
}

#post-container form .btn input[type=image] {
    width: 14vw
}

#post-test6-container {
    height: 100vh;
    width: 100vw;
    background-image: url(../img/post-test/post-test06/background.png);
    background-size: 100% 100%;
    caret-color: rgba(0, 0, 0, 0);
    position: relative
}

#post-test6-container .form-container {
    width: 70%;
    height: 80%;
    padding-top: 27vh;
    box-sizing: border-box
}

#post-test6-container .form-container form {
    font-size: 1.4vw;
    color: #182831;
    font-weight: 550;
    margin-left: 14vw;
    padding-bottom: 1em
}

#post-test6-container .form-container form p {
    margin-bottom: 1em
}

#post-test6-container .form-container form .Que {
    margin-bottom: 1em
}

#post-test6-container .form-container form label {
    display: flex;
    align-items: center
}

#post-test6-container .form-container form label input {
    margin: auto auto auto .5em;
    flex-grow: 1;
    font-size: 1em;
    height: 1.8em;
    border-radius: 10px;
    border-style: solid;
    border-width: .01em;
    border-color: #276778;
    background-color: #e6f7fc
}

#post-test6-container .form-container form label.Q3 {
    display: flex;
    align-items: flex-start
}

#post-test6-container .form-container form label textarea {
    margin: auto auto auto .5em;
    flex-grow: 1;
    font-size: 1em;
    border-radius: 10px;
    border-style: solid;
    border-width: .01em;
    border-color: #276778;
    background-color: #e6f7fc
}

#post-test6-container .form-container .btn {
    position: absolute;
    right: 3em;
    bottom: 1.5em;
    box-sizing: border-box
}

#post-test6-container .form-container .btn input[type=image] {
    width: 14vw
}

#game1_start-container {
    height: 100vh;
    width: 100vw;
    background-image: url("../img/game1/start/background.png");
    background-size: 100% 100%;
    position: fixed;
    z-index: 999
}

#game1_start-container .btn {
    width: 24vw;
    position: fixed;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 21%;
    cursor: pointer
}

#game1_start-container .btn:active {
    width: 22vw
}

#game1_start-container .btn:hover {
    -webkit-filter: brightness(0.9)
}

#game1-container {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    overflow-y: hidden;
    caret-color: rgba(0, 0, 0, 0)
}

#game1-container::-webkit-scrollbar {
    display: none
}

#game1-container .game-bg {
    width: 1920px;
    height: 900px;
    background-image: url("../img/game1/game/background.png");
    background-repeat: no-repeat;
    position: relative;
    background-size: 100% 100%;
    transform-origin: 0 0
}

#game1-container .game-bg img {
    position: absolute
}

#game1-container .game-bg .wrong {
    cursor: pointer;
    transition: filter .3s
}

@-webkit-keyframes highlight {
    0% {
        filter: drop-shadow(1px 1px 20px rgb(255, 73, 73))
    }

    50% {
        filter: drop-shadow(12px 12px 5px rgba(255, 255, 0, 0.1))
    }

    100% {
        filter: drop-shadow(1px 1px 20px rgb(255, 73, 73))
    }
}

@keyframes highlight {
    0% {
        filter: drop-shadow(1px 1px 20px rgb(255, 73, 73))
    }

    50% {
        filter: drop-shadow(12px 12px 5px rgba(255, 255, 0, 0.1))
    }

    100% {
        filter: drop-shadow(1px 1px 20px rgb(255, 73, 73))
    }
}

#game1-container .game-bg .highlight {
    -webkit-animation-name: highlight;
    animation-name: highlight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7))
}

#game1-container .game-bg .shoe {
    left: 480px;
    top: 420px
}

#game1-container .game-bg .hint-shoe {
    left: 560px;
    top: 355px
}

#game1-container .game-bg .name1 {
    left: 25px;
    top: 235px
}

#game1-container .game-bg .name2 {
    left: 660px;
    top: 365px
}

#game1-container .game-bg .hint-name {
    left: 820px;
    top: 430px
}

#game1-container .game-bg .name3 {
    left: 1280px;
    top: 440px
}

#game1-container .game-bg .cabinet1 {
    left: 1480px;
    top: 140px
}

#game1-container .game-bg .hint-cabinet {
    left: 1700px;
    top: 50px
}

#game1-container .game-bg .cabinet2 {
    left: 1600px;
    top: 685px
}

#game1-container .game-bg .faucet {
    left: 1105px;
    top: 345px
}

#game1-container .game-bg .pot {
    left: 1245px;
    top: 260px
}

#game1-container .game-bg .hint-pot {
    left: 1430px;
    top: 300px
}

#game1-container .game-bg .phone {
    left: 1040px;
    top: 680px
}

#game1-container .game-bg .hint-phone {
    left: 1135px;
    top: 630px
}

#game1-container .game-bg .time {
    left: 470px;
    top: 270px
}

#game1-container .game-bg .grandma {
    left: 1020px;
    top: 495px
}

#game1-container .game-bg .hint-grandma {
    left: 1130px;
    top: 440px
}

#game1-container .game-bg .date {
    left: 450px;
    top: 120px
}

#game1-container .game-bg .hint-time {
    left: 580px;
    top: 200px
}

#game1-container .game-bg .hint {
    display: none
}

#game2_start-container {
    height: 100vh;
    width: 100vw;
    background-image: url("../img/game2/start/background.jpg");
    background-size: 100% 100%;
    position: fixed;
    z-index: 1000
}

#game2_start-container .btn {
    width: 23vw;
    position: fixed;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 24%;
    cursor: pointer
}

#game2_start-container .btn:active {
    width: 21vw
}

#game2_start-container .btn:hover {
    -webkit-filter: brightness(0.9)
}

#game2-container {
    overflow-y: hidden;
    transition: filter .5s
}

#game2-container::-webkit-scrollbar {
    display: none
}

#game2-container .ProgressBar-Container {
    width: 100vw;
    height: 15vh;
    background-color: rgba(255, 255, 255, .8);
    position: fixed;
    z-index: 899;
    left: 0;
    top: 0;
    border-radius: 0px 0px 0px 92px/0px 0px 0px 70px;
    display: flex;
    box-sizing: border-box
}

#game2-container .ProgressBar-Container .left-container {
    width: 80%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

#game2-container .ProgressBar-Container .left-container .score {
    font-size: 1.6vw;
    color: #308aa2;
    font-weight: 600;
    align-self: flex-end;
    letter-spacing: .2em;
    margin-right: 17%;
    margin-top: .5%
}

#game2-container .ProgressBar-Container .left-container .ProgressBg {
    width: 68%;
    height: 40%;
    background-color: #fff;
    border: #e6b34a 5px solid;
    border-radius: 6% 6% 6% 6%/100% 100% 100% 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

#game2-container .ProgressBar-Container .left-container .ProgressBg div {
    width: 9.2%;
    height: 65%;
    margin: .3%;
    background-color: #a6d1d9
}

#game2-container .ProgressBar-Container .left-container .ProgressBg div:first-child {
    border-radius: 40% 0% 0% 40%/100% 0% 0% 100%
}

#game2-container .ProgressBar-Container .left-container .ProgressBg div:last-child {
    border-radius: 0% 40% 40% 0%/0% 100% 100% 0%
}

#game2-container .ProgressBar-Container .left-container .ProgressBg div.done {
    background-color: #308aa2
}

#game2-container .ProgressBar-Container .time-container {
    flex-grow: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center
}

#game2-container .ProgressBar-Container .time-container .left,
#game2-container .ProgressBar-Container .time-container .right {
    width: 23%;
    border: #e6b34a 5px solid;
    border-radius: .8em;
    margin: .8em .5em;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center
}

#game2-container .ProgressBar-Container .time-container .left span,
#game2-container .ProgressBar-Container .time-container .right span {
    font-size: 5vw;
    font-weight: 500;
    color: #308aa2;
    font-family: "impact"
}

#game2-container .game-bg {
    width: 6900px;
    height: 900px;
    background-image: url("../img/game2/game/background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow-y: hidden;
    caret-color: rgba(0, 0, 0, 0)
}

#game2-container .game-bg .left,
#game2-container .game-bg .right {
    width: 2vw;
    height: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    padding: 0 1.5em
}

#game2-container .game-bg .left.right,
#game2-container .game-bg .right.right {
    right: 0
}

#game2-container .game-bg .left.left img,
#game2-container .game-bg .right.left img {
    transform: rotateY(180deg)
}

#game2-container .game-bg .left img,
#game2-container .game-bg .right img {
    width: 100%;
    filter: drop-shadow(1px 1px 8px rgba(0, 0, 0, 0.7))
}

#game2-container .game-bg .wrong,
#game2-container .game-bg .correct {
    cursor: pointer
}

#game2-container .game-bg .window {
    position: absolute;
    top: 40px;
    left: 770px
}

#game2-container .game-bg .fan {
    position: absolute;
    top: 540px;
    left: 1215px
}

#game2-container .game-bg .phone {
    position: absolute;
    top: 360px;
    left: 2685px
}

#game2-container .game-bg .tv {
    position: absolute;
    top: 260px;
    left: 3715px
}

#game2-container .game-bg .refrigerator {
    position: absolute;
    top: 150px;
    left: 4800px
}

#game2-container .game-bg .faucet {
    position: absolute;
    top: 205px;
    left: 5350px
}

#game2-container .game-bg .pot {
    position: absolute;
    top: 215px;
    left: 5785px
}

#game2-container .game-bg .umbrella {
    position: absolute;
    top: 313px;
    left: 210px
}

#game2-container .game-bg .key {
    position: absolute;
    top: 294.5px;
    left: 39.5px;
    z-index: 999
}

#game2-container .game-bg .black_bag {
    position: absolute;
    top: 419px;
    left: 1897px
}

#game2-container .game-bg .red_bag {
    position: absolute;
    top: 480px;
    left: 1500px
}

#game2-container .game-bg .sofa {
    position: absolute;
    top: 371px;
    left: 1430px
}

#game2-container .game-bg .blanket {
    position: absolute;
    top: 570px;
    left: 1590px
}

#game2-container .game-bg .pillow {
    position: absolute;
    top: 540px;
    left: 1860px
}

#game2-container .game-bg .light {
    position: absolute;
    top: 0;
    left: 3610px
}

#game2-container .game-bg .bucket {
    position: absolute;
    top: 560px;
    left: 4640px
}

#game2-container .game-bg .can {
    position: absolute;
    top: 500px;
    left: 5160px
}

#game2-container .game-bg .clock {
    position: absolute;
    top: 25px;
    left: 6400px
}

#game2-container .game-bg .coffee {
    position: absolute;
    top: 468px;
    left: 6700px
}

#game2-container .game-bg .kettle {
    position: absolute;
    top: 262px;
    left: 6095px
}

#game2-container .game-bg .Weigh {
    position: absolute;
    top: 255px;
    left: 6225px
}

#game2-container .game-bg .laundry {
    position: absolute;
    top: 650px;
    left: 3600px
}

.game2-fail-container {
    width: 50%;
    height: 70%;
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999
}

.game2-fail-container .bg {
    width: 100%;
    height: 100%;
    background-image: url(../img/game2/fail/background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.game2-fail-container .bg .btn-container {
    width: 70%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5%
}

.game2-fail-container .bg .btn-container .finish {
    margin-left: 6%;
    margin-top: 13%
}

.game2-fail-container .bg .btn-container .restart {
    margin-right: 8%;
    margin-top: 13%
}

.game2-fail-container .bg .btn-container .btn {
    width: 15vw
}

.game2-fail-container .bg .btn-container .btn:hover {
    -webkit-filter: brightness(0.9)
}

#game3_start-container {
    width: 100vw;
    height: 100vh;
    background-image: url(../img/game3/start/background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: fixed;
    z-index: 999
}

#game3_start-container .content {
    width: 85%;
    height: 55%;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    align-items: center
}

#game3_start-container .content .description {
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center
}

#game3_start-container .content .description .description-content {
    width: 55%;
    height: 100%
}

#game3_start-container .content .description .description-content img {
    width: 100%
}

#game3_start-container .content .description .description-animation {
    height: 85%;
    width: 24%;
    margin-left: 2em;
    background-image: url(../img/game3/start/123.gif);
    background-repeat: no-repeat;
    background-size: contain
}

#game3_start-container .content .btn {
    width: 21vw;
    cursor: pointer
}

#game3_start-container .content .btn:active {
    width: 19vw
}

#game3_start-container .content .btn:hover {
    -webkit-filter: brightness(0.9)
}

#game3-container {
    width: 100vw;
    height: 100vh;
    background-image: url("../img/game3/game/background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    position: absolute;
    caret-color: rgba(0, 0, 0, 0)
}

#game3-container::-webkit-scrollbar {
    display: none
}

#game3-container .level-info {
    height: 10vmin;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 2em
}

#game3-container .level-info img {
    height: 100%;
    -o-object-fit: fill;
    object-fit: fill
}

#game3-container .content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 2% 2%
}

#game3-container .content .left,
#game3-container .content .right {
    display: flex;
    flex-direction: column;
    width: 18%;
    z-index: 2;
    box-sizing: border-box
}

#game3-container .content .left .explain,
#game3-container .content .right .explain {
    width: 130%
}

#game3-container .content .left .explain1,
#game3-container .content .right .explain1 {
    width: 90%;
    margin-left: 20%
}

#game3-container .content .left .btn,
#game3-container .content .right .btn {
    position: absolute;
    width: 8%;
    margin-left: 7%;
    margin-top: 4.5%
}

#game3-container .content .game-bg {
    width: 55%;
    height: 100%;
    background-color: rgba(242, 237, 223, .85);
    border-radius: 5em;
    box-sizing: border-box;
    padding: 1%;
    display: flex;
    justify-content: center
}

#game3-container .content .game-bg .item-container {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box
}

#game3-container .content .game-bg .item-container img {
    -o-object-fit: scale-down;
    object-fit: scale-down;
    width: 20%;
    margin: 2%;
    box-sizing: border-box
}

.game3-fail-container {
    width: 55%;
    height: 70%;
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 18%;
    display: none
}

.game3-fail-container .bg {
    width: 100%;
    height: 100%;
    background-image: url(../img/game3/fail/background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.game3-fail-container .bg .btn-container {
    width: 70%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5%
}

.game3-fail-container .bg .btn-container .finish {
    width: 12vw;
    margin-left: 6%
}

.game3-fail-container .bg .btn-container .restart {
    width: 12vw;
    margin-right: 10%
}

.game3-fail-container .bg .btn-container img {
    width: 15vw
}

.game3-fail-container .bg .btn-container img:hover {
    -webkit-filter: brightness(0.9)
}

#game4_start-container {
    height: 100vh;
    width: 100vw;
    background-image: url("../img/game4/start/background.jpg");
    background-size: 100% 100%
}

#game4_start-container .btn {
    width: 27vw;
    position: fixed;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 14%
}

#game4_start-container .btn:active {
    width: 25vw
}

#game4_start-container .btn:hover {
    -webkit-filter: brightness(0.9)
}

.game4_video-container {
    height: 100vh;
    width: 100vw;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden
}

.game4_video-container.level1 {
    background-image: url("../img/game4/video/level1/background.png")
}

.game4_video-container.level2 {
    background-image: url("../img/game4/video/level2/background.png")
}

.game4_video-container.level3 {
    background-image: url("../img/game4/video/level3/background.png")
}

.game4_video-container .video {
    width: 71%;
    height: 82%;
    position: absolute;
    left: 14vw;
    top: 5vh
}

.game4_video-container .video iframe {
    width: 100%;
    height: 100%;
    border-radius: 2em
}

.game4_video-container .btn {
    height: 17%;
    left: 55%;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    display: flex;
    justify-content: center;
    box-sizing: border-box
}

.game4_game-container {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row-reverse;
    caret-color: rgba(0, 0, 0, 0)
}

.game4_game-container.level1 {
    background-image: url(../img/game4/game/level1/background.png)
}

.game4_game-container.level2 {
    background-image: url(../img/game4/game/level2/background.png)
}

.game4_game-container.level3 {
    background-image: url(../img/game4/game/level3/background.png)
}

.game4_game-container .right-container {
    width: 57.5%;
    height: 81%;
    position: absolute;
    left: 9.5vw;
    top: 15.3vh
}

.game4_game-container .right-container iframe {
    width: 100%;
    height: 85%;
    border-radius: 2em
}

.game4_game-container .right-container .btn {
    width: 14vw;
    position: fixed;
    left: 43vw;
    top: 65.5vh;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    display: flex;
    justify-content: center;
    box-sizing: border-box
}

.game4_game-container .left-container {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.8vw;
    font-weight: 550
}

.game4_game-container .left-container .title {
    color: #fff;
    letter-spacing: 5px
}

.game4_game-container .left-container .ans-container {
    width: 70%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, .6);
    padding: 4% 8%;
    margin-top: 2%;
    border-radius: .5em
}

.game4_game-container .left-container .ans-container .ans {
    width: 90%;
    height: 100%;
    font-size: 85%;
    background-color: #fff;
    margin: 3% 0;
    padding: .5em;
    border-radius: 50em;
    display: flex;
    align-items: center;
    justify-content: center
}

.end-container {
    height: 100vh;
    width: 100vw;
    background-size: 100% 100%
}

.end-container.success {
    background-image: url("../img/end/success_background.jpg")
}

.end-container.fail {
    background-image: url("../img/end/fail_background.png")
}

.end-container .top {
    width: 30%;
    height: 15%;
    display: flex;
    flex-direction: row;
    position: fixed;
    left: 70vw;
    top: 15vh
}

.end-container .bottom {
    width: 30%;
    height: 15%;
    display: flex;
    flex-direction: row;
    position: fixed;
    left: 70vw;
    top: 35vh
}

.end-container .btn {
    width: 35vw;
    position: fixed;
    right: 8%;
    bottom: 9%
}

.end-container .btn:hover {
    -webkit-filter: brightness(0.9)
}

#contents-container {
    width: 100vw;
    height: 100vh;
    background-image: url(../img/contents/background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    caret-color: rgba(0, 0, 0, 0)
}

#contents-container .content-wrap {
    width: 30%;
    height: 70%;
    display: flex;
    flex-direction: row;
    margin-bottom: 4em
}

#contents-container .content-wrap .left {
    width: 70%;
    height: 100%
}

#contents-container .content-wrap .left .level {
    width: 100%;
    height: 16.6%;
    display: flex;
    justify-content: center;
    align-items: center
}

#contents-container .content-wrap .left .level .test {
    margin-right: -24%;
    width: 22vw
}

#contents-container .content-wrap .left .level .test1 {
    width: 26vw;
    margin-right: -2em;
    margin-top: 3em
}

#contents-container .content-wrap .left .level .title {
    width: 26vw
}

#contents-container .content-wrap .right {
    width: 30%;
    height: 70%
}

#contents-container .content-wrap .right .btn-container {
    width: 100%;
    height: 24%;
    display: flex;
    align-items: center;
    justify-content: center
}

#contents-container .content-wrap .right img {
    width: 5vw
}

#contents-container .content-wrap .right .circle {
    width: 3%;
    position: fixed;
    left: 90%;
    padding-bottom: .5em
}

#contents-container .content-wrap .right .btn {
    position: fixed;
    left: 88%
}

#contents-container .content-wrap .right .btn img {
    width: 6vw
}

#incomplete-container {
    width: 100vw;
    height: 100vh;
    background-image: url("../img/incomplete/background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

#incomplete-container .text {
    width: 35%;
    height: 20%;
    margin-left: 1.8em;
    position: fixed;
    top: 16vh;
    line-height: 2em;
    font-size: 2.6vw;
    font-family: "Microsoft JhengHei";
    font-weight: 900;
    color: #fff
}

#incomplete-container .btn {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    position: fixed;
    top: 40vh;
    margin-left: 1.8em
}

#incomplete-container .btn input {
    width: 16vw
}

#incomplete-container .btn input:hover {
    -webkit-filter: brightness(0.9)
}

.point-container {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0
}

.point-container .point-bg {
    width: 100%;
    height: 100%;
    background-image: url("../img/game1/point/background.png");
    background-repeat: no-repeat;
    z-index: 101;
    background-size: contain;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.point-container .point-bg .btn {
    width: 15%;
    z-index: 102;
    margin-left: 70%;
    margin-top: 32%
}

.back-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 103;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.back-container .back-bg {
    width: 30%;
    height: 28%;
    background-image: url("../img/back/background4.png");
    background-repeat: no-repeat;
    z-index: 104;
    background-size: contain;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.back-container .back-bg .btn {
    width: 18%;
    z-index: 105;
    position: absolute;
    top: 72%;
    left: 30%
}

.hint-container {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.hint-container .hint-bg {
    width: 40%;
    height: 40%;
    background-image: url("../img/hint/background.png");
    background-repeat: no-repeat;
    z-index: 101;
    background-size: contain;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.hint-container .hint-bg .btn {
    width: 22%;
    z-index: 102;
    margin-top: 20%
}

.game2-hint-container {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.game2-hint-container .game2-hint-bg {
    width: 40%;
    height: 40%;
    background-image: url("../img/game2/hint/background.png");
    background-repeat: no-repeat;
    z-index: 101;
    background-size: contain;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.game2-hint-container .game2-hint-bg .btn {
    width: 22%;
    z-index: 102;
    margin-top: 10%
}

#main-container {
    height: 100vh;
    width: 100vw;
    background-image: url("../img/main/main_background.png");
    background-size: 100% 100%
}

#main-container .btn {
    width: 30vw;
    position: fixed;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 1em
}

#main-container .btn:active {
    width: 28vw
}

#main-container .btn:hover {
    -webkit-filter: brightness(0.9)
}

.text-green {
    color: #276778
}

.text-lightgreen {
    color: #59a4b9;
    margin-top: .5em
}

/*# sourceMappingURL=main.css.map */