@charset "utf-8";

/* 測驗 ====================================================================== */
#Content_Box {
    position: absolute;
    height: 80%;
    width: 90%;
    left: 5%;
    top: 14%;
}

.PageBox,
.QuizBox,
.QuizEndLevel,
.QuizEndTable {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.QuizBox,
.QuizEndLevel,
.QuizEndTable {
    display: none;
}

/* 作答說明頁 */
.PageBox {
    background-color: #fff;
    border: 10px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 6px #666;
    text-align: center;
}

.PageBox:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f1eee7;
}

.PageBox-Title {
    position: relative;
    font-size: 1.5em;
    font-weight: bold;
    color: #e5004f;
}

.PageBox-Title:after {
    content: "";
    position: relative;
    width: 90%;
    height: 10px;
    top: 0;
    left: 5%;
    background-color: #d4c791;
    display: block;
    margin-top: 20px;
}

.PageBox-QuizIntroduce {
    position: relative;
    margin: 20px 0;
    padding: 0px 23%;
    line-height: 2em;
    text-align: left;
    margin-bottom: 2em;
}

.PageBox-QuizIntroduce ul {
    list-style-type: disc;
    margin-left: 1em;
}

.PageBox-QuizBtnStart {
    position: relative;
    padding: 0.5em 1em;
    cursor: pointer;
    background-color: #ce4141;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
}

.PageBox-QuizBtnStart:hover {
    background-color: #a11818;
}

/* 題目頁 */
.QuizBox {
    background-color: #ccc296;
    border: 10px solid #ccc296;
    border-radius: 10px;
    box-shadow: 0px 0px 6px #666;
}

.QuizBox:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f7efd8;
    border: 5px solid #b2a984;
    box-sizing: border-box;
}

/*題目頁-問題*/
.QuizBox-QuestionBox {
    position: relative;
    width: 100%;
    height: 24%;
    margin: 0% 0 1% 0;
    display: table;
    padding: 5px 5px 0;
    box-sizing: border-box;
}

.QuizBox-QuestionBox:before {
    content: "";
    position: absolute;
    bottom: 0%;
    left: 13.5%;
    width: 84%;
    height: 4px;
    background-color: #26528d;
}

.QuizBox-Qnum {
    position: absolute;
    width: 14.5%;
    top: 4%;
    left: 0;
    font-size: 1.8em;
    font-weight: bold;
    color: #26528d;
    text-align: center;
}

.QuizBox-Qnum span {
    font-size: 2em;
}

.QuizBox-Type {
    position: absolute;
    width: 14.5%;
    bottom: 0%;
    left: 0;
    font-weight: bold;
    color: #26528d;
    text-align: center;
}

.QuizBox-Question {
    position: relative;
    padding: 0 1.5% 0 13.5%;
    margin: 0;
    font-weight: bold;
    line-height: 1.2em;
    display: table-cell;
    vertical-align: middle;
}

/*題目頁-按鈕*/
.QuizBox-BtnBox {
    position: absolute;
    width: 100%;
    bottom: 3%;
    text-align: center;
}

.QuizBox-Btn {
    position: relative;
    display: inline-block;
    width: 15.1%;
    z-index: 9;
    padding: 0.5em 0;
    cursor: pointer;
    background-color: #ce4141;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
}

.QuizBox-Btn:hover {
    background-color: #a11818;
}

/* 清除鈕 */
.QuizBox-BtnReset {
    background-color: #49b87f;
}

.QuizBox-BtnReset:hover {
    background-color: #4ea480;
}

.QuizBox-BtnSubmit.two,
.QuizBox-BtnNext.two,
.QuizBox-BtnQuizEnd.two {
    margin-left: 3%;
}

.QuizBox-BtnTryagain,
.QuizBox-BtnReset,
.QuizBox-BtnNext,
.QuizBox-BtnSubmit,
.QuizBox-BtnQuizEnd {
    display: none;
}

.QuizBox-BtnQuizTable,
.QuizBox-BtnQuizReset {
    position: absolute;
    display: block;
    left: 42.45%;
    bottom: 3%;
}

/*題目頁-回饋*/
.QuizBox-FeedbackBox {
    position: absolute;
    top: 33%;
    right: 4%;
    width: 35%;
    height: 55%;
    display: none;
    background-color: #ffffff;
}

.FeedbackBox-Word {
    position: absolute;
    top: 21%;
    left: 0;
    width: 92%;
    height: auto;
    max-height: 79%;
    padding-left: 4%;
    padding-right: 4%;
    font-size: 1.2em;
    overflow-y: auto;
}

.FeedbackBox-Word p {
    margin: 0;
    margin-bottom: 0.5em;
}

p.FeedbackBox-Word-Blue {
    margin: 0.5em 0;
    color: #0183bf;
}

