/* 縮小失敗。正在傳回未縮小的內容。
(333,189): run-time error CSS1034: Expected closing parenthesis, found ','
(333,189): run-time error CSS1042: Expected function, found ','
(333,194): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
@charset "UTF-8";
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; }

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

body { font-family: "微軟正黑體" !important; }

.clearfix { clear: both; }


/* == 共用區 ============================================================================= */
/*字體色彩*/
.bodyContent .fc01{ color:#00b8e6;}
.bodyContent .fc02{ color:#f00;}

/* 頁碼 */
.page{ clear:both; margin:20px auto; padding:0; width:100%; text-align:center;  }
.page ul{ margin:0 auto; padding:0; width:100%; text-align:center; }
.page li{ display:inline-block; font-size:14px; color:#acacac; }
.page li a{ text-decoration:none; padding:5px 10px; font-size:14px; color:#acacac; border:1px solid #e5e5e5; transition:.3s}
.page li a.active{ margin:0; padding:5px 10px; font-size:14px; color:#FFF; border:1px solid #666; background-color:#666;}
.page li a:hover{ color:#FFF; background-color:#00b8e6; border:1px solid #00b8e6;}
.page select{ padding: 5px; border: 1px solid #e5e5e5; color: #666;}

/*送出視窗按鈕*/
.correct-btn ul{ margin: 20px 0 0 0; text-align: center;}
.correct-btn li{ display:inline-block; padding: 5px 0;	width: 70px; font-size: 1em; color: #000000;
	text-align: center;	border-radius: 5px;	border: 1px solid #68717c; background-color: #ffffff; }
.correct-btn li a{ display: block; color: #68717c; text-decoration: none; }
.correct-btn li:nth-child(1){ border: 1px solid #00b8e6; color: #FFFFFF; background-color: #00b8e6; }
.correct-btn li:nth-child(1) a{ color: #FFFFFF; }


/* ===================== 桌機 ===================== */
/* header */
header { background: #00bef3; width: 100%; display: flex; justify-content: center; align-items: center; padding: 30px 0; }

/* nav */
nav { background: #0d48ab; }
nav ul { display: flex; justify-content: center; padding: 10px 0; }
nav ul li { border-right: 1px solid #fff; }
nav ul li:last-child { border: 0; }
nav ul li a { color: #fff; text-decoration: none; font-size: 20px; padding: 0 10px; }
nav ul a:hover { text-decoration: underline; }

/* main */
main {  margin: 20px auto;  width: 1024px;  overflow: hidden; }


/* ---------- 內容 ---------- */

/*標題&登入按鈕*/
.affairs h1{ margin: 0 0 15px; font-size:1.6rem; font-weight: bold; line-height:40px; color:#0d48ab;}
.affairs .login-nav ul{ display: flex; justify-content: flex-end;}
.affairs .login-nav li{ margin: 0 0 0 10px;}
.affairs .login-nav a{ color: #00b8e6; text-decoration: none; transition: .3s;}
.affairs .login-nav a:hover{ color: #FF0000;}
.affairs .info h3{ margin: 20px 0; font-size: 1rem; color: #333333;}

/*點數選單*/
.point {padding: 10px 0; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; overflow: hidden;}
.point-total{ float: left; padding: 0px; background:#fff;}
.point-total p{ margin: 0; color: #f00; line-height: 1.4;}/*更改*/
.point-total p span{ font-weight: bold;}


/*--- 批改練習挑戰(列表頁) ---*/
.practice .title{ margin:20px 0; display: flex; justify-content: space-between; align-items: center; }
.practice .title h2{ margin: 0; font-size: 1.2rem; font-weight: bold; color: #333333;}
.practice .title a{  margin: 0; padding: 4px 8px; border-radius: 5px; font-size: 1rem; color: #0d48ab; text-decoration: none; transition: .5s;}
.practice .info{ margin:0 0 20px 20px; }
.practice .info li{ list-style:square; font-size:1rem; line-height:1.5;  }

.practice-search{ margin: 0 0 10px; padding: 15px; background-color: #e9f9fd; }
.practice-search select{ 
	margin: 0 3px; padding: 4px; width:30%;  height: 34px; outline:none; border:1px solid #cccccc; 
	font-size: 1rem; font-family: Arial, Helvetica,"微軟正黑體" ,sans-serif;  
    }
.practice-search input{ 
	width: 70px; height: 34px; background-color: #888; color: #FFFFFF; border:0; border-radius: 5px;
	font-size: 0.95rem; cursor:pointer;font-family: Arial, Helvetica,"微軟正黑體" ,sans-serif; }

.practice>ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.practice>ul li{ margin: 10px 0; width: 32%; display: flex; flex-flow: column; justify-content: space-between;}
.practice .content{ height: 100%; padding: 25px; border: 1px solid #00b8e6; border-radius: 10px 10px 0 0;}
.practice .content h3{ 
	margin:0 0 15px; width:100%; overflow: hidden; text-overflow: ellipsis; white-space : nowrap;
	font-size: 1.1rem; line-height: 1.4; font-weight: bold; color: #00b8e6;
    }
.practice .content p{ 
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    line-height: 1.4;
    }
.practice .way { margin: 15px 0; width: 100%; display: flex; flex-wrap: wrap; }
.practice .way span{ margin: 2px; padding: 10px 5px; background-color: #eeeeee; width:44%; font-size: 0.9rem; text-align: center; }
.practice .quota {color: #ff6600;}
.practice .quota span{ font-weight: bold;}
.practice .bt{ padding: 20px; background-color: #00b8e6; border-radius: 0 0 10px 10px; text-align: center;}
.practice .bt h4{ margin: 0 auto;}
.practice .bt h4 a{
	display: block; margin: 0 auto; padding: 10px 4px; width: 72%; background-color: #ffffff; border-radius: 50px; 
	font-size: 1.3rem; font-weight: bold; text-decoration: none; color: #00b8e6; 
    }
.practice .bt h4 a:hover{background-color: #fffea9; transition: .20s linear; }
.practice .bt p{ margin:15px 0 0; font-weight: bold; color: #fffea9;}


/*使用說明*/
.correct-info{ clear: both; margin:20px 0 ; color:#333333; }
.correct-info h2{ font-size:1rem; line-height: 1.4; font-weight: normal; }
.correct-info p{ clear: both; font-size:1.2rem; font-weight:bold;}
.correct-info ul{ margin:10px 0 0 20px; line-height:1.5; }
.correct-info li{ font-size:1rem; margin:0;}
.correct-info ul>li{list-style:square;}


/*批閱-列表*/
.correct-qa h3{ font-size: 1.1rem; line-height: 1.4; font-weight:bold; color:#00b8e6; }
.correct-qa h4 select{ 
	width:15%; height:32px; margin:10px 20px; padding:0 5px; outline:none; border:1px solid #CCC;
    font-size:1em; color:#333; font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif;
}
.correct-qa .btn a{ padding:0.6em 1.2em; border-radius: 5px; background-color: #f00; color:#fff; text-decoration: none; line-height:3; }
.correct-qa .btn a:hover{background-color: #e43519;}
.correct-qa h5{ margin: 0 0 10px; text-align:right; font-size: 0.9rem; color: #999;}
.correct-qa dt{ padding: 10px; font-size: 1rem; line-height: 1.5; font-weight:bold; color: #1eb113; background-color: #f9f9f9; border-bottom: 1px dashed #C4C4C4;}
.correct-qa dt a{color: #1eb113;}
.correct-qa dt a:hover{ text-decoration: none;}
.correct-qa dd{ margin: 0 ; padding: 15px; }
.correct-qa dd p{ margin: 0; padding: 0; font-size: 0.95em; color:#0d48ab; line-height: 1.5; }
.correct-qa dd p strong{ font-weight: bold;}
.correct-qa dd p a{color: #0d48ab;}
.correct-qa dd p a:hover{ color: #f00; }
.correct-qa dd p:nth-child(1){ color: #666;}

/*--- 批改練習挑戰 ---*/
.practice-form{ margin-bottom: 20px; padding:0; box-sizing: border-box; border: 1px solid #cccccc; border-radius: 5px;}
.practice-form .box01{padding:2em 3em; background-color: #eef3fb; border-radius: 5px 5px 0 0; }
.practice-form .box01 h2{ 
	margin: 0 0 20px; padding:10px 4px; width: 160px; border-radius: 50px; background-color: #0d48ab;
	font-size: 1.2rem; font-weight: bold; color:#ffffff; text-align: center;
    }
.practice-form .box01 li{ margin: 5px 0; display: flex; justify-content: flex-start; line-height: 1.6; color: #333333;}
.practice-form .box01 li a{
	display: block; margin: 0 5px; padding: 2px 0; width: 80px; background-color:#838e9b; border-radius: 5px; 
	text-align: center;  line-height: 1.6; color: #fff; text-decoration: none;}
.practice-form .box01 li a:hover{ background-color:#68717c;}
.practice-form .box01 h3{ margin: 15px 0; font-size: 1.1rem; font-weight: bold; line-height: 1.4; color: #1eb113;}
.practice-form .box01 p{line-height: 1.6; color: #333333;}
.practice-form .box01 .desc{ margin: 20px 0 0; padding: 20px; background-color: rgba(0%,40%,60%,0.1); border-radius: 8px; line-height: 1.6; color: #333333;}
.practice-form .box01 .pic { text-align: center;}
.practice-form .box01 .pic img { margin: 15px 10px; }

.practice-form .box02{padding:2em 3em;}
.practice-form .box02 label{ line-height:2; font-size: 16px; color:#333333; }
.practice-form .box02 textarea{
	padding: 5px; width: 100%; height: 180px; outline:none; border:1px solid #cccccc; background-color:#f9f9f9;
	font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif; font-size: 16px; color:#4a617a; line-height: 1.3;
	box-sizing: border-box;
    }
.practice-form .box02 p{margin:5px 0 20px; }

.practice-form .box03{padding: 0 3em;}
.practice-form .box03 > h2{ 
	margin: 0 0 20px; padding: 4px; width: 160px; border-radius: 50px; background-color: #0d48ab;
	font-size: 1.2rem; color:#ffffff; text-align: center;
    }
.practice-form .box03 select{
	margin: 10px 0 0; padding: 5px; width:100%; outline:none; border:1px solid #cccccc; background-color:#f9f9f9;
	font-size: 1rem; font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif;
    }
.practice-form .box03 h3{ margin: 10px 0; font-size: 1rem; color:#f00; }
.practice-form .box03 {line-height: 1.6; color: #333333;}

/*時間段*/
.practice-form .period h2{ margin:20px 0 0; font-size: 1rem; font-weight: bold;}
.practice-form .period dl{ margin:15px 0; padding: 20px; border: 1px solid #dddddd; border-radius: 5px; }
.practice-form .period dt{ margin: 0 0 10px; font-weight: bold; color: #1eb113; }
.practice-form .period dd{display: flex; flex-wrap: wrap; }
.practice-form .period span{ display: block; margin: 3px; padding:5px 10px; border-radius: 3px; background-color: #CCCCCC; color: #FFFFFF;}
.practice-form .period a { display: block; margin: 3px; padding:5px 10px; border-radius: 3px; text-decoration: none; color: #FFFFFF;}
.practice-form .period a.B { background-color: rgba(0,184,230,1.0);}
.practice-form .period a.B:hover { background-color: rgba(255,102,0,1.0); transition: .3s;}
.practice-form .period a.C{ background-color: rgba(13,72,171,1.0);}

/*按鈕*/
.practice-form .advisory{ width:100%; margin: 20px auto; text-align:center; }
.practice-form .advisory li{ display:inline-block;}
.practice-form .advisory a{
	display:block; width:90px; height:40px; border-radius: 5px; border:1px solid #68717c;
	line-height:40px; color: #68717c; text-decoration: none; transition:.5s;
	}
.practice-form .advisory a:hover{ background-color:#68717c; color:#FFF;}

/*上傳圖片檔案*/
.consultation-form-img{ margin: 10px 0;}
.consultation-form-img .updata div{ padding: 5px; width: 100px; border-radius: 5px; text-align: center; background-color: #4a5158; }
.consultation-form-img .updata div a{ display: block; text-decoration: none; color: #ffffff; }
.consultation-form-img .updata p{ font-size: 14px; color: #747474;}
.consultation-form-img ul{ display: flex; flex-direction:row; margin: 10px 0; }
.consultation-form-img li{ display: block; margin: 0 5px 0 0; width: 100px; height: 100px; border: 1px solid #D5D5D5; position: relative; overflow: hidden;}
.consultation-form-img li a{ position: absolute; top: 0; right: 0; width: 25px; height: 25px; }

/*諮詢回應提報表單-輸入關鍵字*/
.consultation-form-ky{ margin: 10px 0; padding: 10px; width: 100%; background-color: #f9f9f9; border: 1px solid #ebebeb; display: flex; flex-direction: row;
	flex-wrap:wrap; box-sizing: border-box;}
.consultation-form-ky div{ display: inline-block; margin: 0 2px 2px 0; padding: 5px 10px; background-color: #838e9b; color: #FFFFFF; border-radius: 5px;}
.consultation-form-ky div a{ text-decoration: none; color: #FFFFFF;}


/*--- 送出視窗-獎項 ---*/
.practice-confirm{
	margin: 10px auto; padding: 20px 0 0; width: 400px; background-color: #ffffff; border-radius: 5px; box-sizing: border-box; 
	border: 1px solid #C0C0C0; text-align: center;
    }
.practice-confirm h2{ margin: 0; padding: 0 0 10px 0; font-size: 1.3em; font-weight: bold; color: #0d48ab; text-align: center; }
.practice-confirm > ul{ padding: 5px 0; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; overflow: hidden; }
.practice-confirm li{ margin:20px 0; width: 100%; line-height: 1.8; }
.practice-confirm li h3{
	margin:0 auto 5px; width: 30%; height: 32px; background-color: #0d48ab; border-radius: 50px;
    font-size: 1rem; font-weight: bold; line-height: 32px; color: #FFFFFF;
    }

/*送出視窗按鈕*/
.practice-confirm .btn ul{ margin: 0; padding: 0; text-align: center;}
.practice-confirm .btn li{ display:inline-block; width: 70px; border-radius: 5px;	border: 1px solid #00b8e6; background-color: #00b8e6; text-align: center;	}
.practice-confirm .btn li a{ display: block; text-decoration: none; color: #FFFFFF; }


/*--- 批改練習挑戰題目 ---*/
.practice-topic{ margin: 20px 0 0; padding:2em 3em;  background-color: #f4f6fa; border-bottom: 1px dashed #C4C4C4; box-sizing: border-box; }
.practice-topic .box01 .main{ margin: 0 0 20px; overflow: hidden; }
.practice-topic .box01 .left{ float: left;}
.practice-topic .box01 .left li{ margin: 5px 0; display: flex; justify-content: flex-start; line-height: 1.6; color: #333333;}
.practice-topic .box01 .left li a{
	display: block; margin: 0 5px; padding: 2px 0; width: 80px; background-color:#838e9b; border-radius: 5px; 
	text-align: center;  line-height: 1.6; color: #fff; text-decoration: none;
    }
.practice-topic .box01 .left li a:hover{ background-color:#68717c;}
.practice-topic .box01 .right{ float: right; }
.practice-topic .box01 .awards { width: 100px; }
.practice-topic .box01 .right i{
	display: flex; align-items: center; justify-content: center; height: 90px; border: 1px solid #FF6600; 
	background-color:#FF6600; border-radius: 10px 10px 0 0 ;font-size: 3.2rem; color: #FFFFFF;
    }
.practice-topic .box01 .right h2{
	margin: 0; padding: 5px 10px;  border-radius: 0 0 10px 10px; border: 1px solid #FF6600; background-color:#FFFFFF; 
	font-size: 1.05rem; font-weight: bold; text-align: center; color: #FF6600;
    }

.practice-topic .box01 h3{ margin: 15px 0; font-size: 1.1rem; line-height: 1.4; font-weight: bold; color: #1eb113;}
.practice-topic .box01 p{line-height: 1.6; color: #333333;}
.practice-topic .box01 .desc{ margin: 20px 0 0; padding: 20px; background-color: rgba(0%,40%,60%,0.1); border-radius: 8px; line-height: 1.6; color: #333333;}
.practice-topic .box01 .pic { text-align: center;}
.practice-topic .box01 .pic img { margin: 15px 10px; }

.practice-topic .image ul{ display: flex; flex-direction:row; flex-wrap: wrap;  margin: 10px 0; }
.practice-topic .image li{ margin: 0 5px 5px 0; width: 100px; height: 100px; border: 1px solid #D5D5D5; overflow: hidden;}
.practice-topic .image li a{ display: block; }

/*申論批閱-提問*/
.correct-questions dl{ margin: 20px 0; padding:10px 25px; }
.correct-questions p{ margin: 0; font-size: 1rem; }

.correct-questions .image ul{ display: flex; flex-direction:row; flex-wrap: wrap;  margin: 10px 0; }
.correct-questions .image li{ margin: 0 5px 0 0; width: 100px; height: 100px; border: 1px solid #D5D5D5; overflow: hidden;}
.correct-questions .image li a{ display: block; }

/*提問回答-已批閱01*/
.correct-replied01{ border: 1px solid #00b8e6; border-radius: 8px; }
.correct-replied01 h3{ margin: 0; padding: 15px 20px; font-size: 1.1rem; font-weight: bold; color: #00b8e6; background-color: #f0fcff; border-bottom: 1px dashed #00b8e6; border-radius: 8px 8px 0 0; }
.correct-replied01>div{ padding: 15px 20px 0;}
.correct-replied01>div h4{ margin: 0; padding:0; font-weight: normal; line-height: 1.5; color:#666;}
.correct-replied01>div p{ margin: 10px 0 0;}

.correct-replied01 .image{ width: 100%; margin: 15px 0; padding: 0 20px;box-sizing: border-box;}
.correct-replied01 .image ul{ display: flex; flex-direction:row; flex-wrap: wrap; }
.correct-replied01 .image li{ margin: 0 5px 5px 0; width: 100px; height: 100px; border: 1px solid #D5D5D5; overflow: hidden;}
.correct-replied01 .image li a{ display: block; }

/*提問回答-尚未批閱02*/
.correct-replied02{ margin: 0; padding: 0; width: 100%; border: 1px solid #00b8e6; border-radius: 8px; box-sizing: border-box;}
.correct-replied02 h3{ margin: 0; padding: 15px 20px; font-size: 1.1rem; font-weight: bold; color: #00b8e6; background-color: #f0fcff; border-bottom: 1px dashed #00b8e6; border-radius: 8px 8px 0 0; }
.correct-replied02>div{ padding: 20px; }
.correct-replied02>div p{ margin: 0; padding: 0; }

/*提問回答-已退回03*/
.correct-replied03{ margin: 0; padding: 0; width: 100%; border: 1px solid #00b8e6; border-radius: 8px; box-sizing: border-box;}
.correct-replied03 h3{ margin: 0; padding: 15px 20px; font-size: 1.1rem; color: #00b8e6; background-color: #f0fcff; border-bottom: 1px dashed #00b8e6; border-radius: 8px 8px 0 0; }
.correct-replied03>div{ padding:20px;}
.correct-replied03>div h4{ margin: 0; padding: 0; line-height: 1.5; font-weight: normal; color:#ADADAD;}
.correct-replied03>div p{ margin: 10px 0 0; padding: 0; }

/*提問回答-已批閱01 影音*/
.correct-replied01 .sound{ width: 100%; margin: 15px 0; padding: 0 20px; box-sizing: border-box;}
.correct-replied01 .sound ul{ display: flex; flex-direction:row;}
.correct-replied01 .sound li{ margin: 0 5px 0 0; width: 100px; height: 100px; border: 1px solid #D5D5D5; overflow: hidden;}
.correct-replied01 .sound li a{ display: block; }

.correct-replied01 .sound-box{ display: none; width: 100%; position: fixed; bottom: 0; left: 0;right: 0;padding:15px 0;background:#838e9b;text-align: center;box-shadow: 0 0 4px rgb(0, 0, 0, 0.5);}
.correct-replied01 .sound-box audio{ width:85%; height: 30px;}
.correct-replied01 .sound-close{ position:absolute;top:5px;right: 5px;text-decoration: none;color: #fff;background: #333;border-radius: 99em;width:20px;height:20px;font-size: 14px;}


/*申論批閱-回應分類編輯區*/
.correct-edit{ margin: 20px auto; width: 100%; }
.correct-edit>div{ box-sizing: border-box;}
.correct-edit .keywords01{ width: 100%; padding: 10px 20px; background-color: #f4f6fa; border: 1px solid #e5e5e5; display: flex; justify-content: flex-start; }
.correct-edit .keywords01 p{ margin: 0; padding: 3px 0 0 0; font-size: 1em;}
.correct-edit .keywords01 a{ display: block; padding: 4px 0; width: 60px; text-align: center; background-color:#838e9b; color: #fff; border-radius: 5px;
							 text-decoration: none; }
.correct-edit .keywords01 a:hover{ background-color:#68717c;}

.correct-edit .keywords02{ margin: 20px 0; }
.correct-edit .keywords02 p{ margin: 0; padding: 0 20px; line-height: 1.6; }
.correct-edit .keywords02 p i{ color: #00b8e6;}

.correct-edit .classify-new{ width: 100%; padding: 10px 20px; background-color: #f4f6fa; border: 1px solid #e5e5e5; display: flex; justify-content: flex-start; }
.correct-edit .classify-new p{ margin: 0; padding: 3px 0 0 0; font-size: 1em; }
.correct-edit .classify-new a{ display: block; padding: 4px 0; width: 80px; text-align: center; background-color:#838e9b; color: #fff; border-radius: 5px;
							   text-decoration: none; }
.correct-edit .classify-new a:hover{ background-color:#68717c;}

.correct-edit .classify-edit{ margin: 0 auto; padding: 20px; width: 100%; border-bottom: 1px dashed #C7C7C7;}
.correct-edit .classify-edit:last-child{ border-bottom: 0px dashed #C7C7C7;}
.correct-edit .classify-edit>div{ width: 100%; padding: 5px 0; display: flex; justify-content: flex-start; }
.correct-edit .classify-edit>div p{ margin: 0; padding: 4px 0 0 0; font-size: 1em; font-weight: bold;}
.correct-edit .classify-edit>div a{ display: block; margin: 0 0 0 5px; padding: 4px 0; width: 60px; text-align: center; background-color:#838e9b; color: #fff; 
									border-radius: 5px; text-decoration: none; }
.correct-edit .classify-edit>div a:hover{ background-color:#68717c;}
.correct-edit .classify-edit h4{ margin: 0; padding: 0; font-weight: normal; line-height: 1.6;}

/*反應回報*/
.correct-reflection>div{ box-sizing: border-box;}
.correct-reflection .boxA{ margin: 0; padding: 20px; width: 100%; border: 1px solid #e5e5e5; background-color: #f4f6fa; border-radius: 8px;}
.correct-reflection .boxA h4{ margin: 0; padding: 0; font-size: 1.3rem; font-weight: bold; color: #0d48ab;}
.correct-reflection .boxA p{ margin: 0; padding: 10px 0; line-height: 1.4; }
.correct-reflection .boxA input{ appearance:none; -webkit-appearance:none;	margin: 5px 0 ;  width: 100%; border:1px solid #c1c1c1; box-sizing: border-box;
	display:block; font-size:15px; color:#4a617a; font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif;
	padding:5px; height:2.2em; border-radius: 5px; background-color: #ffffff;}
.correct-reflection .boxA ul{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}
.correct-reflection .boxA li:nth-child(1){ width: 89%; }
.correct-reflection .boxA li:nth-child(2){ width: 10%;}

.correct-reflection .boxB{ margin: 10px 0; width: 100%; }
.correct-reflection .boxB ul{ width: 100%;}
.correct-reflection .boxB li{ padding: 15px 0; border-bottom: 1px dashed #D5D5D5;}
.correct-reflection .boxB li h4{ margin: 0; padding: 0; font-size: 16px; font-weight: bold; line-height: 2; color: #00b8e6;}
.correct-reflection .boxB li p{ margin: 0; padding: 0 0 0 10px; font-size: 16px;}

/*返回上一頁*/
.correct-backbtn{ margin: 20px auto; width: 120px; height: 45px;	line-height: 45px; font-size: 1.1em; color: #ffffff; text-align: center; border-radius: 5px; background-color: #838e9b; font-weight: bold; }
.correct-backbtn a{ display: block; color: #ffffff; text-decoration: none; }

/*送出視窗-上傳批閱*/
.correct-popup01{ margin: 10px auto; padding: 30px 20px; width: 500px; background-color: #ffffff; display: flex; align-items: center; flex-wrap:wrap; border: 1px solid #C0C0C0; border-radius: 5px; box-sizing: border-box;}
.correct-popup01 .mainbox{ margin: 0 auto; text-align: center;}
.correct-popup01 h3{ margin: 0; padding: 0 0 10px 0; font-size: 1.3em;font-weight: bold; color: #0d48ab; }
.correct-popup01 p{ margin: 0; font-size: 16px; color: #3E3E3E; }
.correct-popup01 .radio{margin:20px 0 10px; text-align: left;}
.correct-popup01 .radio ul{ padding: 10px 0; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; overflow: hidden; }
.correct-popup01 .radio li{ margin:10px 0; font-size: 1rem; line-height: 1.7; }
.correct-popup01 .radio li div{ float: left;}
.correct-popup01 .radio li .left{ width: 5%;}
.correct-popup01 .radio li .right{ width: 95%;}

/*送出視窗-重要性與關鍵字編輯*/
.correct-popup02{ margin: 10px auto; padding: 0 20px; width:600px; height: 320px; background-color: #ffffff; display: flex; align-items: center; border: 1px solid #C0C0C0; border-radius: 10px; box-sizing: border-box;}
.correct-popup02 .mainbox{ width: 100%; }
.correct-popup02 h4{ margin: 0; padding: 0; font-size: 1em; }
.correct-popup02 .starscore{ width: 100%; padding: 10px 0; display: flex;}
.correct-popup02 .starscore ul{display: flex;align-items: center;}
.correct-popup02 .starscore ul li:last-child{width: auto;}
.correct-popup02 .starscore ul a{ margin: 0 10px 0 0; padding: 4px 0; color: #00b8e6;}
.correct-popup02 .starscore .clearStar{ display: block; padding: 4px 0; width: 85px; text-align: center; background-color: #ffffff; color: #000000; border-radius: 5px; text-decoration: none; border: 1px solid #AAAAAA;}
.correct-popup02 .starscore .clearStar:hover{ background-color:#f2f2f2;}
.correct-popup02 .mainbox textarea{ margin: 10px 0 0 0; padding:5px; width:100%; height: 80px; font-size:15px; color:#4a617a; font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif;  border:1px solid #ebebeb; border-radius: 5px; background-color: #f9f9f9; }

/*送出視窗-分類新增編輯*/
.correct-popup03{ margin: 10px auto; padding: 20px 30px 20px 20px; width: 500px; height: 300px; background-color: #ffffff; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; border: 1px solid #C0C0C0; border-radius: 5px; box-sizing: border-box;}
.correct-popup03 .mainbox{ width: 100%;}
.correct-popup03 .selectname{ clear: both; float: left; width: 13%; margin: 5px 0; padding: 10px 0; text-align: center;}
.correct-popup03 .selectmain{ float: right; width: 85%; margin: 5px 0;}
.correct-popup03 .selectmain select{ 	margin:0; padding:5px; outline:none; font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif;
	border:1px solid #CCC; width:100%; height:40px; font-size:1em; color:#333; background-color: #f9f9f9;}

/* footer */
footer {
  background: #0d48ab;
  overflow: hidden;
  width: 1024px;
  padding: 60px calc((100% - 1024px)/2) 40px calc((100% - 1024px)/2); }
  footer .head {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    footer .head a:nth-child(2) {
      text-decoration: none;
      background: #ffffff;
      color: #e60012;
      border-radius: 10px;
      padding: 10px 20px;
      font-size: 22px;
      font-weight: bold;
      width: 100%;
      margin-left: 5%;
      position: relative; }
      footer .head a:nth-child(2) i {
        position: absolute;
        right: 15px;
        color: #4a5158; }
  footer ul {
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0; }
    footer ul li {
      width: 23%;
      margin: 10px 1%;
      background: #3d6dbc;
      color: #fff;
      text-align: center;
      padding: 20px 5px;
      box-sizing: border-box;
      border-radius: 10px;
      line-height: 1.5;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 14px; }
      footer ul li p:first-Child {
        font-size: 24px;
        font-weight: bold; }
      footer ul li p {
        width: 100%; }
      footer ul li a {
        width: 60%;
        display: block;
        margin: 10px auto 0 auto; }
      footer ul li img {
        width: 100%; }
  footer > p {
    text-align: center;
    color: #fff; }

/* footer */


/* ========== other ========== */
@media (max-width: 1100px) {

  /* main */
  main { width: 96%; margin: 10px auto; }
  /* main */

  /* footer */
  footer {
    width: 100%;
    padding: 60px 0%; }
    footer .head {
      width: 98%;
      margin: 0 auto; }
    footer ul li {
      font-size: 13px; }
  /* footer */ }


/* ========== ipad ========== */
@media (max-width: 768px) {

/* ---------- 內容 ---------- */
/*批改練習挑戰(list)*/	
.practice .content{ padding: 15px;}
.practice-search select{ margin: 0 2px; width:29%;}	
.practice .way span{ width:42%;}
	
/*--- 批改練習挑戰 ---*/
.practice-form .box01{ padding: 2em ;}
.practice-form .box02{ padding: 1em 2em;}
.practice-form .box03{ padding: 0 2em;}
	
/*按鈕*/
.practice-form .advisory{ width:100%; margin: 0px auto 20px ; text-align:center; }
.practice-form .advisory li{ display:inline-block;}
.practice-form .advisory a{
	display:block; width:90px; height:40px; border-radius: 5px; border:1px solid #68717c;
	line-height:40px; color: #68717c; text-decoration: none; transition:.5s;
	}
.practice-form .advisory a:hover{ background-color:#68717c; color:#FFF;}
	
/*--- 批改練習挑戰題目 ---*/
.practice-topic{ padding: 2em ; }	

  /* footer */
  footer {
    width: 98%;
    padding: 60px 1%; }
    footer .head {
      justify-content: center; }
      footer .head a {
        margin-left: 2%; }
    footer ul li {
      padding: 10px; }
      footer ul li a {
        width: 70%; }
  /* footer */ }


/* ========== phone ========== */

@media (max-width: 767px) {
  /* header */
  header {
    padding: 15px 0;
    text-align: center; }
    header img {
      width: 80%; }

  /* header */
  /* nav */
  nav span {
    display: none; }
  nav ul {
    justify-content: space-around; }
    nav ul li {
      width: 20%; }
      nav ul li a {
        display: block;
        padding: 0;
        text-align: center;
        font-size: 5vw; }
  /* nav */
  /* main */
  main { width: 94%; }
  /* main */

/* ---------- 內容 ---------- */
	
/*批改練習挑戰*/
.practice .content{ padding: 20px; }
.practice-search select{ margin: 3px 0; width:100%; outline:none; border:1px solid #cccccc; font-size: 1rem; }
.practice-search input{ margin: 3px 0 0; width: 100%; height: 34px; background-color: #888; color: #FFFFFF; border:0; border-radius: 5px;font-size: 0.95rem; cursor:pointer;}	
	
.practice>ul{ flex-wrap: wrap; }
.practice>ul li{ width: 100%; margin: 5px 0;}
	
.practice .way { width: 100%; display: flex; flex-wrap: wrap; }
.practice .way span{ margin: 2px; padding: 10px 5px; background-color: #eeeeee; width:44%; font-size: 0.9rem; text-align: center; }
	
/*批閱-列表*/
.correct-qa h4 select{width:50%;}	
.correct-qa h5{ margin: 20px 0 10px; font-size: 0.85rem;}
.correct-qa dt{ font-size: 0.95em; }
	
/*--- 批改練習挑戰 ---*/
.practice-form .box01{padding:1.2em ;}
.practice-form .box01 li{ font-size: 0.92rem; }
.practice-form .box01 li a{ margin: 0 0 0 5px;}
.practice-form .box01 h3{ font-size: 1rem; line-height: 1.4; }
.practice-form .box01 .pic img { margin: 10px 0; }	
	
.practice-form .box02{padding:1.2em;}

.practice-form .box03{padding: 0 1.2em;}
.practice-form .box03 h3{ font-size: 1rem; color:#f00; }

/*時間段*/
.practice-form .period dl{ margin: 10px 0; padding: 15px; }
.practice-form .period dd{ justify-content: center;}
.practice-form .period span{ margin: 2px; padding:3px 5px;}
.practice-form .period a { margin: 2px; padding:3px 5px;}
	
/*按鈕*/
.practice-form .advisory{ width:100%; margin: 20px auto; }
.practice-form .advisory a{	width:80px; height:36px; line-height:36px; font-size: 0.95rem;}	
	
/*上傳圖片檔案*/
.consultation-form-img ul{ flex-wrap: wrap; }
.consultation-form-img li{ margin: 0 5px 5px 0; width: 75px; height: 75px; flex-wrap:wrap; }

/*送出視窗-獎項*/
.practice-confirm{ width: 100%; }
	
/*--- 批改練習挑戰題目 ---*/
.practice-topic {padding:1.2em;}
.practice-topic .box01 .main{ margin: 0 0 10px; overflow: hidden;}
.practice-topic .box01 .left{ float: none;}	
.practice-topic .box01 .left li{ font-size: 0.92rem; }
	
.practice-topic .box01 .right{ float: none; width: 100%; }
.practice-topic .box01 .awards { margin: 20px auto 10px; width: 110px; }	
.practice-topic .box01 .right i{
	display: flex;  align-items: center; justify-content: center; height: 100px; background-color:#FF6600; border-radius: 10px 10px 0 0; 
	font-size: 4.5rem; color: #FFFFFF; }
.practice-topic .box01 .right h2{
	margin: 0; padding: 5px 10px; border-radius: 0 0 10px 10px; border: 1px solid #FF6600; background-color:#FFFFFF; 
	font-size: 1.05rem; font-weight: bold; text-align: center; color: #FF6600;
    }		
.practice-topic .box01 h3{ margin: 10px 0; font-size: 1rem; line-height: 1.4;}
.practice-topic .box01 .pic img { margin: 10px 0; }	
.practice-topic .image li{ margin: 0 5px 5px 0; }

/*申論批閱-提問*/
.correct-questions dl{ padding:0 20px 0; }
.correct-questions .image li{ margin: 0 5px 5px 0; }

/*提問回答-已批閱01 影音*/
.correct-replied01 .sound ul{ flex-wrap: wrap;}
.correct-replied01 .sound li{ margin: 0 5px 5px 0; }	
	
/*反應回報*/
.correct-reflection .boxA li:nth-child(1){ width: 100%; }
.correct-reflection .boxA li:nth-child(2){ width: 30%;}	
	
/*送出視窗-上傳批閱*/
.correct-popup01{ width: 96%;}
.correct-popup01 .radio li{ font-size: 0.95rem; line-height: 1.5; }
.correct-popup01 .radio li .left{ width: 8%;}
.correct-popup01 .radio li .right{ width: 92%;}
	
/*送出視窗-重要性與關鍵字編輯*/
.correct-popup02{ width: 96%;}
	
/*送出視窗-分類新增編輯*/
.correct-popup03{ width: 96%;}
	
/* 內容 */
	
  /* footer */
  footer {
    padding: 20px 1%; }
    footer .head {
      flex-wrap: wrap; }
      footer .head img {
        width: 100%;
        margin: 0 auto 10px auto; }
      footer .head a {
        font-size: 5vw;
        padding: 8px 20px;
        width: 80%;
        margin: 0 auto; }
      footer .head a:nth-child(2) {
        margin-left: 0;
        font-size: 5vw;
        padding: 8px 10px; }
    footer ul {
      flex-wrap: wrap;
      justify-content: space-around; }
      footer ul li {
        width: 47%;
        margin-bottom: 10px;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        background: none;
        border-bottom: 1px dashed #fff;
        border-radius: 0;
        padding: 10px 0 20px 0;
        box-sizing: border-box; }
        footer ul li p:first-child {
          width: auto;
          font-size: 6vw;
          width: 100%; }
        footer ul li p {
          width: 100%;
          font-size: 14px; }
        footer ul li a {
          width: 50%;
          margin: 0;
          margin-top: 5px;
          display: block; }
    footer > p {
      line-height: 1.2;
      width: 98%; }

  /* footer */ }