*, ::after, ::before {
    box-sizing: border-box;
}
html {
    font-size: 19px;
    font-family: 'Georgia', '微軟正黑體';
}
body {
}
b {
    font-weight: bold;
}

section.page {
    padding: 2em;
    line-height: 1.5;
}
section.page > section.imgindex {
    height: calc(100vh - 4em);
}
section.page > div > .pageContent {
    min-height: calc(100vh - 4em);
    padding: 1.5em;
    background-color: #FFF;
    border-radius: 1vh;
}
section.page > div > .pageContent > .pageSecTitle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1em;
}
section.page > div > .pageContent > .pageSecTitle > h2 {
    position: relative;
    font-size: 1.5em;
    line-height: 1.25;
    margin-left: -2rem;
    padding: 0.5em 1em;
    font-weight: bold;
    letter-spacing: 5px;
    text-align: center;
    background: #FDB94B;
    color: #FFF;
}
section.page > div > .pageContent > .pageSecTitle > h2::before,
section.page > div > .pageContent > .pageSecTitle > h2::after {
    content: '';
    position: absolute;
    right: -40px;
    border: 20px solid #FDB94B;
    border-right: 20px solid transparent;
}
section.page > div > .pageContent > .pageSecTitle > h2::before {
    top: 0;
    border-bottom: 20px solid transparent;
}
section.page > div > .pageContent > .pageSecTitle > h2::after {
    bottom: 0;
    border-top: 20px solid transparent;
}




@media screen and (max-width: 768px) {
    section.page {
        padding: 1em;
    }
    section.page > section.imgindex {
        height: calc(100vh - 2em);
    }
    section.page > div > .pageContent {
        min-height: calc(100vh - 2em);
        padding: 1em;
    }
    section.page > div > .pageContent > .pageSecTitle > h2 {
        margin-left: 0px;
    }
    section.page > div > .pageContent > .pageSecTitle > h2::before,
    section.page > div > .pageContent > .pageSecTitle > h2::after {
        all: unset;
    }
}
@media screen and (max-width: 414px) {
    section.page > div > .pageContent > .pageSecTitle {
        flex-direction: column;
        align-items: stretch;
    }
    section.page > div > .pageContent > .pageSecTitle > *:not(:first-child) {
        margin-top: 5px;
    }
}

input, select {
    font-size: inherit;
    border: 1px solid #CCC;
    margin: 0px;
    padding: 3px 5px;
    color: #636363;
    height: 2em;
    background-color: #FFF;
}
input[type=checkbox], input[type=radio] {
    width: 1em;
    height: 1em;
}
input[type=checkbox], input[type=radio],
input[type=checkbox] + label, input[type=radio] + label {
    vertical-align: middle;
}

input:not([type=hidden]) + input:not([type=hidden]), input:not([type=hidden]) + select,
select + input:not([type=hidden]), select + select {
    margin-left: 5px;
}

/*
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 414px) {
}
*/


.testmode {
    position: fixed;
    top: 0px;
    right: 0px;
    font-size: 12px;
    margin: 10px 25px;
    color: red;
}


/*color*/
.c_red {
    color: #ac0d0d;
}
.c_green {
    color: #52734d;
}
.c_yellow {
    color: #FDB94B;
}


/* 區塊提示訊息 */
.warningMsg, .successMsg, .failedMsg {
    text-align: center;
    font-size: 1.25em;
    padding: 1em;
    word-break: break-all;
}
.warningMsg {
    color: #A35709;
    background-color: #FAD586;
}
.successMsg {
    color:#52734d;
    background-color: #d2e69c;
}
.failedMsg {
    color: #BE0000;
    background-color: #FFAAA7;
}


/* 快速選擇文字 */
.us-all {
    user-select: all;
}


/* 按鈕 */
.btnblock {
    display: flex;
    justify-content: center;
}
.btnblock > * {
    margin-left: 10px;
}
.btn {
    font-size: 1em;
    cursor: pointer;
    padding: 0.75em 1.5em;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 5px rgb(0 0 0 / 24%);
    border: 0;
    color: #333;
    background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);
}
.btn:hover {
    box-shadow: 1px 2px 3px rgb(0 0 0 / 12%), 3px 3px 5px rgb(0 0 0 / 24%);
}
.btn.active {
    box-shadow: 1px 2px 3px rgb(0 0 0 / 12%), 3px 3px 5px rgb(0 0 0 / 24%);
}

.btn.btn_sure {
    color:#FFF;
    background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}