/*題目頁-選項*/
.QuizBox-QitemBox {
    position: relative;
    width: 100%;
    height: 74%;
}

.QuizBox-QitemBox.link {
    width: 98%;
    margin: 0 auto;
}

/*選擇*/
.QitemBox-Img {
    position: relative;
    height: auto;
    float: right;
    margin: 0 4% 0 0.5em;
}

.QitemBox-Choose {
    position: relative;
    display: block;
    padding: 0% 0% 0% 5.5%;
    margin: 0% 4% 1.0% 13.5%;
    line-height: 1.3em;
    cursor: pointer;
}

.QitemBox-Choose:before {
    position: absolute;
    content: "";
    top: 0.1em;
    left: 0;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    background-color: #a99c98;
    border: 2px solid #333;
    box-shadow: 0 0 0 2px #fff inset;
}

.QitemBox-Choose.act:before {
    background-color: #c44241;
}

.QitemBox-Choose:after {
    position: absolute;
    content: attr(data-num);
    top: 0;
    left: 4%;
}

/*選擇-單*/
.ChooseS:before {
    border-radius: 1em;
}

/*連連看(配對題)*/
/* 線區 */
.QitemBox-LineBox {
    position: relative;
    width: 100%;
    height: 20%;
    z-index: 1;
}

/* 線區-線層 */
.matchLineBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 線區-線層-線 */
.matchLine {
    display: none;
}

/* 項目區 */
.QitemBox-LinkBox {
    position: relative;
    width: 100%;
    height: 17.3%;
    font-size: 0.9em;
    z-index: 2;
    box-sizing: border-box;
}

/* 項目區-按鈕 */
.LinkBox-item {
    position: relative;
    width: 18.5%;
    height: 100%;
    color: #FFF;
    line-height: 1.3em;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    display: table;
    padding: 0 0.5em;
    border-radius: 10px;
    float: left;
}

.LinkBox-item:not(:last-child) {
    margin-right: 1.5%;
    /* 有更改的話，記得改js */
}

/* 項目區-按鈕-字 */
.LinkBox-item div {
    display: table-cell;
    vertical-align: middle;
}

/* 項目區-按鈕-圓點 */
.LinkBox-item:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0.9em;
    height: 0.9em;
    border-radius: 1em;
    box-sizing: border-box;
    background-color: #a99c98;
    border: 2px solid #333;
    box-shadow: 0 0 0 2px #fff inset;
}

.LinkBox-item.act:after {
    background-color: #c44241;
}

/* 項目區-按鈕(上) */
.QitemBox-LinkUpBox .LinkBox-item {
    background: #358FC6;
    /* Old browsers */
    background: -moz-linear-gradient(top, #6da3d0 0%, #6da3d0 50%, #358fc6 50%, #358fc6 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6da3d0 0%, #6da3d0 50%, #358fc6 50%, #358fc6 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6da3d0 0%, #6da3d0 50%, #358fc6 50%, #358fc6 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6da3d0', endColorstr='#358fc6', GradientType=0);
    /* IE6-9 */
}

.QitemBox-LinkUpBox .LinkBox-item:after {
    top: calc(100% + 5px);
}

/* 項目區-按鈕(下) */
.QitemBox-LinkDownBox .LinkBox-item {
    background: #eb9928;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f0ae56 0%, #f0ae56 50%, #eb9928 50%, #eb9928 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f0ae56 0%, #f0ae56 50%, #eb9928 50%, #eb9928 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f0ae56 0%, #f0ae56 50%, #eb9928 50%, #eb9928 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0ae56', endColorstr='#eb9928', GradientType=0);
    /* IE6-9 */
}

.QitemBox-LinkDownBox .LinkBox-item:after {
    bottom: calc(100% + 5px);
}

/*拖曳題*/
.QitemBox-DropBox,
.QitemBox-DragBox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.DropBox-item,
.DragBox-item {
    position: absolute;
    width: 20%;
    height: 10%;
    line-height: 1.3em;
    text-align: center;
    box-sizing: border-box;
    display: table;
    border-radius: 10px;
}

.DropBox-item div {
    position: absolute;
    width: 100%;
    top: calc(100% + 5px);
}

.DragBox-item div {
    display: table-cell;
    vertical-align: middle;
}

.DropBox-item {
    color: #515151;
    background-color: #d2ccc4;
    box-shadow: 0px 5px 0px 0px #d2ccc4;
}

.DragBox-item {
    cursor: pointer;
    color: #FFF;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6da3d0+0,6da3d0+50,358fc6+50,358fc6+100 */
    background: #358FC6;
    /* Old browsers */
    background: -moz-linear-gradient(top, #6da3d0 0%, #6da3d0 50%, #358fc6 50%, #358fc6 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6da3d0 0%, #6da3d0 50%, #358fc6 50%, #358fc6 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6da3d0 0%, #6da3d0 50%, #358fc6 50%, #358fc6 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6da3d0', endColorstr='#358fc6', GradientType=0);
    /* IE6-9 */
    box-shadow: 0px 5px 0px 0px #277bb1;
    background-color: #277bb1;
}

.DragBox-item.highZ {
    z-index: 99;
}

/*小試結果頁*/
.QuizEndLevel,
.QuizEndTable {
    background-color: #7a4e1f;
    border: 10px solid #7a4e1f;
    border-radius: 10px;
    box-shadow: 0px 0px 6px #666;
}

.QuizEndLevel:before,
.QuizEndTable:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f0cf8f;
    border: 5px solid #a96e30;
    box-sizing: border-box;
}

/* 得分等級頁 */
.QuizEndLevel {
    padding: 0 5%;
}

.QuizEndLevel-ResultBox {
    position: relative;
}

.QuizEndLevel-ResultBox .title {
    position: relative;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.5em 0;
}

.QuizEndLevel-ResultBox .title span {
    color: #CC3300;
}

.QuizEndLevel-WordBox {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 3%;
}

.QuizEndLevel-WordBox-LevelBox {
    position: relative;
    height: 4em;
    display: table;
}

.QuizEndLevel-WordBox-LevelBox:not(:last-child) {
    margin-bottom: 2%;
}

.LevelBox-level,
.LevelBox-text {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

.LevelBox-level {
    width: 4em;
    height: 4em;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    background-color: #e4e4e4;
    border-radius: 50%;
    color: #ccc;
}

.LevelBox-level span {
    font-size: 0.6em;
    font-weight: normal;
    display: block;
}

.LevelBox-text {
    font-size: 1.1em;
    color: #e4e4e4;
    margin: 0;
    padding-left: 0.5em;
}

.act .LevelBox-level {
    color: #333;
    background-color: #ffd800;
}

.act .LevelBox-text {
    color: #333;
}

/* 測驗表格頁 */
.QuizEndTable {
    padding: 6px;
}

/* 測驗表格頁-表格標題 */
.QuizEndTable-TitleBox {
    position: relative;
    width: 100%;
    height: 11%;
    font-size: 1.2em;
    overflow-y: scroll;
    overflow-x: hidden;
}

.QuizEndTable-TitleBox::-webkit-scrollbar {
    opacity: 0;
}

/* 測驗表格頁-表格內容 */
.QuizEndTable-TableBox {
    position: relative;
    width: 100%;
    height: 75%;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 1.1em;
    color: #624c41;
}

/*測驗表格頁-表格*/
.QuizEndTable-Table {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/**/
.QuizEndTable-Table tr:not(:last-child) {
    border-bottom: 7px solid linen;
}

.QuizEndTable-Table th {
    color: #624c3e;
    background-color: #f0cf8f;
    text-align: center;
}

.QuizEndTable-Table th:not(:last-child) {
    border-right: 7px solid #f0cf8f;
}

.QuizEndTable-Table th:nth-child(1) {
    color: #FFF;
    background-color: #624c3f;
    width: 10%;
}

.QuizEndTable-Table th:nth-child(2),
.QuizEndTable-Table th:nth-child(3),
.QuizEndTable-Table th:nth-child(5) {
    width: 25%;
}

.QuizEndTable-Table th:nth-child(4) {
    width: 15%;
}

/**/
.QuizEndTable-Table td {
    color: #624c41;
    background-color: #fefdfb;
    padding: 5px;
}

.QuizEndTable-Table td:not(:last-child) {
    border-right: 7px solid linen;
}

.QuizEndTable-Table td:nth-child(1) {
    color: #624c41;
    background-color: #dbcac1;
    width: 10%;
    text-align: center;
}

.QuizEndTable-Table td:nth-child(2),
.QuizEndTable-Table td:nth-child(3),
.QuizEndTable-Table td:nth-child(5) {
    width: 25%;
}

.QuizEndTable-Table td:nth-child(4) {
    width: 15%;
}

.QuizEndTable-Table td:nth-child(5):after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: white;
}

.QuizEndTable-Table td:nth-child(5) span {
    color: #0183bf;
}

.QuizEndTable-Table td.right .shape {
    position: relative;
    width: 2em;
    height: 2em;
    border: 8px solid #8BC34A;
    border-radius: 2em;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
}

.QuizEndTable-Table td.wrong .shape {
    background: #ef717a;
	width: 2em;
    height: 8px;
    position: relative;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.QuizEndTable-Table td.wrong .shape:after {
	position: absolute;    
    content: "";
    width: 8px;
    height: 2em;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #ef717a;
    display: block;
}