.btn.btn_cancel{
    color:#FFF;
    background-image: linear-gradient(to right, #e4fff3 0%, #9fddc1 100%);
}
.btn.bg_yellow2orange {
    color: #000;
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
.btn.bg_lightGreen {
    color: #000;
    background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);
}
.btn.bg_darkblue2light {
    color: #FFF;
    background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}
.btn.circlebtn {
    padding: 0.5em;
    border-radius: 50%;
}


/*ModalBox*/
.ModalBox .ModalBoxDetailTitle i,
.ModalBoxBig .ModalBoxDetailTitle i {
    font-size: 5em;
}
.ModalBox .ModalBoxDetailText,
.ModalBoxBig .ModalBoxDetailText {
    padding: 2em 0px;
}
.ModalBox .ModalBoxDetailText {
    text-align: center;
}
.ModalBox .ModalBoxDetail,
.ModalBoxBig .ModalBoxDetail {
    min-width: 20vw;
}
.ModalBox .ModalBoxDetailButton > button + button,
.ModalBoxBig .ModalBoxDetailBigButton > button + button {
    margin-left: 1em;
}


/*table1*/
.table1 {
    border-collapse: collapse;
}
.table1, .table1 > tbody > tr > th, .table1 > tbody > tr > td {
  border: 1px solid;
  padding: 0px 5px;
}
.table1 > tbody > tr {
}
.table1 > tbody > tr > th {
}
.table1 > tbody > tr > td {
}


/*articlecontent*/
.articlecontent {
    padding-top: 0px;
}
.articlecontent > section {
    padding-top: 1em;
    padding-left: 2em;
    text-indent: -2em;
}

.articlecontent > section > ul {
}
.articlecontent > section > ul > li {
}
.articlecontent > section > * {
    text-indent: 0px;
}
.articlecontent > section > section {
    padding-top: 1em;
    padding-left: 1.3em;
    text-indent: -1.3em;
}
.articlecontent > section > section > * {
    text-indent: 0px;
}
@media screen and (max-width: 414px) {
    .articlecontent > section {
        padding-left: 1em;
        text-indent: -1em;
    }
    .articlecontent > section > section {
        padding-left: 1em;
        text-indent: -1em;
    }
}

/*articlecontent*/
.articlecontent2 {
    padding-top: 0px;
}
.articlecontent2 > section {
    padding-top: 1em;
    padding-left: 2.5em;
    text-indent: -2.5em;
}
.articlecontent2 > section > ul {
}
.articlecontent2 > section > ul > li {
}
.articlecontent2 > section > * {
    text-indent: 0px;
}
.articlecontent2 > section > section {
    padding-top: 1em;
    padding-left: 1.3em;
    text-indent: -1.3em;
}
.articlecontent2 > section > section > * {
    text-indent: 0px;
}
@media screen and (max-width: 414px) {
	.articlecontent2 > section {
        padding-left: 2.5em;
        text-indent: -2.5em;
    }
	.articlecontent2 > section > section {
        padding-left: 1em;
        text-indent: -1em;
    }
}
/*loginbtn*/
.loginbtn {
    border-radius: 10px;
    box-shadow: 0px 0px 5px #30313345;
    padding: 5%;
}
.loginbtn > .logintype > .btnlist {
    display:flex;
    justify-content:space-evenly;
    position:relative;
}
.loginbtn > .logintype > .btnlist > .imgtextbtn {
    flex:1;
}
.loginbtn > .logintype > .btnlist > .backbtn {
    position:absolute;
    top:0px;
    right:0px;
}
.loginbtn > .logintype > .btnlist > .imgtextbtn {
    padding: 10px;
    border-radius: 10px;
    border: 2px dashed transparent;
    text-align: center;
    cursor: pointer;
}
.loginbtn > .logintype > .btnlist > .imgtextbtn:hover {
    background:#CBE5E9;
}
.loginbtn > .logintype > .btnlist > .imgtextbtn > * {
    display:flex;
    flex-direction: column;
}
.loginbtn > .logintype > .btnlist > .imgtextbtn > * {
    margin-top:10px;
}
.loginbtn > .logintype > .btnlist > .imgtextbtn > *:first-child {
    margin-top:0px;
}
.loginbtn > .logintype > .btnlist > .imgtextbtn > .icon {
    display: inline-block;
    vertical-align: middle;
    width: 65px;
    height: 65px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: 65px 65px;
}
.loginbtn > .logintype > .btnlist > .imgtextbtn > .icon.educloud {
    background-image: url(../image/btn_educloud);
}
.loginbtn > .logintype > .btnlist > .imgtextbtn > .icon.openidlogin {
    background-image: url(../image/btn_openid);
}
.loginbtn > .logintype > .btnlist > .imgtextbtn > .icon.adllogin {
    background-image: url(../image/btn_adl);
}
.loginbtn > .logintype > .btnlist > .imgtextbtn > .icon.adllogin.noaccount {
    -webkit-filter:grayscale(1);
}
.loginbtn > .logintype > .btnlist > .backbtn {
    padding:10px;
    border-radius: 10px;
    border: 2px dashed transparent;
    cursor: pointer;
}
.loginbtn > .logintype > .btnlist > .backbtn:hover {
    background:#CBE5E9;
}
/*loggedmsg*/
.loginbtn > .loggedmsg {
    text-align: center;
}

/* warmup_ranklist
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.warmup_ranklist {
	width: 100%;
	text-align: center;
}

.warmup_ranklistwarp{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.warmup_ranklist caption{
	font-weight: bold;
}

.warmup_ranklist table {
	width: 100%;
	max-width: 600px;
	margin: 2em 0;
	text-align: center;
}

.warmup_ranklist th {
	border-bottom: 1px solid #9f9f9f;
}
.warmup_ranklist tr th,
.warmup_ranklist tr td{
	vertical-align: middle;
	padding: 10px 0;
}

.warmup_ranklist tr td span {
	display: inline-flex;
    width: 3em;
    height: 2em;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.warmup_ranklist thead tr,
.warmup_ranklist tbody tr:nth-child(even){
	background-color: #fff9e6;
}

.warmup_ranklist tr:first-child td span {
	clip-path: polygon(50% 5%, 66% 40%, 94% 20%, 75% 100%, 25% 100%, 6% 25%, 33% 40%);
	border-radius: 0% 0 50% 50%;
	border: 3px solid #ee9304;
    background-color: #FFD700;
}
.warmup_ranklist tr:nth-child(2) td span {
	clip-path: polygon(50% 5%, 66% 40%, 94% 20%, 75% 100%, 25% 100%, 6% 25%, 33% 40%);
	border-radius: 0% 0 50% 50%;
	border: 3px solid #9b9d9c;
    background-color: #bfbfbf;
}
.warmup_ranklist tr:nth-child(3) td span {
	clip-path: polygon(50% 5%, 66% 40%, 94% 20%, 75% 100%, 25% 100%, 6% 25%, 33% 40%);
	border-radius: 0% 0 50% 50%;
	border: 3px solid #794a19;
    background-color: #B87333;
}