*{transition:all 0.3s}
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
html, body {
	height: 100%;
	margin: 0 auto;
	background-color: #F2F2F2;
/*	text-align: center;*/
/*word-wrap:break-word;/*只對英文起作用，以單字作為換行依據*/
}
body, input, button, select {
  font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif; 
}
body a {
    transition: color 0.3s ease;
	text-decoration: none;
}

#BodyContainer {
	margin: 0 auto;
	min-height: 67%;
	background-color: #FFF;
/*	text-align: center;*/
}

/*Header*/
#BodyHeader {
	background-color: #FF9C00;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-wrap: wrap;/*自動換行*/
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
    padding:0 3rem;
    align-items:center
}
#BodyHeader a {
	text-decoration: none;
}
#BodyHeader #logo { /* LOGO */
	padding:0;
}

#BodyHeader #search { /* 搜尋框 */
	margin: 0 1em;
	padding-top: 0.55em; /*1em*/
	flex: 3;
	-ms-flex: 3;
	-webkit-flex: 3;
	text-align: left;/*right;*/
}
#BodyHeader #search2 {/* Mobile版用 */
	display: none;
}
#search input {/* 搜尋輸入框 */
	background-color: #FFF;
	border: 3px solid #c9c9ce;
	border-bottom-left-radius: 0.5em;
	border-top-left-radius: 0.5em;
	color: #666;
	font-size: 1em;
	padding: 0.4em 0.2em;
	vertical-align: middle;
}
#search button {/* 搜尋GO */
	background-color: #F2F2F2;
	border-left: 0px solid #A6A6A6;
	border-bottom: 3px solid #c9c9ce;
	border-right: 3px solid #c9c9ce;
	border-top: 3px solid #c9c9ce;
	border-bottom-right-radius: 0.5em;
	border-top-right-radius: 0.5em;
	color: #666;
	cursor: pointer;
	font-size: 1em;
	padding: 0.4em 0.3em;
	vertical-align: middle;
}

#BodyHeader #login, #BodyHeader #join {/* 登入/註冊 */
	margin-top: 20px;
	margin-right: 10px;
}
#BodyHeader #login a {
	background-color: #1F497D;
	border-radius: 20px;
	border: 3px solid #4f79af;
	color: #FFF;
	padding: 6px 30px;
}
#BodyHeader #join a {
	color: #FFF;
	padding: 6px 30px;
}
#BodyHeader #join a:hover {
	text-decoration: underline;
}
#BodyHeader #account {
    color: #FFF;
    text-align: center;
    margin-right: 10px;
    z-index: 99;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-wrap: nowrap;/*不自動換行*/
	-ms-flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
    justify-content: flex-end;
}
/* dropmenu BEGIN */
/*#account .my {position: absolute;right:20px;}*/
#account .nav-head a {
	color: #FFF;
}
#account .nav-content {
	display: none; /* 隱藏功能表 */
    z-index: 99;
}
#account:hover .nav-content {
	z-index:999;
	display: block; /* 解除隱藏功能表 */
	position: absolute; /* 讓子選單浮在上層，不會把下面元素往下擠 */
	margin-top:13px;
	margin-right:28px;
    align-self:flex-start;
}
.nav-head:nth-child(2) a{
    background-color: #1F497D;
    border-radius: 20px;
    border: 3px solid #4f79af;
    color: #FFF;
}
.nav-head a[title]{
    background-color: #1F497D;
    border-radius: 20px;
    border: 3px solid #4f79af;
	width: 100px;
    padding: 7px 8px;		
}
.nav-content li {/* 子選單樣式調整 */
	background-color: #f7f7f7;
	border-top: 1px solid silver;
	list-style: none;
	/*	margin-left:-12em;*/
	text-align: left;
	white-space: nowrap;
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8
}
.nav-content li:hover {
	background-color: #1F497D;
}
.nav-content li.litop {/* 裝飾角 */
	background-color: rgba(0,0,0,0);
	border-top: 0;
	text-align: center;
	margin-bottom: -0.5em;
	margin-top: -1em;
	border-left: 0px;
	border-right: 0px
}
.nav-content li.bordetop { /* 子選單上圓角 */
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8
}
.nav-content li.borderbottom {/* 子選單下圓角 */
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8
}
.nav-content li a {
	color: #000;
	display: block;
	padding: 0.5em 1em;
}
.nav-content li a:hover {
	color: #FFF;
}

@media (max-width:767px) {
.nav-head a[title]{
    padding: 3px 8px;	
	font-size: 0.9em;
}

#account:hover .nav-content {
	margin-top:7px;
}

#account:hover .nav-content {
	margin-left:-90px
}

@media (max-width:610px) {
	#QRkmfilelist .fileimg img{margin: 8px 8px 0;	}
	#QRkmfilelist .content{width:85%;}
}

@media (max-width:609px) {
	#QRkmfilelist .fileimg img{margin: 8px 8px 0;	}
	#QRkmfilelist .content{width:80%;}
}

@media (max-width:449px) {
	#QRkmfilelist .fileimg img{margin: 8px 8px 0;	}
	#QRkmfilelist .content{width:74%;}
}

}
@media (max-width:320px) {
#BodyHeader #logo { width:180px; padding-left:0;}
}
@media (min-width:768px) and (max-width:991px) {
#account:hover .nav-content {
	margin-left:-75px
}
}
/* dropmenu END */
@media screen and (max-width: 767px) {

#BodyHeader {
	padding:0;
    display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: space-between;	 /*分散對齊*/
}
/*	#BodyHeader #logo { /* LOGO */
		/*flex: 1;
		-ms-flex: 1;
		-webkit-flex: 1;
	}
	#BodyHeader #logo img {
		width: 180px;
	}*/
#BodyHeader #search {
	display: none;
}
#BodyHeader #search2 {
	display: block;
	margin-top: 0.5em;
	padding-right: 0.25em;
}
#BodyHeader #login, #BodyHeader #join {/* 登入 */
	margin:17px 10px 0 0;
}
#BodyHeader #login a {
	background-color: #1F497D;
	border-radius: 0.5em;
	border: 3px solid #4f79af;
	color: #FFF;
	padding: 6px 10px;
	text-decoration: none;
}
#BodyHeader #join a {
	color: #FFF;
	padding: 6px 10px;
}
#BodyHeader #account {
	font-size: 1em;
	margin: 0 10px;
    width:85px;
}
}
#BodyMenu {
	font-size: large;
	background-color: #47aad4;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: center;	 /*水平軸置中*/
	transition-property: background-color;
	-ms-transition-property: background-color;
	-webkit-transition-property: background-color;
	height:auto;
}
#menuitem1, #menuitem2, #menuitem3, #SearchMine {
	padding: 0.4em 1em;
}
#SearchMine {
	width:100%;
	background-color: #1F497D;
	text-align:center
}
#BodyMenu a {
	color: #FFF;
	font-size: large;
	text-decoration: none;
}
#menuitem1:hover, #menuitem2:hover, #menuitem3:hover, #BodyMenu .selected {
	background-color: #FF9C00;
}
#SearchMine input {/* 搜尋輸入框 */
	background-color: #5c7a9f;
	border: 0px solid #A6A6A6;
	color: #FFF;
	font-size: 1em;
	padding: 0.3em 0.5em;
	vertical-align: middle;
}
#SearchMine button {/* 搜尋GO */
	background-color: #acbacb;
	border-left: 0px solid #A6A6A6;
	border-bottom: 0;
	border-right: 0;
	border-top: 0;
	border-bottom-right-radius: 0em;
	border-top-right-radius: 0em;
	color: #1f497d;
	cursor: pointer;
	font-size: 1em;
	padding: 0.3em 0.3em;
	vertical-align: middle;
}
#SearchPage {background-color: #4f79af; color:#fff; text-align:center; padding:8px; width:95.5%; margin:0 auto; box-shadow: 0 5px 5px rgba(0,0,0,0.3);} 
#SearchPage input[type=text] {/* 搜尋頁面內容 */
	color: #1F497D;
	padding: 0 10px;
	vertical-align: middle;
    width:200px;
    height:32px;
    font-size: 1em; 
}
#SearchPage input[type=button] {/* 搜尋GO */
	padding: 0 15px;
	vertical-align: middle;
    height:36px;
    border:0 solid #acbacb;
	background-color: #acbacb;
	color: #1f497d;
	cursor: pointer;
    font-size: 1em; 
}
#SearchPage ::placeholder {
  color: #5c7a9f;
  opacity: 1; /* Firefox */
}

#SearchPage :-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #5c7a9f;
}

#SearchPage ::-ms-input-placeholder { /* Microsoft Edge */
 color: #5c7a9f;
}
abbr[data-index] { text-transform: lowercase;}
#clearSearchResult { display:none; padding:8px 12px; background-color: #f39800;	color: #ffffff; text-decoration:none; width:95%;margin:0 auto 25px; text-align:center;}
#searchTitle { color: #f39800; display:none;}
#BodyContent {
}
#BodyContentMain {
	text-align: left;
}
#BodyContentMainNavigator {
	padding: 0.75em 3.5%;
	line-height:150%;
}

#BodyContentMainNavigatorKMFile {
padding:0.75em 1% 0.2%;
line-height:150%;
}

#BodyContentMainNavigator a , #BodyContentMainNavigatorKMFile a {
	color: #999;
	text-decoration: none;
	text-align: left;
}
#BodyContentMainNavigator a:hover , #BodyContentMainNavigatorKMFile a:hover {
	color: #1f497d;
}
#BodyContentMainNavigator .Last, #BodyContentMainNavigatorKMFile .Last {
    width:97%;
    margin:1em auto 0;
	font-weight: bold;
	color:#FF9C00; 
	font-size:1.2em;
}

#BodyContentMainNavigator .Last span, #BodyContentMainNavigatorKMFile .Last span {
    width:97%;
    margin:1em auto 0;
	font-weight: bold;
	color:#FF9C00;
}

#BodyContentMainNavigator .Last a, #BodyContentMainNavigatorKMFile .Last a {
    width:97%;
    margin:1em auto 0;
	font-weight: bold;
	color:#FF9C00;
}

/*#BodyContentMainNavigator .Last a:first-child { color:#000;}
#BodyContentMainNavigator .Last a:not(:first-child) { color:#FF9C00; font-size:1em;}*/
#BodyContentMainNavigator .Last a:only-child, #BodyContentMainNavigatorKMFile .Last a:only-child { color:#000;}
#BodyContentMainNavigator .Last a:not(:first-child):before, #BodyContentMainNavigatorKMFile .Last a:not(:first-child):before { content:url(../image/navigator.gif); display:inline-block;}
#BodyContentMainNavigator .Last a:hover, #BodyContentMainNavigatorKMFile .Last a:hover {color:#1F497D;}

.ChapterPath {
/*	line-height: 60px;
	height: 60px;*/
	margin: 0.75em 0.25em 0.75em 0.5em;

}
.ChapterPath a {
	text-decoration:none;
	color:#4f79af;
}
.ChapterPath a:hover {
	color:#ff9c00;
}

.matchResult {
	font-weight: bold;
	color: #1f497d;
    margin:40px auto 15px;
    text-align:left;
}
#BodyContentMainNavigator #aud {/*線上試聽 */
	padding: 0.5em;
}
/*#BodyContentMainNavigator .Last::before {
	content:url(../Image/navigator.gif);
}*/
#BodyContentMainDetail {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-wrap: wrap;/*box自動換行*/
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: center; /*水平置中*/
}

/*無搜尋結果-導購KMFileCheck.aspx case else*/
#noResult { margin:40px auto 25px; padding:12px 20px; color:#7F7F7F; border-radius:12px; border:1px solid #dcdcdc}

#promote {text-align:center;padding:1em 10px; border-top:2px solid #ff9c00; background-color:#ffffff;}

  #promote .viewChapter { display:block; padding:8px 0; background-color:#f2f2f2; color:#4f79af; text-decoration:none; width:100%;height:27px; margin:2px 0; float:left}
  #promote .BuyNow { color:#ffffff; background-color:#FF9C00;
    background: linear-gradient(-45deg, #FF9C00, #E73C7E, #23A6D5, #23D5AB);}
    #promote .BuyNow img {vertical-align:middle; }
  #promote .askMore { background-color:#2ec07d; color:#ffffff;}
a.descript {text-decoration: none; }
a.descript > div {font-size:14px; color:#414042; line-height:18px; display:block;text-align:center; margin-right:16px; }
  #promote a:hover { background-color:#F97C00!important; color:#fff; text-decoration:none;}

@media screen and (max-width:1199px) {/*pad*/
#promote .viewChapter { width:100%;}/*???*/
}


/* ClassBox.aspx 課程列表 / List.aspx 第一段 */
#BodyContentMainDetail .box {
	border: 1px solid #E0E0E0;
	margin: 1em;
	width:300px;
} 
#BodyContentMainDetail .box a {
	color: #000;
	text-decoration: none;
}
.box .imgs {/* 課程圖片 */
	height: 168px;
	overflow: hidden;
}

/*封面圖高度自動*/
.box .imgs img {
  max-width:100%;
  height:auto;
  width:100%;
  display:block;
}

/*封面圖333*160高度全秀*/
/* 課程圖片 */
/*
.box .imgs img {
  max-width:100%;
  max-height:100%;
  width:100%;
  display:block;
}
*/
.box .imgs .show { /* 知識檔數量訊息 */
	background-color: rgba(0, 0, 0, 0.8 );
	color: #FFF;
	display: none;
	height: 160px;
	width: 240px;
}
.box .imgs .show p {
	color: #FFF;
	list-style-type: none;
	line-height:160px;
	padding: 0.5em;
	margin-top: 0em;
	text-align:center;
}
.box .imgs:hover .show {
	display: block;
	margin: -245px 0;
}
.box:hover .imgs img {
	opacity: 0.3;
}
.box .title {/* 課程標題 */
	font-size: large;
	font-weight: bold;
	margin: 0.25em 0.25em 0.5em 0.5em;
	height: 3em;
}
.box .author {/* 課程師資 */
	/*color: #f08300;
	font-size: large;
	font-weight: bold;*/
	color: #7F7F7F;
	margin: 0.25em 0.6em;
}
.box .notes { /* 課程簡介 */
	color: #7F7F7F;
	margin: 0.7em 0.6em;
}
.box .PDdetail { /* 課程更多介紹 */
	margin: 0.2em 0.6em;
}
.box .flex-end {/* 課程box底部切版 */
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: space-between;
	margin: 1em 0.75em 0.25em 0.25em;
}
.flex-end { /* 觀看次數 */
 color: #808080;
}
.flex-end .sales { /* 開啟 */
	/*	background-color: #FF9C00;
	color: #FFF!important;*/
	padding: 0 0 0.5em 0.5em;
	margin: 0 auto;
}
.flex-end .audition { /* 試聽 */
	/*	background-color: #FF9C00;
	color: #FFF!important;*/
	padding: 0.5em 0 0.5em 1em;
}
#BodyContentMainDetail .box-QR {
	border: 3px double #E0E0E0;
	-webkit-box-shadow: 3px 3px #f1f1f1;
	-moz-box-shadow: 3px 3px #f1f1f1;
	box-shadow: 3px 3px #f1f1f1;
}
.box-QR .imgs img { z-index:0 }
.box-QR .QRMark { position:relative; background:url(../Image/ico_QR.png) right no-repeat; width:100%; height:49px; margin-top:-49px }
.box-QR:hover .imgs{position:relative;}
.box-QR:hover .imgs:before { content:"請對照講義或課本閱讀"; width:100%;text-align:center; color:#fff;background-color:#1F497D; position:absolute;bottom:0;}

@media screen and (max-device-width: 480px) {
.box .flex-end {/* 課程box底部切版 */
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-wrap: wrap;/*box自動換行*/
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: center; /*水平置中*/
	margin: 1em;
}
}
/* List.aspx */
#BodyContentMainDetail .accordionPart > .list {/* 為了讓chapter和KM不wrap */
	width: 100%;
}
.list .chapterlist{/* Chapter 層 */
	background-color: #F2F2F2;
	border-bottom: 1px solid #E0E0E0;
	border-right: 1px solid #E0E0E0;
	border-top: 1px solid #E0E0E0;
	border-left: 5px solid #FF9C00;
	cursor: pointer;
	line-height: 1.8;
	margin-bottom: -1px;
	padding: 1em;
}
.list .chapterlist.bold { background: rgb(242,242,242);
background: linear-gradient(30deg, rgba(250,250,250,1) 50%,  rgba(242,242,242,1) 95%);}
.list .chapterlist.bold:after {content:URL(../Image/ico_next.gif);color:#939393; float:right}
.list a:hover .chapterlist.bold{color:#FF9C00;background: rgb(252,252,252);}
.list .KMlist {/* KM層 */
	/*background-color: #F2F2F2;*/
	border-bottom: 1px solid #E0E0E0;
	border-right: 1px solid #E0E0E0;
	border-top: 1px solid #E0E0E0;
	border-left: 5px solid #1F497D;
	cursor: pointer;
	line-height: 1.8;
	margin-bottom: -1px;
    margin-left:2em;
	padding: 1em;
}
#BodyContentMainDetail .list a {
	color: #000;
	text-decoration: none;
}
/* chapter.aspx 科目選單頁 */
#BodyContentMainDetail #chapter {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: center;
	flex-wrap: wrap;/*accordionPart自動換行*/
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	width: 100%;
}
#chapter .right  { padding:10px; width: 90%; text-align:right; margin-top:-20px;}

#chapter .accordionPart { /*選單寬高度 */
	line-height: 1.8;
	width: 90%;
}
.coming {/*即將開課*/
  text-align:center;
  font-size:1.25em;
  color:#acbacb;
  height:64px;
  line-height:64px;
  vertical-align:middle;
  background:url(../Image/blockquote.png) no-repeat center;
}

#chapter .accordionPart ul.content {/*隱藏所有子選單 以及設定子選單之margin*/
	display: none;
	margin: 0;
}
#chapter .accordionPart div.content {/*QRCode Book使用*/
	display: none;
	margin: 0;
}

.accordionPart li {
	border-right: 1px solid #E0E0E0;
	border-top: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
	list-style-type: none;
	margin-bottom: -1px;
}
/* Chapter 層 */
.accordionPart .menu, .accordionPart .chapterlist {
	background-color: #F2F2F2;
	border-bottom: 1px solid #E0E0E0;
	border-right: 1px solid #E0E0E0;
	border-top: 1px solid #E0E0E0;
	border-left: 5px solid #FF9C00;
	cursor: pointer;
	margin-bottom: -1px;
	padding: 1em;
    font-weight:bold;
}
.accordionPart .menu:hover, .accordionPart .submenu:hover, .accordionPart .content_chapter:hover, .accordionPart .chapterlist:hover {
	background-color:#F6F6F6;
}

.accordionPart .submenu {
	cursor: pointer;
}
.accordionPart li.content_km {
	border-left: 5px solid #FF9C00;
	padding: 1em;
}
.accordionPart li.content_chapter {/* KM層 */
	border: 1px solid #E0E0E0;
	border-left: 5px solid #1F497D;
	padding: 1em;
	margin-bottom: -1px;
}

/*#searchResult */
/*以下css未用??*/
#searchResult .accordionPart.related div {
   display:flex;
   flex-wrap: wrap;
   align-items: center;
   width: 100%;
}
#searchResult .accordionPart.related div a { width:50%;}

#searchResult .accordionPart.related .chapterlist {
  background-color: #f1f3f4;
  border: 0px solid #FF9C00;
  border-radius: 30px;
  cursor: pointer;
  padding: 0.5em;
  margin: 0.5em;
  display: flex;
  flex-wrap: nowrap;
}
#searchResult .accordionPart.related .chapterlist > img { padding:0 10px;}
#searchResult .accordionPart.related .chapterlist span {display:flex; width:100%; padding:0 0 5px; font-size:14px; color:#999; font-weight:normal; line-height:1}

.accordionPart .KMlist {/* KM層 Search List*/
	border: 1px solid #E0E0E0;
	border-left: 5px solid #1F497D;
	padding: 1em;
	margin-bottom: -1px;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    text-align:left;
}
.accordionPart .KMlist div span {display:flex; padding:0 0 5px; font-size:14px; color:#999; font-weight:normal; line-height:1}

.accordionPart .KMFilelist {/* KMFile Search List */
	/*background-color: #f0f0f0;
	border-left: 5px solid #FF0000;
	border-bottom: 1px solid #FFF;*/
	padding: 6px;
    display: flex;
    width: 100%;
    border: 1px solid #E0E0E0;
    margin-bottom:-1px;
    color: #000;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    text-align:left;
    font-weight:bold;
}
.accordionPart .KMFilelist > img { max-width:100%; height:auto;width:80px;margin-right:0.5em;}
.accordionPart .KMFilelist div { width:auto;}
.accordionPart .KMFilelist div span {display:flex; padding:0 0 5px; font-size:14px; color:#999; font-weight:normal; line-height:1}
.accordionPart .KMFilelist div span img { height:12px;}
.accordionPart a {
	color: #000;
	text-decoration: none;
}
.accordionPart .list a:hover .KMlist,.accordionPart .KMlist:hover,.accordionPart .KMFilelist:hover { background-color:#f5f5f5;}
.viewMyCoursera {background-color: #1F497D; border-radius:10px; padding:10px 15px; font-size:20px; color:#ffffff!important; font-weight:bold; text-align:center; width:300px; display:block; margin:0 auto;}

/* KMFileList.aspx KMFile列表 detail.aspx */
#BodyContentMainDetail .kmfile, #RecordList .kmfile {
	border: 1px solid #E0E0E0;
	cursor: pointer;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	line-height: 1.8;
	padding: 1em 0.2em;
	width: 96%;
	margin:0 auto -1px auto;
}
#BodyContentMainDetail .kmfile2 {
	cursor: pointer;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	line-height: 3;
	padding: 1em 0.2em;
	width: calc(100%-0.2em);
	margin:0 auto -1px auto;	
}
#oMediaTable td {border-bottom: 1px solid #E0E0E0;}
/* 為了超連結的調整 */
#BodyContentMainDetail #kmfilelist {
	width: 90%;
	padding-bottom:1em
}
#BodyContentMainDetail #kmfilelist ul {
	margin: 0;
}
#BodyContentMainDetail #kmfilelist, #BodyContentMainDetail #kmfilelist li {
	padding:0;
	list-style-type: none;
}
#BodyContentMainDetail #kmfilelist li a ,#oMediaTable td span a{
	color: #000;
	text-decoration: none;
}
/* 為了超連結的調整 END */
#BodyContentMainDetail .done { /* 已觀看過 */
	background-color: #F2F2F2;
}
/*#BodyContentMainDetail .kmfile:hover, #BodyContentMainDetail .done:hover, .odd:hover, .even:hover{
	background-color: #ececec;
}
*/
#BodyContentMainDetail .kmfile:hover, #BodyContentMainDetail .done:hover, .odd:hover, .even:hover{
	background-color: #ececec;
}

/* #BodyContentMainDetail .kmfile:hover .maru,#BodyContentMainDetail .done:hover .maru {
	color:#FFF;
} */
.kmfile .fileimg,.kmfile2 .fileimg { /* KMFileType圖示 */
	margin-left: 1em;
	margin-right: 1em;
}

.kmfile .progress {/* 進度圖示 */
	margin-left: 1em;
	margin-right: 2em;
}
.kmfile .content,.kmfile2 .content  { /* 中欄 */
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: center; /*水平置中*/
	flex-wrap: wrap;/*box自動換行*/
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex: 18;
	-ms-flex: 18;
	-webkit-flex: 18;
}

.kmfile .content .title,.kmfile2 .content .title { /* sFileTitle */
	font-size: large;
	font-weight: bold;
	line-height: 1.5;
	width: 100%;
}
.kmfile .content .iD, .kmfile .content .iF,.kmfile2 .content .iD, .kmfile2 .content .iF { /* 困難度 & 常考 */
	width: 50%;
}
.maru {/* 常用、困難的幾顆圈圈 */
	color: #FF9C00;
}
.kmfile .author,.kmfile2 .author  { /* 師資 */
	color: #666;
	flex: 2;
	-ms-flex: 2;
	-webkit-flex: 2;
	font-size: large;
	margin: 0.7em;
}
@media screen and (max-device-width: 480px) {
	#BodyContentMainDetail .kmfile {
		padding: 0.5em;
		width: 95%;
	}
	#BodyContentMainDetail .kmfile2 {
		padding: 0.5em;
		width: 70%;
	}
	#BodyContentMainDetail #kmfilelist {
		margin: 0.5em 0 1em 0;
		width: 99%;
	}
	#BodyContentMainDetail #kmfilelist ul {
		margin-left: -2.5em;
	}
	.kmfile .fileimg,.kmfile2 .fileimg {
		flex-basis: 4em;
		-ms-flex-basis: 4em;
		-webkit-flex-basis: 4em;
		margin: 0;
	}
	.kmfile .fileimg img {
		width: 80%;
	}
	.kmfile2 .fileimg img {
		width: 500%;
	}

	.kmfile .progress {
		flex-basis: 1.5em;
		-ms-flex-basis: 1.5em;
		-webkit-flex-basis: 1.5em;
		margin: 0;
	}
	.kmfile .progress img {
		width: 50%;
	}
	.kmfile .author,.kmfile2 .author {
		display: none;
	}
	.kmfile .content .iD, .kmfile .content .iF,.kmfile2 .content .iD, .kmfile2 .content .iF {
		font-size: smaller;
	}
	.kmfile .content,.kmfile2 .content {
	 flex:30;
	 -ms-flex:30;
	 -webkit-flex: 30;
	}
}
/* Record.aspx 我的紀錄 */
#SubjectMenu { /* 科目下拉選單 */
	font-size: large;
	font-weight: bold;
	margin-bottom: 1em;
	padding:0 0.5em 1em;
	width: 100%;
	text-align:center;
	border-bottom:1px #d8d8d8 dashed
}
#SubjectMenu select {
	-moz-border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	border-radius: 0.3em;
	font-size: large;
	padding: 0.3em;
	width: 23em;
	border: 2px solid #E0E0E0;
}
#BodyContentMainDetail #Record {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: center; /*水平置中*/
	align-content: flex-start;
	width: 100%;
}
#Record #RecordMenu { /* 紀錄選單 */
	flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	margin-left: 1em;
	margin-right: 1em;
	padding: 0 1em 1em;
}
#RecordMenu a {
	color: #000;
	text-decoration: none;
}
#RecordMenu .MenuHead {
	border-bottom: 1px solid #d8d8d8;
	color: #ababab;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 1.5;
	margin: 0 lem 0.5em;
	padding-top:15px
}
#RecordMenu .MenuBody {
	background-color: #e9e9e9;
	cursor: pointer;
	font-size: large;
	line-height: 2.5;
	margin: 0.5em lem;
	text-align: center;
	border-bottom: 1px solid #d8d8d8;
}
#RecordMenu .MenuBody:hover, #RecordMenu .selected {
	color: #F08300;
	background-color:#FFF;
	font-weight:bold;
	border-left: 4px solid #F08300
}
#RecordMenu .MenuBody .Rarrow {
	display: none;
}
#Record #RecordList { /* 紀錄列表 */
	flex: 5;
	-ms-flex: 5;
	-webkit-flex: 5;
}
@media screen and (max-device-width: 480px) {
	#SubjectMenu select {
		font-size: large;
		width: 13em;

	}
	#BodyContentMainDetail #Record {
		flex-direction: column;/*DIV排直排*/
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
	}
	#Record #RecordMenu {
		display: flex;
		display: -webkit-flex;
		display: -ms-flex;
		justify-content: center; /*水平置中*/
		align-items: center;
		margin: 1em 0;
		padding: 0;
	}

	#RecordMenu .MenuHead {
		text-align: right;
		vertical-align:bottom;
		border-bottom: 0px;
		font-size: 0.75em;
		line-height: 1;
		margin:0 0.25em 0 0.5em;
		padding-bottom:0px;
		width:2em
	}
	#RecordMenu .MenuBody {
		padding: 13px 0.5em;
		line-height: 1.25;
		font-size:1em;
		margin: 0.5em lem;
		border-left: 1px solid #d8d8d8;
	}
	#RecordMenu .MenuBody:hover, #RecordMenu .selected {
		border-top: 4px solid #F08300;
		border-left: 1px solid #d8d8d8;
		border-right: 1px solid #d8d8d8;
		border-bottom: 1px solid #fff;
	}


}
/* detail頁 KMFile內容 主架構 */
#BodyContentMainDetail #Detail {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: center; /*水平置中*/
	align-content: flex-start;
	width: 100%;
}
#Detail #TabMenu, #Detail #globalMenu {
	order: 2;
	-ms-order: 2;
	-webkit-order: 2;
	flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
}
#globalMenu .title img{/*右側選單*/
max-height:1.7em;
/*文繞圖垂直置中*/
 vertical-align:middle;
}
#Detail #TabMenu #CloseMenu { display:none;}
/* TabMenu BEGIN */
#TabMenu.news_tab {
	clear: left;
	margin: 1em 0;
}
#TabMenu ul, #TabMenu li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#TabMenu ul.tabs {
	height: 52px;
}
#TabMenu ul.tabs li {
	background-color: #d1d1d1/*#FF9C00*/;
	float: left;
	height: 52px;
	line-height: 52px;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 50%;
}
#TabMenu ul.tabs li a {
	color: #FFF;
	display: block;
	padding: 0 0.5em;
	text-decoration: none;
}
#TabMenu ul.tabs li a:hover {
	background-color: #f7f7f7;
	color: #ccc;
}
#TabMenu ul.tabs li.active {
	background-color: #fff;
	color: #000;
}
#TabMenu ul.tabs li.active a {
	color: #000;
}
#TabMenu ul.tabs li.active a:hover {
	background-color: #f7f7f7;
	color: #ccc;
}

#TabMenu .news_tab #tab1 > .iF, #TabMenu .news_tab #tab1 > .iD { display:inline-block;}
#TabMenu .news_tab #tab1 > .iF { padding-left: 1em; width:calc(51% - 1em);}
#TabMenu .news_tab #tab1 > .iD { width:45%;}
#TabMenu .news_tab .times img {
  vertical-align:middle;
}
/* Tab2 筆記區 */
#TabMenu .button {
	background-color: #799ecb;
	border-radius: 0.3em;
	border: 3px solid #a5c1e4;
	color: #FFF;
	cursor: pointer;
	margin: 1em 0.5em;
	padding: 0.5em 0.5em;
	text-align: center;
}
#TabMenu .button a {
	color: #FFF;
	text-decoration: none;
}
/* Tab1 檔案資訊 */
.tab_container { line-height:1.7 }
#tab1 {
	/*padding-left: 1em;*/
}
#tab1 > .author { /* 老師 */
	font-size: large;
	font-weight: bold;
    width:calc(51% - 1em);
    display:inline-block;
    padding-left: 1em;
}
#tab1 .times { width:45%; display:inline-block;font-size:0.9em;}
#tab1 >.author, #tab1 .times { line-height: 48px; } 

#tab1 .dateEnd { /* 播放期限、觀看次數 */
 margin: 1em auto;
}
#tab1 #updown { /* 上一個/下一個 */
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: center; /*水平置中*/
}
#updown .up:before {
	content: "< ";
}
#updown .down:after {
	content: " >";
}
#updown a {
	background-color: #799ecb;
	color: #FFF;
	font-size: large;
	font-weight: bold;
	margin: 0.2em;
	padding: 0.5em;
	text-decoration: none;
	border-radius: 0.5em;
}
#tab2 textarea {
	height: 350px; /* 筆記欄高度 */
	width: 90%;
    margin: 0.5em auto 0;
}
/* TabMenu END */
#Detail #player {
	flex: 4;
	-ms-flex: 4;
	-webkit-flex: 4;
	order: 1;
	-ms-order: 1;
	-webkit-order: 1;
}
 /* 回上一層KM層 */
/*#player #KM {
	background: #1F497D url(../Image/logo_inverse3.png) right no-repeat;
	color: #FFF;
	font-size: large;
	line-height: 2.5;
	padding: 0.2em 0.5em;
}*/
#player #KM { /* 回上一層KM層 */
	background: #1F497D url(../Image/logo_inverse3.png) right no-repeat;/*File標題列的logo*/
	color: #FFF;
	font-size: large;
	line-height: 52px;
    height:52px;
    vertical-align:middle;
	padding: 0 85px 0 0;
}

/* 橘色返回鈕 */
/*#player #KM #Close { 
	height:52px;
  	width:52px;
    float:left;
    background-color:#fb8b00;
    margin-right:8px;
    text-align:center;
}*/

/* 橘色 */
#player #KM #Close {
	height:52px;
  	width:10px;
    float:left;
    /*background-color:#fb8b00;*/
    margin-right:8px;
    text-align:center;
}
#player #KM:hover #Close img { padding:2px 4px 0 0; width:33px;}
#player #KM:hover {font-size: larger;background-color: #37649b}

#player #account_log {display:none;}
#player #FileTitle { padding: 0 85px 0 0; }
@media screen and (min-width:768px) {
#player #account_log {display:block;float:right; text-align:center; padding:0; border-right:1px solid #4f79af;}
  #player #account_log img { max-width:100%; height:auto; width:30px; padding:10px 5px 0 0; vertical-align:top;}
  #player #account_log span {font-size:15px; color:#fff; display:inline-block;height:40px;line-height:40px;vertical-align:middle;padding:0 15px 0 5px; }

}


#player a {
	color: #FFF;
	text-decoration: none;
}
#player #FileHead {/* KMFile標題 */
	background-color: #4e7ab1;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: space-between;
}
#player #FileHead a {
	text-decoration: none;
}

#FileHead #FileTitle {/* KMFile標題內容 */
	background-color: #4e7ab1;
	color: #FFF;
	flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	font-size: large;
	line-height: 1;
	padding: 0.65em 1em 0.5em;
	/*margin-top:0.5em;*/
}

#FileHead #FileTitle img {/* KMFile標題內容圖片 */
max-height:2.8em;
/*文繞圖垂直置中*/
 vertical-align:middle;

/*mix-blend-mode:  multiply;/*圖片去背，暫停*/

/*圖片反色 反相*/
filter:invert(100%);

/*濾色模式 screen
背景色與目標圖片的補值相乘後，成為新的顏色代換掉圖片自己的顏色
上面的multiply會做去背，這次的screen則會做去黑

背景色×目標圖片的黑色部分＝背景色
背景色×目標圖片的白色部分＝白色（原地不動的意思）*/
mix-blend-mode: screen
}

#FileHead #likeUn {/* KMFile按讚或噓 */
	background-color: #4e7ab1;
	color: #FFF;
	cursor: pointer;
	font-size: large;
	margin: 0.25em 0.25em 0.18em;
	padding: 0 0.5em;
	height: 32px;
	vertical-align:middle;
}
#FileHead #likeUn span {
	padding-right: 5px;
}
#FileHead #likeUn span span { line-height:29px;}

#player #QRFileHead { /*掃QR後顯示的頁面 */
	background: #1F497D url(../Image/logo_inverse3.png) right no-repeat;
	color: #FFF;
	font-size: large;
	line-height: 2.5;
	padding: 0.2em 0.5em;
	border-bottom:3px solid #4e7ab1
}

#player #FileContent {/* KMFile內容 */
	/*	overflow-x:hidden;
	overflow-y:scroll;*//*先隱藏Video不用出現scroll bar*/
	padding: 0;
}
#player #FileContent .wrapper.black {
	background-color:#1a1a1a;
    margin-top:0!important;
}
#player #FileContent .wrapper #vVideo, #player #FileContent .wrapper #noFlash { 
  text-align:center;
}
#player #FileContent .wrapper #vVideo {min-height:400px;}
#player #FileContent .wrapper #noFlash { background-color:#1a1a1a;  color:#FFED00;}
#FileContent H1 {/* KMFile內容 */
/*background-color:#DBEEF4;*/
  font-size: 1.25em;
  font-weight: normal;
  line-height: 1.65em;
  padding: 2em 1em;
  /*text-align:justify;分散對齊*/
  color:#333;
}
#FileContent.QA, #FileContent H1.QA { min-height:310px;}
#FileContent H1 strong {/* KMFile內容標題 */
	color: #1F497D; background-color:#DBEEF4;
}

#FileContent .type_HTML h1 {color: #1F497D; background-color:#DBEEF4; font-weight:bold; padding: 0.65em 8.5%; margin:0; border-bottom:1px dashed #86cee5;}

/*FILE描述內文sDescription*/
/*#FileContent .type_HTML .range {padding: 0 8.5%;font-size: 1.2em;text-align:justify;line-height: 1.65em;}/*限制範圍*/
#FileContent .type_HTML .range {padding: 0 8.5%;font-size: 1.2em;line-height: 1.65em;}/*限制範圍*/
/*#FileContent .type_HTML .range img {margin:2em 0;max-width: 100%!important;display:block;}*/
#FileContent .type_HTML .range img {margin:2em 0;max-width: 100%!important;}
/*#FileContent .type_HTML p {font-size: 1.2em;text-align:justify;line-height: 1.65em;}*/
/*#FileContent .type_HTML p img {margin:2em 0;max-width: 100%!important;}*/
/*#FileContent .type_HTML ul li { text-align:justify;line-height: 1.65em;}*/
#FileContent .type_HTML .red {color:#ff0000;}
#FileContent .type_HTML .redB {font-weight:bold;-webkit-text-stroke:0.3px; color:red;}
#FileContent .type_HTML .redU {color:#ff0000;border-bottom:1px solid;box-shadow: 0 1px ;padding-bottom:2px;}
#FileContent .type_HTML b { color:#2a66b0;}
#FileContent .type_HTML  p b { color:#2a66b0;}
#FileContent .type_HTML  p u { text-decoration:none; border-bottom:1px solid #999; padding-bottom:2px}
#FileContent .type_HTML  a { color:#fb8b00;}
#FileContent .type_HTML  a:hover { background-color:#fffbcf; text-decoration:underline;}
#FileContent .type_HTML  a:before { content:url(../Image/external-link.png);}
#FileContent .type_HTML  a.sideNav { font-size:14px; vertical-align: super!important}
#FileContent.QA a {color:#fb8b00;}
#FileContent.QA a:hover {color:#F7B800;}

/*#FileContent .type_HTML h1 {color: #1F497D; background-color:#DBEEF4; font-weight:bold; padding: 0.65em 8.5%; margin:0; border-bottom:1px dashed #86cee5;}
#FileContent .type_HTML p { padding: 0 8.5%;font-size: 1.2em;text-align:justify;line-height: 1.65em;}
#FileContent .type_HTML ul li { margin: 0 8.5%;font-size: 1.2em;text-align:justify;line-height: 1.65em;}
#FileContent .type_HTML .red {color:#ff0000;}
#FileContent .type_HTML .redB {font-weight:bold;-webkit-text-stroke:0.6px red; }
#FileContent .type_HTML .redU {color:#ff0000; text-decoration:underline;}
#FileContent .type_HTML img {max-width: 100%!important;}
#FileContent .type_HTML p b { color:#2a66b0;}
#FileContent .type_HTML p u { text-decoration:none; border-bottom:1px solid #999; padding-bottom:2px}
#FileContent .type_HTML a { color:#fb8b00;}
#FileContent .type_HTML a:hover { background-color:#fffbcf; text-decoration:underline;}
#FileContent .type_HTML a:before { content:url(../Image/external-link.png);}
#FileContent .type_HTML a.sideNav { font-size:14px; vertical-align: super!important}
#FileContent.QA a {color:#fb8b00;}
#FileContent.QA a:hover {color:#F7B800;}
*/
/*以下樣式先取消，最下面重寫
#player #FileMark {/* KMFile閱後操作行為 
	background-color: #404040;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: space-between;
}
#FileMark #FileMark1 {
	background-color: #404040;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-wrap: wrap;/*box自動換行
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	padding: 0em 1em;/*增加左右邊界
}
#FileMark #FileMark2 {
	display:none;
以下樣式先取消
	background-color: #404040;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-wrap: wrap;/*box自動換行
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	padding: 0em 1em;/*增加左右邊界
}
#FileMark1 #FileFinish, #FileMark1 #FileConfuse, #FileMark1 #FileImportant {/* KMFile完成、不懂、重要 
	border-radius: 0.5em;
	color: #858585;
	cursor: pointer;
	margin: 0.5em 0 0.5em 0.5em;
	padding: 0.2em 0.25em;
}
#player #FileMark a {
	background-color: #404040;
	color: #858585;
	text-decoration: none;
}
#FileMark1 a.done #FileFinish, #FileMark1 a.done #FileConfuse, #FileMark1 a.done #FileImportant {/* KMFile已標記 
	color: #FFF;
}

/* detail.aspx Type=mp4
#FileMark2 #FileBookMark, #FileMark2 #plus, #FileMark2 #jump { /* 影音書籤 加速 重載 
	margin: 0.5em;
	padding: 0.2em 0.5em;
}
#FileMark2 #FileBookMark {
	color: #FFF;
}
#FileMark2 #plus, #FileMark2 #jump {
	margin-top: 0.8em;
	padding: 0.2em 0em;
}
#FileMark #plus {
	background-image: url(../Image/plus.png);
	background-repeat: no-repeat;
	cursor: pointer;
	height: 25px;
	width: 25px;
}
#FileMark #jump {
	background-image: url(../Image/jump.png);
	background-repeat: no-repeat;
	cursor: pointer;
	height: 25px;
	width: 25px;
}*/
/* detail.aspx Type=Question */
#FileContent #SecCount { /* 作答時間 */
	margin: 0.5em 1em 1em;
	text-align: center;
}
#FileContent #sQuestion { /* 題目 */
/*	background-color: #DBEEF4;*/
/*	border-top:1px #DBDBDB solid;*/
	/*border-bottom:2px #DBEEF4 solid;*/
	margin: 0;
	padding: 10px 45px 30px;
}

/*參考法條*/
#FileContent #sQuestion blockquote {
  margin: 1em 0 1em 1em;
  border-left:5px #DBEEF4 solid;
  color:#4e7ab1;
  padding-left:8px;
}
#FileContent #sQuestion blockquote b {background-color:#DBEEF4; color:#1F497D;}

#FileContent blockquote {
  margin: 1em 0 1em 1em;
  border-left:5px #DBEEF4 solid;
  color:#4e7ab1;
  padding-left:8px;
}

#FileContent blockquote b {background-color:#DBEEF4; color:#1F497D;}

#sQuestion #source {/* 來源 */
	/*margin: 1.5em 1em -1em;*/
	margin: 1.5em 1em 1em;
    color: #1f497d;
	font-size: 16px;
    font-weight:bold;
	text-align: right;
    height:17px;
}
#sQuestion #source span {
    background-color: rgb(242 242 242);
    padding: 3px 8px;
}
#sQuestion #FileBookmark {/* KMFile書籤 */
  margin: -15px 0 -45px;
  cursor:pointer;
}
#FileContent .option { /* 選項 */
	border-bottom: 1px solid #F2F2F2;
	cursor: pointer;
	padding: 0.5em 0;
	margin: 0.5em 3em 0.5em 3em;
	line-height:1.4;
    font-size:17px;
}

#FileContent .hover:hover, #FileContent .hover:focus {
	background-color: #FF9C00;
}
#FileContent #send {
	cursor: pointer;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: center;
	margin: 0 1em 0;
	text-align: center;
}
#FileContent a {
	text-decoration: none;
}
#send .button { /* 送出答案 */
/*	padding: 0.5em;*/
	background-color: #FF9C00;
	border-radius: 0.5em;
	color: #FFF;
	margin-right:0.5em;
	text-align: center;
	width:9.75em;
	height:2.5em;
	line-height:2.5em;
	margin-bottom:1em;
}
#send .button2 {/* 不作答 */
/*	padding: 0.5em;*/
	background-color: #F2F2F2;
	border-radius: 0.5em;
	color: #000;
	text-align: center;
	width:9.75em;
	height:2.5em;
	line-height:2.5em;
	margin-bottom:1em;
}
/* detail_result.aspx */
#FileContent .selected {
	background-color: #FF9C00;
}
#FileContent .RAns {
	background-color: #92D050;
}
#FileContent #results {/* 對錯換圖 */
	margin-bottom: 1em;
	text-align: center;
}
#FileContent #results img, #charts #results2 img {
	display:inline-block;
	max-width:100%;
	height:32px;
	width:32px;
	line-height:32px;
	vertical-align:middle
}
#FileContent #Ans { /* 解答欄 */
	display: block;
    min-height:40px;
	padding: 4px 15px;
	background-color: #fffee9;
    margin: 15px 2em 0 2em;
}
#FileContent #Ans img {	vertical-align:middle;}
#FileContent #Ans:after{ clear: both;}
#FileContent #Ans:after, #FileContent #Ans:before {content: " "; display: table;}
#Ans #Choice { /* 答案/正解 */
	line-height:40px;
	height:40px;
	vertical-align:middle;
    min-width:300px;
    display:inline-block;
}
#Ans #info {   text-align:right; display:block; float:right;}
#Ans #info, #Ans #info a { /* 統計資訊 */
	color: #f08300;
	text-decoration: none;
	line-height:40px;
	height:40px;
	vertical-align:middle;
	cursor:pointer;
}
#Ans #info img  {
    cursor:pointer;
    padding:10px 6px;
}
/* 解析欄 */
#FileContent #Analysis {
  font-size: 1em;
  padding: 0 1em 0;
  line-height: 1.5em;
	/*background-color:#ffffff;*/
}
#FileContent #Analysis h1 { margin-top:0;}
#FileContent #Analysis2 {
  border-top:2px solid #eaeced;
  margin: 0 2em 2em;
  padding: 0 0 1em;
  background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(244,244,244,0) 50%, rgba(249,249,249,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(244,244,244,0) 50%,rgba(249,249,249,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(239,239,239,1) 0%,rgba(244,244,244,0) 50%,rgba(249,249,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
}
#FileContent #Analysis a, #FileContent #Analysis2 a { color:#f08300;}

/*三角形tip*/
#FileContent #Analysis2 > div.tip {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 30px 0 0;
  border-color: #d6d6d6 transparent transparent transparent;
  position:relative;
  margin-top: -2px;
}
#FileContent #Analysis2 > div.tip:after { content:"#"; display:block;width:20px; height:14px; line-height:14px; margin-top:-28px; text-align:center; color:#ffffff; font-size:14px;} 
/*#FileContent #sQuestion img, #FileContent #Analysis img, #FileContent #Analysis2 img {
	display:inline-block;
	max-width:100%;
  	height:auto;
}*/

/*#FileContent #sQuestion img, #FileContent #Analysis img, #FileContent #Analysis2 img,#FileContent #answerOptionList img {
	display:inline-block;
	max-width:100%;
  	height:auto;
	mix-blend-mode: multiply;
	vertical-align:middle;
}*/

#FileContent #sQuestion img, #FileContent #Analysis img, #FileContent #answerOptionList img,#FileContent .type_HTML img {
	display:inline-block;
	max-width:100%;
  	height:auto;
	mix-blend-mode: multiply;/*圖片去背*/	
	vertical-align:middle;/*文繞圖垂直置中*/
}
#FileContent #Analysis2 span.solve {color:#7d7d7d;line-height:1.7; padding-left:1.5em;}
#FileContent #Analysis2 div.text {padding-left:1.5em; padding-right:1.5em}

/* Statistics.aspx */
#charts {/* 統計圖表 */
	background-color: #F2F2F2;
	margin: 1em auto;
	width:60%;
    border-radius:15px;
    display: none;
}
#charts .title { /* 圖表標題 */
	background-color: #A3A3A3;
	color: #FFF;
	font-size: large;
	line-height: 3;
	text-align: center;
}
#charts .BarChart {/* 長條圖 */
	color: #333;
	display: flex;
	padding: 1em;
    justify-content: space-around;
}
#charts .BarChart .Y { /* 答對 */
	background-color: #92D050;
	line-height: 3;
}
#charts .BarChart .N { /* 答錯 */
	background-color: #FF0000;
	line-height: 3;
	text-align: right;
}
#charts .BarChart .nbg {
	margin-top: -1.5em;
}
#charts .PieChart { /* 圖表區 */
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	justify-content: center;
	padding: 1em 3em;
}
#charts .PieChart .PL { /* 圓餅圖片 */
}
#charts .PieChart .PL svg g { line-height:0.9em;}
#charts .PieChart .PL svg g text { font-size:15px;}
#charts .Answer { text-align:center; padding-bottom:10px;}
#FileContent #Back { /* 返回解析頁 */
	background-color: #FF9C00;
	border-radius: 0.5em;
	color: #FFF;
	margin: 1em 20em;
	padding: 0.5em;
	text-align: center;
}
#tab2 { text-align:center; }
@media screen and (max-width: 991px) {
#FileContent .type_HTML .range {padding: 0 1%;}/*限制範圍*/
#FileContent .type_HTML ul li { padding: 0 1%;}


#BodyContentMainDetail #Detail {
	flex-direction: column;/*DIV排直排*/
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	/*line-height:0!important;*//*會導致字重疊故取消*/
	line-height:1em!important;
	padding-top:0!important;
	margin-top:0!important;
}

/*手機版，改成選單置底&配合rwdmenu.js
 #Detail #globalMenu {
  display: none;

} */
#Detail #TabMenu {}
#tab1 { }
#menuOverlay {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.45);
		display: none;
		position: fixed;
		z-index: 10;
	}

	#switchBtnArea {
		width: 100%;
		height: 50px;
	    background: rgba(33, 33, 0, 0.7);
		border-top: #ff9c00 1px solid;
		position: fixed;
        bottom:0;
        z-index: 90;
	}

	#switchBtnArea #switchBtn {
		bottom: 0;
		right: 0;
		width: 100%;
		height: 50px;
	    background: transparent url(../Image/btn_open.png) no-repeat center center;	
		position: absolute;
		z-index: 99998;
    	margin-bottom:-2px;
        
	}

	#switchBtnArea #switchBtn.btnClose {
		background: transparent url(../Image/btn_closeb.png) no-repeat center center;
	}

	#rwdMenuWrap {
		left: 0;
		width: 100%;
		bottom: -60%;
		height: 60%;
		background: #ffad2d;
		overflow: auto;
		position: fixed;
		z-index: 99;
    }

#FileContent H1 {
  font-size: 1.2em;
  margin-top:1.5em;
}
#FileContent .type_HTML h1, #FileContent .type_HTML p { padding-left:1em; padding-right:1em;}
#player #FileContent {
	padding: 0;
}
#player #KM {
	/*padding: 0.2em 0.1em*/
  padding: 0 85px 0 0;
}
#FileHead #FileTitle {
	line-height: 1;
	padding: 0.75em 1em 0.4em;
}
#FileHead #likeUn {/* KMFile按讚或噓 */
	margin: 0.5em 0.1em 0.35em 0.1em;
	padding: 0em;
}

#tab2 textarea {
	height: 110px; /* 筆記欄高度 */
	width: 90%;
}
#FileContent #SecCount { /* 作答時間 */
	margin: 1em;
}

/*DetailAuditionStatistics.aspx*/
#charts {/* 統計圖表 */
	width:99%;
}
#charts .BarChart {/* 長條圖 */
	padding: 1em;
}
#charts .BarChart .Y, #charts .BarChart .N{ /* 答對答錯 */
	line-height: 3;
}
#charts .BarChart .nbg {
	margin-top: -1em;
}
#charts .PieChart { /* 圖表區 */
  padding:5px 0 1em;
}

}

@media screen and (max-width: 480px) {
/*#FileMark {
	padding: 0.25em 0em!important;/*無左右邊界
	flex-direction: column;/*DIV排直排
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
}
#FileMark1 #FileFinish, #FileMark1 #FileConfuse, #FileMark1 #FileImportant {
	margin: 0.1em 0em;
	padding: 0.1em;
}
#FileMark2 #FileBookMark, #FileMark2 #plus, #FileMark2 #jump {
	margin: 0.85em 0.25em 0.25em 0.25em;
	padding: 0.2em 0.25em;/*重設影片跳轉按鈕位置
}*/
/*	#FileMark #FileMark2 {
			min-width:11em}*/

#BodyContentMainNavigator .Last, #BodyContentMainNavigatorKMFile .Last {
	font-size:1em;
}

#FileContent H1 {
  font-size: 1.15em;
}
#FileContent #sQuestion H1 {
    padding: 0;
	margin-top: -10px;
}
#FileContent #sQuestion {
	padding: 0.5em 0.75em;
	margin: 0;
}
#sQuestion #source {/* 來源 */
	margin-top:0;
  padding-bottom: 0.1em;
	padding-right: 0.5em;
}
#sQuestion #FileBookmark {/* KMFile書籤 */
/*	margin: -14px -0.25em -1.25em 0;*/
	margin: -30px -0.25em 0 0;
}
#FileContent .option {
	margin: 0.5em 0.25em 0.5em 0.25em;
	padding-left: 0.25em;
}
#FileContent #Ans {
	margin: 0;
	padding: 0.5em;
}
#Ans #Choice { width:100%;}
#Ans #info {float:left;}
#FileContent #Analysis2 {
	margin: 0;
	padding: 0 0 1em;
}

#charts .PieChart .PL { /* 圓餅圖片 */
	width: 100%;
}
}
/* Search_Result.aspx */
#searchResult {
	padding: 0 3rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
    width: 80%;
}

#searchResult .accordionPart {
  padding:1.5em 0 1em;
  display:flex;
  flex-wrap: wrap;
  flex-direction:column;
  align-items: flex-start;
  width:100%;
}
#searchResult .accordionPart .summary { flex:none;}
#searchResult .accordionPart a {width:100%;}
#searchResult .accordionPart .KMFilelist {width:auto!important;}
#searchResult .accordionPart .KMFilelist div {
    width: 100%;
}
#searchResult .accordionPart .KMFilelist .title {
	font-size: 1em;
    font-weight: bold;
    margin: 0.35em 0 0;
    line-height:1.2;
    color:#000;
    display: block;
}
#searchResult .accordionPart.km, #searchResult .accordionPart.ch { width:90%; margin:0 auto;}
/*#searchResult .accordionPart .KMFilelist img.lock {max-width:28px; width:28px;height:28px;padding:0; margin:0 0 -4px 2px;}*/

#searchResult .accordionPart .unlock,
#searchResult .accordionPart .lock{position:relative;z-index:0; width:auto!important; margin-right:1em; }
#searchResult .accordionPart .lock::after {content:url(../image/ico_lock.png); z-index:99;display:block; width:32px; height:32px;right:0; bottom:0; margin-right:-10px; position:absolute;}
#searchResult .accordionPart .KMlist, #searchResult .accordionPart .chapterlist { position:relative;display:flex; justify-content: flex-start; padding-left:1.5em}
#searchResult .accordionPart .KMlist > img, #searchResult .accordionPart .chapterlist > img { position:absolute;width:24px;height:24px; padding:4px; border-radius:50%; background-color:#f5f5f5;left:-18px;}
#searchResult .accordionPart div div span {
    display: flex;
    padding: 0 0 5px;
    font-size: 14px;
    color: #999;
    font-weight: normal;
    line-height: 1;
}
#searchResult .accordionPart  div div .title {
	font-size: 1em;
    font-weight: bold;
    margin: 0.35em 0 0;
    line-height:1;
    color:#000;
    display: block;
}
/*
#SearchResult #ResultHead {
	background-color: #1F497D;
	color: #FFF;
	margin: 0.5em 0 0!important;
	padding: 1em;
  	display:table;
	width: 98%;/* 必須同KMFileList.aspx下#BodyContentMainDetail .kmfile的寬度 */
/*}
#SearchResult #ResultHead a { color:#ECECEC }
#SearchResult #KMFileList { 
	width:98%;
    margin:0 auto
}
#SearchResult a {
	color: #000;
	text-decoration: none;
}
#SearchResult .KMList { /* 知識點列表 */
/*	border-bottom: 1px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
	border-right: 1px solid #E0E0E0;
	padding: 1em;
  	width: 100%;
}*/
@media screen and (max-width: 767px) {
#searchResult { padding:0; width:100%;}
}

/* 跳頁選單 */
.pages {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-wrap: nowrap;/*水平排列不換行 */
	-ms-flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	justify-content: center;
	margin: 1.5em;
}
.pages .p a {
	background-color: #4BACC6;
	border: 1px solid #385D8A;
	color: #FFF!important;
	margin: 0.5em;
	padding: 0.5em;
	text-decoration: none;
}
.pages .p a:hover {
	text-decoration: underline!important;
}
#allPages {text-align:center; width:96.5%; margin:0 auto;}
small #allPages { text-align:right;}
small #allPages span {display:none;}
small #allPages .pagination > li > a { padding:1px 9px;}

.dataTables_info {text-align:center; width:96.5%; margin:0 auto;padding:1em 0}
small .dataTables_info { text-align:right;}
small .dataTables_info span {display:none;}
small .dataTables_info .pagination > li > a { padding:1px 9px;}

/* Login.aspx 登入 */
#BodyContentMainDetail #Lg {
	text-align: center;
}
#Lg .title, #Card .title, #ClassList .title {
	font-size: x-large;
	font-weight: bold;
	margin-bottom: 1em;
	padding: 0.1em 0.5em;
	text-align: center;
}
#Lg a {
	text-decoration: none;
}
#LoginBtn {/* 登入button */
	background-color: #ff9c00 !important;
	border-radius: 0.5em;
	color: #FFF;
	cursor: pointer;
	font-size: 1em;
	padding: 0.5em;
	margin: 0.5em;
	width: 13em;
	border: 0;
}
#Lg #At input, #Lg #PW input {
	background-color: #aeaeae;
	border-radius: 0.5em;
	color: #FFF;
	font-size: 1em;
	line-height: 2;
	margin: 0.5em;
	padding: 5px;
	width: 12em;
	border: 1px solid #7b7b7b;
}
#Lg #Keep {/* 記住帳號 */
	margin-right: 0.5em;
	text-align: right;
}
#Lg .join, #Lg .guide, #Lg .Forgot { /* 加入會員/使用說/忘記密碼 */
	font-size: 15px;
    display:inline-block;
    margin-bottom:3em;
	margin-top: 1em;
    width:30%;
	
}
#Lg .Forgot {color: #939393!important;}
#Lg #stepjoin a {
	color: #f08300;
	font-weight: bold;
}
#Lg .join .note { font-size:0.9em; 	margin-top: 0.5em; }
#Lg a:hover {
	text-decoration: underline;
}

/* Placeholder */
::-webkit-input-placeholder { color:#dbdbdb; }
::-moz-placeholder { color:#dbdbdb; } /* firefox 19+ */
:-ms-input-placeholder { color:#dbdbdb; } /* ie */
input:-moz-placeholder { color:#dbdbdb; }

/* Card.aspx 啟用微課 */
#CardNumber input {
	background-color: #A3A3A3;
	border: 3px solid #CCC;
	border-radius: 0.5em;
	color: #FFF;
	font-size: 1.0em;
	line-height: 2.5;
	margin: 0.5em;
	padding: 5px;
	width: 16em;
}
#CardNumber {/*授權碼填寫框 */
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: center;
}
@media screen and (max-device-width: 480px) {
#Lg small { display:block;}
#CardNumber {
	-ms-flex-direction: column;
	flex-direction: column;
	align-items: center;
}
#Card p {
	display: none;
}
}
#Cardbtn {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: center;
}
#Cardbtn #Open, #Cardbtn #Clear {
	margin: 1.5em 0;
	text-align: center;
}
#Cardbtn #Open input, #Cardbtn #Clear input {
	border: 0;
	border-radius: 0.5em;
	cursor: pointer;
	font-size: 1.0em;
	margin: 0.5em;
	padding: 0.5em 3em;
}
#Cardbtn #Open input:hover, #Cardbtn #Clear input:hover {
	border: 1px solid #CCC;
}
#Cardbtn #Open input {
	background-color: #FF9C00;
	color: #FFF;
}
#Cardbtn #Clear input {
	background-color: #F2F2F2;
	color: #000;
}
/* ClassList.aspx 我的微課 */
#BodyContentMainDetail #ClassList {
	text-align: center;
	width: 80%;
	padding-bottom:2em
}

@media screen and (max-device-width: 480px) {
#BodyContentMainDetail #ClassList {
	width: 98%;
}
}
#ClassList a {
	text-decoration: none;
}
#ClassList .classLine {/* 我的微課列 */
	background-color: #F2F2F2;
	border-radius: 0.5em;
	border: 1px solid #E0E0E0;
	color: #000;
	font-size: large;
	padding: 1.5em; 
	margin: 1em;
	text-align: left;
	font-weight:600
}

#ClassList .Expired {/* 我的微課列-已過期 */
	background-color: #dbdbdb!important;

}

#ClassList .new { /* 新微課圖示 */
	background-image: url(../Image/new2.png);
	background-repeat: no-repeat;
}
.classLine .DateEnd {/* 微課收看期限 */
	color: #f08300;
	font-size: smaller;
	font-weight:normal;
	padding: 1em 2em 0 0;
	display:inline-block;
}
@media screen and (max-device-width: 480px) {
#ClassList .classLine {
	padding: 1.5em 1.5em 1em; 
}
.classLine .DateEnd {
	display:block;
	padding: 0.25em 0 0.1em;
}
}
#ClassList .classLine:hover {
	background-color: #dbdbdb;
}
#ClassList .classLine:hover .DateEnd {
	color: #FFF;
}
#ClassList #ToOpen, #NoRecord {/* 課程啟用 */
	background-color: #799ecb;
	border-radius: 0.5em;
	color: #FFF;
	margin: 1em 1em 2em;
	padding: 1em;
}
#RecordFile {
	border-radius: 0.5em;
	color: #FFF;
	margin: 1em 1em 5em;
	padding: 1em;	
}
#RecordFile a {color:#000;text-decoration:none;}
#RecordFile a img {padding-right: 0.5em;}
/*#ClassList #ToOpen a {
	color:#1f497d;
	font-weight:bold;
}
#ClassList #ToOpen a:hover {
	text-decoration:underline;
}*/
/* Footer */
#BodyFooter {
  font-size:15px;
	/*margin-top:5em;*/
	/*padding-bottom:5em;*/
	padding-bottom:1em;
	background-color: #F2F2F2;
    padding-top:40px;
	text-align:center;}
#BodyFooter #footerEND {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	justify-content: center;
}
#footAbout {
  text-align: left;
  margin-left: 1em;
  color:#7F7F7F;
}
#footAbout a {margin:0 0 5px;padding: 0 3px;color: #1F497D; font-weight:bold;}
#footAbout a:before { content:""; font-size:10px;display:inline-block;}
#footAbout #About a {
	background-color:#e1e1e1;
    padding: 3px;
    margin:0 10px 5px 0; 
	text-decoration:none
}

#Address {
	line-height: 1.8;
}
#Address .mailbg, #Address .mailbg a {
	/*	background-color:#FFC900;*/
	color: #000;
	padding: 2px;
	text-decoration: none;
}



@media (max-device-width: 480px) {
#BodyFooter {
	padding-top:15px;
	margin-top:0
}

#footAbout #About { text-align:center;}
#footAbout #About span {display:block;}
}
/* ListChapter.aspx / ShoppingButton.aspx */
#shop {
	margin-top: 1em;
	padding: 0.5em;
	text-align: center;
}
#shop img {
	border: 0;
}
.KnowMore, .onsale, .MoreChapter {/* 了解更多/購買/完整章節 */
	display: inline;
}
/* DetailAudition.aspx- 我想了解更多/ 提示登入 */
#popForm, #alertNote {
	border: 3px solid #B9CDE5;
	background-color: #FFF;
	display: none;
	padding: 0 1em 1em;
	line-height: 1.8;
}
.close {/*關閉視窗 */
	text-align:right;
}
.close a {
	background-color: #fb8b00;
    color: #ffffff;
	padding: 0 15px;
	font-size:2.5em;
	line-height:1;
	text-decoration: none;
    display:inline-block;
}
#popForm .Send {/*送出資料 */
	margin-top:1em;
	text-align: center;
}
#popForm .Send a {
	background-color: #4F81BD;
	border-radius: 0.3em;
	color: #FFF;
	padding: 0.5em;
	text-decoration: none;
}
.GoLogin {/*已經購買，去登入 */
	display: inline;
}


/* pw.aspx 忘記密碼 */
#forgotpw {
	width:95%;
}
#formsite {/* 表單 */
	padding: 1em 0.5em 3em;
	font-size: 1em;	
}
#forgotpw #formsite {/* 表單 */
	padding: 5em 0.5em;
	font-size: 1em;	
}
#formsite input {
	background-color: #aeaeae;
	border-radius: 0.5em;
	color: #FFF;
	font-size: 1em;
	margin: 0.35em;
	padding: 0.75em 0.5em;
	width: 15em;
	border: 2px solid #DDDDDD;
}
#formsite label { width:12em; display:inline-block; text-align:right}
#formsite button {
	background-color: #ff9c00!important;
	border-radius: 0.5em;
	color: #FFF;
	cursor: pointer;
	font-size: 1em;
	padding: 0.6em 0.5em;
	margin: 0.35em;
	width: 7em;
	border: 2px solid #ffcd7f;	
}
#forgotpw  #forContent { /*防止擋信 */
	padding:0.5em;
}
#forContent .subtitle {
	font-weight:bold;
}
#forContent img {
	border:1px solid silver;
}
#forContent a,#agree a {
	color:#000;
	text-decoration:none;
}
#forContent a:hover,#agree a:hover,#step a:hover {
	left:1px;
	position:relative;
	text-decoration:underline;
}
#agree { /* 會員個人資料保護權益事項 */
	width:70%;
}
#agree #agree_content {
	line-height:1.5;
}
#agree_content .bluetitle {
	font-size:1.15em;
	font-weight:bold;
	color:#41a4ce;
}
.highlight_blue {
	padding:0px 8px;
	margin:3px 0;
	background-color:#06C;
	color:#fff;
	border-radius:5px;
	width:5.25em;
	line-height:1.5em;
	display:inline-block;
	text-align:center;
}
#step {/* 加入會員 new_step1.aspx new_step2.aspx */
	padding:0.5em;
	width:85%;
}
#step H3 {
	color:#4f79af;
	border-bottom:1px dotted #4f79af
}
#stepline {
	padding:0.6em;
	margin-bottom:15px;
	color:#d2effb;
	background-color:#4f79af;
	border-radius:5px;
}
#stepline .line {
	font-weight:bold;
	color:#fff
}
#step .stepbox {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: flex-start;
	padding:0.5em 0;
}
#step .stepbox2 {
	padding:1em 0 0.5em 0em;	
	font-weight:bold;
}
.steptitle { /* 表單標題 */
	width:7.5em;
	color:#1f497d
}

#step a {
	color:#FF9C00;
}
#step input, #step select {
	padding:5px 8px;
	font-size:1em;
}
#step input[type="text"], #step select {
	margin:-7px 5px 0 0
}
#step .button {
	border-width:0;
	background-color: #FF9C00;
	border-radius: 0.5em;
	color: #FFF;
	width:8em;
	padding:8px;
	font-size:1em;
	margin-bottom:1em;
	cursor:pointer;
	margin-right:1em
}
#step .button2 {
	border-width:0;
	background-color: #F2F2F2;
	border-radius: 0.5em;
	color: #000;
	width:8em;
	padding:8px;
	font-size:1em;
	margin-bottom:1em;
	cursor:pointer
}
@media screen and (max-device-width: 480px) {
	#step {
	width:96%;
	}
	#step .stepbox {
		display:block;
		padding:0.5em;
	}
	#step .stepbox2 {
		padding:0.5em;
	}
	#forContent img {
		margin-left:-150px;
		width:480px;
		overflow:hidden;
	}
	#step input[type="text"], #step select {
	margin:0 5px 0 0;
	}
	#step .width100 { width:95%; display:block }
.stepbox input[type="text"], .stepbox input[type="password"] { display:block; width:93%}
}
/*加-Video適應寬度、解決IE無法修改寬度問題*/
.wrapper {
line-height:1.7;
margin-top:-15px!important;
}
#sMessageRW img {
	display:inline-block;
	max-width:100%;
	height:32px;
	width:32px;
	line-height:32px;
	vertical-align:middle
}
#hlsPlayer { width:100%; height:auto; }
/*.videocontent {
	width: 90%;
	max-width: 1536px;
	margin: 0 auto;
}*/
/*@media screen and (min-device-width: 1281px) and (max-device-width: 1440px) {
.videocontent {
	max-width: 1152px;
}
}
@media screen and (min-device-width: 769px) and (max-device-width: 1280px) {
.videocontent {
 max-width:1024px;
}
}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {
.videocontent {
 max-width:768px;
}
}
@media screen and (max-device-width: 480px) {
.videocontent {
 max-width:480px;
}
}*/


/* Detail.aspx */
.DetailbtnTop {
 margin:0.5em 0;
 padding-left:0.5em;
 text-align:left;
}

/*video,embed,iframe自適應*/
.embed-responsive {
  position: relative;
  display: block!important;
  height:100%!important;
  width:100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch!important;
  /*overflow-y: scroll;*/
}

.embed-responsive iframe, .embed-responsive embed{
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height:100%!important;
  border: 0;
}

.mypdf{min-height:200px!important; line-height:1.7!important; font-size:20px; text-align:center;}
.mypdf > a{color:#1F497D!important; padding:60px 0!important; display:block;}
.mypdf > a >div{ width:210px; text-align:center; color:#ffffff;background-color:#fb8b00; border:1px solid #fb8b00; border-radius:5px; margin:0 auto;}
    
@media (max-width:991px) {
.embed-responsive iframe {	min-height: 780px; }
.embed-responsive embed {	min-height: 580px; }
}
@media (max-width:767px) {
.embed-responsive iframe, .embed-responsive embed {	min-height: auto; }
}

@media (min-width:992px) {
.embed-responsive iframe {	min-height: 600px; }
.embed-responsive embed {	min-height: 416px; }
}
@media (min-width:1367px) {
.embed-responsive iframe {	min-height: 750px; }
.embed-responsive embed {	min-height: 580px; }
}

.text-center { text-align:center ;}

/*分頁樣式*/

.dataTables_paginate{text-align:center;padding-top:0.25em;margin-bottom:1em;}
#oKMFileTable_paginate{
text-align:center;
/*float:left;margin:0 0 1.5em 45%;*/
}
#oKMFileTable .title img{
mix-blend-mode: multiply;/*圖片去背*/
max-height:2.3em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
	box-sizing:border-box;
	min-width:1.5em;
	padding:0.5em 1em;
	text-align:center;
	text-decoration:none !important;
	cursor:pointer;
	color:rgb(38, 138, 211)!important;
	border:1px solid #ebebeb;
	border-radius:5px
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	color:#FFF !important;
	border:1px solid #f39800;
	background-color:#f39800;

}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
	color:rgb(38, 138, 211)!important;
	border:1px solid #ebebeb;
	background-color:#f39800;
}


.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 22px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #268ad3;
  background-color: #ffffff;
  border: 1px solid #ebebeb;
  margin-left: -1px;
}
.pagination > li:first-child > a {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.pagination > li:last-child > a {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > a:focus {
  z-index: 2;
  color: #109ad7;
  background-color: #f8ac2d;
  border-color: #ffffff;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
  z-index: 3;
  color: #ffffff;
  background-color: #f39800;
  border-color: #f39800;
  cursor: default;
}


/*hls video ui ---------------****/
.rmp-hd, .rmp-cc, .rmp-quality.rmp-module {
    display: none!important;
}
    /*隱藏電腦、Mobile的play&pause按鈕、並改成可點影片畫面播放*/
    .rmp-overlay-button, .rmp-mobile-central-ui, .rmp-chrome .rmp-mobile-central-ui  {
      opacity: 0!important;
      width: 100%!important;
      height:85%!important;
      top:0!important;
      left:0!important;
      margin:0!important;
      cursor:pointer!important;
    }
/*hls video - playback rate*/
#playBar, #FileMark, #FileMark1, #FileMark2 {position: relative; min-height:1px; display:block; width:100%; padding:0; margin:0}
#playBar:after, #FileMark:after, #FileMark1:after,#FileMark2:after {content: " "; display: table;}
#playBar:before, #playBar:after, #FileMark:before,#FileMark:after,#FileMark1:before, #FileMark2:before, #FileMark1:after, #FileMark2:after {clear: both;}

	#playBar .control-bar { background-color:#222222;width:50%; text-align:center; float:left; padding: 0; height:50px;line-height:50px; vertical-align:middle;}
	#playBar .control-bar input[type="button"] {background-color:#295474;border: 1px solid #295474;color:#ffffff; width:33%; margin-top:0;-webkit-appearance: none;}
    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {/*Chrome only*/
    #playBar .control-bar input[type="button"] {margin-top:-1px;}
	}
	#playBar .control-bar select {
	border: 1px solid #295474;
	border-radius: 0;
	font-size:13px;
	padding:0;
	margin:0 -5px;
	height:36px;
    width:33%;
    }
    #playBar .btn {
      display: inline-block;
      font-weight: normal;
      text-align: center;
      vertical-align: middle;
      -ms-touch-action: manipulation;
          touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      border: 0px solid transparent;
      white-space: nowrap;
      padding: 6px 0;
      font-size: 16px;
      line-height: 1.42857143;
      height:36px;
      border-radius: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    #playBar .btn:focus,
    #playBar .btn:active:focus,
    #playBar .btn.active:focus,
    #playBar .btn.focus,
    #playBar .btn:active.focus,
    #playBar .btn.active.focus {
      outline: 0 auto -webkit-focus-ring-color;
      outline-offset: 0;
    }
    #playBar .btn:hover,
    #playBar .btn:focus,
    #playBar .btn.focus {
      color: #ffffff;
      text-decoration: none;
    }


#FileMark {background-color: #404040;width:100%;}

#FileMark1 { background-color: #404040;width:100%; text-align:center; float:left; padding: 0; vertical-align:middle;}
#FileMark2 { background-color: #404040;width:100%; text-align:center; float:right; padding: 0; vertical-align:middle;display:none;/*無作用先隱藏*/}
    #FileMark1 #FileFinish, #FileMark1 #FileConfuse, #FileMark1 #FileImportant {/* KMFile完成、不懂、重要 */
        background-color: #404040;
        cursor: pointer;
        margin: 0;
        padding: 11px 0;
        display: inline-block;
    }
    #FileMark2 #FileBookMark, #FileMark2 #plus, #FileMark2 #jump { /* 影音書籤 加速 重載 */
        margin: 0;
        /*display:inline-block;*/
        
    }
    #FileMark2 #FileBookMark {
        padding: 0;
        vertical-align:top;
    }
    #FileMark2 #FileBookMark #sTime { background-color:transparent; border:none; color:#FFFFFF;}
    #FileMark2 span {
        height:50px;
        line-height:50px;
        vertical-align:middle;
        display:inline-block;
        padding:0
    }
    #FileMark2 #FileBookMark span img {vertical-align:middle;}
    #FileMark2 #plus, #FileMark2 #jump {
       margin: 12px 3px;
       border:none;
       vertical-align:middle;
    }
    #FileMark #plus {
        background: url(../Image/plus.png) center no-repeat;
        cursor: pointer;
        height: 25px;
        width: 25px;
    }
    #FileMark #jump {
        background: url(../Image/jump.png) center no-repeat;;
        cursor: pointer;
        height: 25px;
        width: 25px;
    }

.img-responsive {
	display:block;
	max-width:100%;
  	height:auto;
    margin:0 auto;
}

@media (min-width:768px) and (max-width:991px) {
#player #FileContent #hlsPlayer { width:100%;}
	#playBar .control-bar input[type="button"], #playBar .control-bar select { width:28%;}
    #FileMark1{width:100%;}/*50%*/
    #FileMark2{width:50%;}
    #FileMark1 #FileFinish, #FileMark1 #FileConfuse, #FileMark1 #FileImportant {/* KMFile完成、不懂、重要 */
        padding: 11px 3px;
    }
    #FileMark2 #plus, #FileMark2 #jump {
       padding: 12px;
    }
    .img-responsive {
	max-width:100%;
    margin:auto;
}
}
@media (min-width:992px) {
	#Analysis2 .wrapper { width:80%!important; margin:0 auto}
    #playBar .control-bar input[type="button"], #playBar .control-bar select { width:95px;}
    
    #FileMark1{width:100%;}/*50%*/
    #FileMark2{width:50%;}
    #FileMark1 #FileFinish, #FileMark1 #FileConfuse, #FileMark1 #FileImportant {/* KMFile完成、不懂、重要 */
        padding: 11px 3px;
    }
    #FileMark2 #plus, #FileMark2 #jump {
       padding: 12px;
    }
    #updown a {
	    margin: 0.2em 0.1em;
      padding: 0.5em 0.35em;
	}
}
@media (min-width:1280px) {
	#player #FileContent #hlsPlayer { width:80%; margin:0 auto;}
}
@media (min-width:1367px) {
	#player #FileContent #hlsPlayer { width:90%; margin:0 auto;}
    #player #FileContent #hlsPlayer a { color:#249FF8;}
}


/*QQRChapterKM.aspx css重新調整*/
/* KMFile列表 重新定義*/
#QRkmfilelist{ width:90%; margin:0 auto; }
#QRkmfilelist, #QRkmfilelist li { padding:0; list-style-type:none;}
.dataTables_filter{ line-height:3.5;text-align:center;background-color: #1F497D;color:#FFF;}
.dataTables_filter input {
	background-color: #FFF;
	border: 3px solid #c9c9ce;	
	border-radius: 0.3em;	
	color: #666;
	font-size: 1em;
	padding: 0.4em 0.2em;
	vertical-align: middle;	
}
#QRkmfilelist #Back { text-decoration: none;}
#QRkmfilelist #Back h2 { font-size:1.25em; background-color: #ececec; color:#373737; margin:0; padding:0 0 0 8px;height: 52px; line-height: 52px;vertical-align:middle;}/*知識點大標*/
#QRkmfilelist #Back:hover h2 { opacity:0.6;background-color:#fb8b00;font-size:1.3em; color:#ffffff;}
/*#QRkmfilelist #Back h2 i:first-child {line-height: 50px;height: 52px;width: 52px;float: right;background-color: #fb8b00;margin-left: 8px;text-align: center;vertical-align:middle;}*/ /*關閉圖示*/
/*#QRkmfilelist #Back h2 i:first-child {line-height: 52px;height: 52px;width: 103px;float: left;background-color: #fb8b00;margin-right: 8px;text-align: center;vertical-align:middle;}/*返回圖示*/
#QRkmfilelist h2 > span { font-size: 15px; color:#9D9FA4; display:inline-block; text-align:center;}/*知識點小標*/
  #QRkmfilelist li { margin-top:-1px;}
  /* #QRkmfilelist li a { display:table; border-collapse: collapse; margin:0 auto;text-decoration: none;} */
  #QRkmfilelist td a { display:table; border-collapse: collapse; margin:0 auto;text-decoration: none;}
  #QRkmfilelist .QRkmfile {display:table-row; width:100%; border: 1px solid #E0E0E0; line-height: 1.8; color:#000;}
  #QRkmfilelist .QRkmfile .fileimg,#QRkmfilelist .QRkmfile .content,#QRkmfilelist .QRkmfile .author {display:table-cell; vertical-align:top;}
  #QRkmfilelist .QRkmfile .progress {display:table-cell; vertical-align:middle;}
  #QRkmfilelist .QRkmfile .fileimg img {max-width:100%; height:auto; }
  #QRkmfilelist .QRkmfile .author {white-space:nowrap;color:#666666;font-size: large; text-align:center; }
  #QRkmfilelist .QRkmfile .content .title {font-size: large; font-weight: bold; line-height: 1.5; margin:0.1em 0 0.5em}
  #QRkmfilelist .QRkmfile .content .iF,#QRkmfilelist .QRkmfile .content .iD {/* 困難度 & 常考 */
    display:block; width: 50%; float:left;
  }
  #QRkmfilelist .QRkmfile .maru {/* 常用、困難的幾顆圈圈 */
  	color: #FF9C00;
  }
  
#BodyContentMainDetail #QRkmfilelist .done {
	background-color: #FFFFFF;
}
#BodyContentMainDetail #QRkmfilelist .done:hover {
	background-color: #F5F5F5;
}

@media (max-width:991px) {
    #QRkmfilelist h2 > span { margin:0 6px 0 0; padding:2px 6px 3px 0;}
}
@media (max-width:767px) {
#QRkmfilelist #Back { position:relative; display:block;}
#QRkmfilelist #Back h2  { width: calc(100% - 30px); overflow-x:auto; white-space:nowrap; padding-right:30px;}
#QRkmfilelist #Back h2 i:first-child {width: 65px; margin-right:-30px}
/*#QRkmfilelist #Back:after { content:" "; position:absolute; right:0; top:10px;width:20px; height:52px;display:block;
background: rgb(236,236,236);
background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(236,236,236,1) 50%);
background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(236,236,236,1) 50%);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(236,236,236,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ececec",GradientType=1);}
*/
#QRkmfilelist a { width: 100%; /*padding:10px 2px;*/}
  #QRkmfilelist h2 > span {padding-left:3px;padding-right:3px;display:block; text-align:left;}
  #QRkmfilelist .QRkmfile .fileimg,#QRkmfilelist .QRkmfile .content, #QRkmfilelist .QRkmfile .author { padding:0 3px 10px 0; }
  #QRkmfilelist .QRkmfile .author { display:none;}
  #QRkmfilelist .QRkmfile .fileimg { width: 64px;}
  #QRkmfilelist .QRkmfile .progress { width:24px; vertical-align:top; padding-top:19px;}
  #QRkmfilelist .QRkmfile .progress img { max-width:100%; height:auto; }
  #QRkmfilelist .QRkmfile .content .iF, #QRkmfilelist .QRkmfile .content .iD { font-size:smaller; }

}
@media (min-width:768px)  {
#QRkmfilelist a { width: 100%;}
  #QRkmfilelist h2 > span {padding-left:1em;padding-right:0.85em; }
  #QRkmfilelist .QRkmfile .fileimg, #QRkmfilelist .QRkmfile .content, #QRkmfilelist .QRkmfile .author { padding:0.85em 0.85em 0.45em; }
  #QRkmfilelist .QRkmfile .fileimg, #QRkmfilelist .QRkmfile .fileimg img, #QRkmfilelist .QRkmfile .author {width:88px;}
  #QRkmfilelist .QRkmfile .progress { width:48px; }
}



/*Header, Menu, Footer media query*/

@media (max-width:767px) {
#BodyHeader {padding:0;display: flex;
		display: -webkit-flex;
		display: -ms-flex;
		justify-content: space-between;flex-wrap: nowrap;}
#BodyHeader #logo,
#BodyHeader #logo img{ width:160px }
#BodyHeader #login, #BodyHeader #join  {/* 登入/註冊 */
}
#BodyHeader #account {
  width:210px;
  display:flex;
  /*justify-content:space-between;*/
  align-items:center
}

.nav-head:nth-child(2) a{
    background-color: #1F497D;
    border-radius: 20px;
    border: 3px solid #4f79af;
    padding: 3px 10px;
    margin:0 10px;
}
/* #BodyHeader #account a:first-child { display:none;} */
	#BodyHeader #account:hover .nav-content { right:-15px; }

#BodyHeader #search {display: none;}
.confirm #LoginBtn { width:264px;display:flex; align-self:center; justify-content:center}

#BodyFooter {
	padding-top:15px;
	margin-top:0
}

#footAbout #About { text-align:center;}
#footAbout #About span {display:block;}
#BodyContentMainDetail .mainSubject { width:100%; margin:15px 0;}
}

@media (max-width:480px) {
#BodyContentMainNavigator .Last {
	color:#FF9C00; font-size:1.1em;
}

	.mainSubject { width:320px; padding: 10px 0 15px; margin:0 auto;}
	#QRkmfilelist{ width:100%; margin:0 auto; }
}

@media (min-width:768px){
.flex-row {
  margin-left:-15px; margin-right:-15px;
}

#BodyHeader #account {width:264px; }
#BodyHeader #account .nav-head > a { /* 關於微課、登入、註冊、我的微課 */
  /*padding:6px 20px;*/
  padding:7px 8px;
}
#BodyHeader #account:hover .nav-content { right:0; }
    
#BodyMenu { background:url(../Image/bg_banner.png) top center no-repeat #f7f7ec; background-size:auto 100%;}
	#AD .owl-item {padding:10px;}
    .mainSubject { width:320px; margin:15px auto 25px; padding:0;}
    .mainSubject .btn_forsale {height:42px; line-height:42px; font-size:17px;}    
.login-form h3, .login-form.reg div, .step, .login-form.confirm div{  width:85%;}
.login-form form > div { max-width:none; margin-bottom:0;flex-direction:row;}
.login-form form > div > label {width:90px; display: inline-flex;justify-content:flex-end; text-align:right;}
.login-form.confirm form > div > label {width:200px;}

.help-block { display:inline; width:auto; padding-left:0;}
.login-form.reg input[type="text"], .login-form.reg input[type="password"], .login-form.confirm input{
    width:210px;
}

.login-form.reg select { min-width:75px;}
.options { width:100%;display:inline-flex; align-items:center; margin:0 15px auto 100px;}
.options label { min-width:70px; width: auto;}
.confirm #LoginBtn { width:auto; padding:0.5em 1em;}
.submit { flex-direction:columnimportant;}


#BodyContentMainDetail .mainSubject {padding:15px 0;}
#BodyContentMainDetail .mainSubject h1 { flex:1;}
}

/*QRChapterKMFile.aspx FileLlist合併到播放頁*/
.releation { border-bottom:2px solid #ff9c00;}
.releation small {display:none; }
#QRkmflist { list-style-type:none; width:100%; overflow-y: auto; overflow-x:hidden;margin:0 auto!important; padding:0 5px 0 0; }
/*scroll bar樣式，僅chrome & safari有效*/
#QRkmflist::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(55,98,151,0.3); background-color: #F5F5F5; }
#QRkmflist::-webkit-scrollbar {	width: 6px;	background-color: #F5F5F5; }
#QRkmflist::-webkit-scrollbar-thumb { background-color: #376297; }
  #QRkmflist li { list-style-type:none; margin-top:-1px; border-width:1px 1px 1px 6px; border-style:solid; border-color:#E0E0E0; padding:5px 5px 5px 0; width:calc(100% - 11px); display:table;}
  #QRkmflist li:hover { background-color: #F2F2F2!important;}
  #QRkmflist a.QRkmfile {text-decoration: none;display:table-row; width:100%; border: 1px solid #E0E0E0; line-height: 1.8; color:#000;}
  /* 完成度 */
  #QRkmflist a.QRkmfile .progress {display:table-cell; width:24px; vertical-align:top;}
  #QRkmflist a.QRkmfile .progress img { max-width:100%; height:auto; }
  #QRkmflist a.QRkmfile .content {display:table-cell; vertical-align:top; width:calc(100% - 24px); padding-left:3px;}
  /* KMFile Title */
  #QRkmflist a.QRkmfile .content .title {font-size: 16px; font-weight:600; line-height: 1.5; margin:0.1em 0 0.5em; text-overflow:ellipsis;overflow : hidden; display:-webkit-box; display:box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
  /* 困難度 & 常考 */
  #QRkmflist a.QRkmfile .content .iF, #QRkmflist a.QRkmfile .content .iD { font-size: 14px;display:inline-block;width: 48%; color:#919191;}
  /* 常用、困難的幾顆圈圈 */
  #QRkmflist .QRkmfile .maru { font-size: 16px;color: #FF9C00; }
  #QRkmflist .QRkmfile .author {font-size: 14px;dwhite-space:nowrap;color:#919191; }
  #QRkmflist img {
  mix-blend-mode: multiply;/*圖片去背*/
  }


@media screen and (max-width: 991px) and (orientation: landscape) {
#TabMenu { overflow:auto; }
#QRkmflist { width:90%; height: 100%;}
/* #QRkmflist .QRkmfile .author { display:none; } */

}
@media screen and (min-width: 992px) {
.releation { border-bottom:1px solid #E0E0E0;padding:2.5em 1em 0;color:#808080; 
background: -moz-linear-gradient(top, rgba(242,242,242,0) 40%, rgba(242,242,242,1) 100%);
background: -webkit-linear-gradient(top, rgba(242,242,242,0) 40%,rgba(242,242,242,1) 100%);
background: linear-gradient(to bottom, rgba(242,242,242,0) 40%,rgba(242,242,242,1) 100%); }
.releation small {display:block;} 
#QRkmflist { max-height:440px;}
#QRkmflist:after {content:" "; height:60px; display:block;background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,0) 100%);
background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,0) 100%);
background: linear-gradient(to bottom, rgba(242,242,242,1) 0%, rgba(242,242,242,0) 100%); }
}
@media screen and (min-width: 1367px) {
#QRkmflist { max-height:530px;}
}
@media screen and (min-width: 1441px) {
#QRkmflist { max-height:720px;}
}


/*File返回時，若屬無多個KM，彈出選擇KM選單*/
#selectForm { /*display:none;*/padding:16px 66px; border:2px solid #8dbcd3; border-radius:20px; background-color:#f9fbfc; line-height:1; width:60%; margin:15px auto 30px;}
#selectForm h2 {color:#4F81BD;}
#selectForm h2 small { font-weight:normal; color:#97a3af;}
#selectForm #belong { }
#selectForm #belong .selHint {font-weight:normal; text-align:left; margin-bottom:0}
#selectForm #belong .selHint span:first-of-type { background-color:#97a3af; display:inline-block; padding:8px 15px; color:#ffffff;}
#selectForm #belong .selHint span:last-of-type {display:inline-block; padding:0 8px; color:#97a3af; font-size:15px;}
#selectForm ul { margin-top:0;}
#selectForm ul, #selectForm li { list-style:none; text-align:left; padding:0;}
#selectForm li { font-size:1em;border-bottom:1px solid #8dbcd3;line-height:3;}
#selectForm li:nth-of-type(1) { border-top:1px solid #8dbcd3;}
#selectForm a { color:#1f2d3d; display:block; width:100%; text-decoration:none; padding-left:15px; padding-right:15px;}
#selectForm a.intro { color:#1f2d3d; display:inline;} 
#selectForm li:hover  { background-color:#81ade2;}
#selectForm li:hover a {color:#F0F700; }

#selectForm p { text-align:right;line-height:1.7; font-size:14px;}
#selectForm img { vertical-align:middle;}

#player #KM:hover #selectForm { font-size:large;}
@media (max-width:767px) {
	#selectForm { padding:16px 15px; width:90%; margin:0 auto 30px; }
    #selectForm h2 { margin-top:0;}
    #selectForm h2 small {display:block;line-height:1.7;}
    #selectForm #belong .selHint { display:table-row;}
    #selectForm #belong .selHint span:first-of-type { display:table-cell; padding:0 4px; width:90px; vertical-align:middle;}
    #selectForm #belong .selHint span:last-of-type {display:table-cell; width:calc(100% - 90px);font-size:14px; vertical-align:middle;}
}
@media (min-width:768px) and (max-width:991px) {
    #selectForm { padding:16px 15px;  width:86%; margin:0 auto 30px; }
    #selectForm #belong .selHint span:first-of-type { padding:8px 12px; }
    #selectForm #belong .selHint span:last-of-type {padding:0 0 0 6px; }
    #selectForm a { padding-left:12px; padding-right:12px;}
}

#goTop {
    position: fixed;
	_position: absolute; 
	bottom: 10px;
    right:5px;
	cursor: pointer;
	width:50px;
	height:50px;
	line-height:50px;
	font-size:17px;
	vertical-align:middle;
    display: none;
	margin:0;
	background-color:#fafafa;
	color:#5E5951;
	border:1px solid #ccc;
	z-index:1; 
	text-align:center;
	border-radius:50%;
	top:expression(documentElement.scrollbottom+"px");
}
@media (min-width:991px) {
#goTop {right:1.5%;bottom:2%;}
}


/*CardLogin.aspx*/
.row {
	display:table;
    width:100%;
}
.col-25 {
	position: relative;
	display:table-cell;
}
.col-25 { width:25% }

.serial-title { display:table; width:100%; background-color:#EDE8D1; color:#7a7870; padding:8px 0; margin-bottom:0; text-align:center}
.serial-title a { font-size:15px;}
#serial .public {background-color:#01C9D3;}
#serial .lawyer {background-color:#FC624F;}
#serial .school {background-color:#AA0347;}
#serial .nurse {background-color:#3E004D;}


#serial .col-25 b { display:block; text-align:center; color:#FAFF51;padding:5px; font-size:18px;}
#serial .col-25 a { display:block; text-align:center; color:#fff; padding:5px;text-decoration:none;}
#serial .col-25 a:hover { text-decoration:underline;}
#serial .col-25 .audition { background-color:#737373; color:#fff; font-size:15px; padding:4px 12px; border-radius:8px;}
@media (max-width:767px) {
.row {display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-wrap: wrap;/*自動換行*/
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;}
.col-25 { width: 50%;  justify-content: center;}

}

/*首頁--end*/
/*滾動卷軸，右下出現的使用說明按鈕
#help  {
	padding: 15px;
    width:45px;
    height:45px;
	right: 10px;
	text-align: center;
	display: none;
	position: fixed;
	z-index: 99;
    border-radius:50%;
    text-decoration:none;
	color: #fff;
	top: 80%;
    margin-top:-80px;
	background-color:#23A6D5;
}
#help:hover {background-color:#FF9C00; text-decoration:underline;}
@media (max-width: 767px) {
#help {	right: 0;width:41px; height:41px; padding: 8px;}
}*/
#showAns {display: none;}
#floatMenu { display: none;}
#help, #auth, #cart {
    display: none;
    /*
	font-size:15px;
    right: 0.5%;
    width: 50px;
    height: 50px;
    padding: 4px;
	text-align: center;
	position: fixed;
	z-index: 99;
    border-radius:50%;
    text-decoration:none;
	color: #fff;
	bottom: 154px;
    display:block;*/
}
#auth {
	background:rgba(31, 73, 125, 0.85);
}
#help {
    bottom: 102px;
	background:rgba(35, 166, 213, 0.85);
}

#help:hover, #auth:hover, #cart:hover {background-color:#FF9C00;}

#cart {
	background-color:#FF9C00;
    background: linear-gradient(-45deg, #FF9C00, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

#showAns a { padding:5px 5px 0; font-size:15px; width:34px; height:auto;line-height:1.2;left:0px; text-align:center; position: fixed; text-decoration:none; color: #fff; bottom:50px; background-color:rgba(41, 84, 116, 0.75);;}
#showAns a:hover{background-color:#FF9C00;}
@media (min-width:992px) {
    #showAns a { padding:6px 6px 0; width:20px; bottom: 65%;}
}


/*Search no result recommand product*/
/*產品區塊*/
.card {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  padding:0;
  background-color:#ffffff;
  border:1px solid #dcdcdc;
  -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  align-content:flex-start;
  position:relative;
}

/*產品縮圖*/
.card .thumb{
  overflow:hidden;
  width:100%;
  text-align:center;
  position:relative;
  background: url(../Image/btn_play.png) center no-repeat #ededd4;

}
.card .thumb > img{
  max-width:100%;
  height:auto;
  width:100%;
  display:block;
}
.card .thumb div.btn_play { display:none; width:100%; height:100%;position:absolute;top:0; left:0; color:#ffffff;}
.card .thumb div.btn_play img {margin-top:calc(22.5% - 23px); }
/*產品名*/
.card h1 {
  font-size: 1.2rem;
  margin: 7px 15px 0;
  min-height:2.25rem;
  line-height:1.2;
  width:100%;
  position:relative;
}
/*師資*/
.card strong {
  color: #3e4042;
  margin: 5px 15px 0;
  width:100%;
}

/*產品關鍵字*/
.card p {color:#787878;margin: 15px 11px 48px 13px; line-height:180%; font-size:15px; width:100%}
.card p i {font-size:13px; background-color:#1F497D; color:#ffffff; padding:1px 2px;border-radius:3px;font-style:normal; }
.card p em{font-style:normal; margin-left:3px;}
.card p b {color:#D30000;}
/*產品按鈕*/
.card > div {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  justify-content:space-around;
  align-items:center;
  width:100%;
  position:absolute;
  bottom:0;
}
.card > div a {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  justify-content:center;
  flex:1;
}
.card .btn_buy, .card .btn_more { margin-bottom:-1px; padding:8px 0; border-bottom-width:5px; border-bottom-style:solid; text-decoration:none;}
.card .btn_buy {color:#5b5c5e; border-color: transparent}
.card .btn_more{color:#5b5c5e; border-color: transparent}

.card .btn_buy:hover{ color:#f08300;border-color:#f08300;}
.card .btn_more:hover{color:#1f497d;border-color:#1f497d;}

.card a.thumb:hover div{ display:block;}
.card a.thumb:hover > img {filter:blur(4px) brightness(75%);}
.co-100 { flex:1}
.container {margin: 0 auto; width:100%}
.flex-row {
	display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center}
.flex-row .forU { padding: 15px 0;}
@media (max-width: 480px){
.container {width: calc(100% - 30px);}
}
@media (max-width:639px) {
/*.container { width:480px;}*/
.container { width:100%;}
.card {margin:0 10px 20px;}
.co-25 { width:400px; margin-left:auto; margin-right:auto;}
.card .thumb{ height:180px; }
.card .thumb img { margin-top:-2px;}
}
@media (max-width:375px) {
.card .thumb{ height:160px; }
}

@media (min-width:640px) {
.container { width:100%;}
.co-25{width:calc(33.33% - 6px);margin:0 3px 15px;}
.card .thumb{ height:136px; }
}
@media (min-width:768px) {
.co-25 .serial {margin-left:-5px;}
.card .thumb{ height:143px; }
.card p { margin:5px 11px 41px 13px;}
}
@media (min-width:992px) {
.co-25{width:calc(33.33% - 30px); margin:0 15px 15px;}
}
@media (min-width:1200px) {
.co-25{width:calc(25% - 16px); margin:0 8px 30px;}
.card .thumb{ height:145px;}

}
@media (min-width:1440px) {
.container {width:1400px;}
.card .thumb{ height:160px;}
.card p {  margin:5px 11px 48px 13px;}
}


/*面授課程按鈕*/

.listen-btn { /*.card > div */
  padding-bottom: 10px;
  align-items:center;
}
.listen-btn a {
  transition: all 0.2s linear;
  text-decoration: blink;
  padding: 0;
  border-radius: 3px;
  margin: 0 3.5%;
  background-color: #ffffff;
  border: 1px solid #1F497D;
  color: #1F497D;
  height: 30px;
  line-height:30px;
}
.listen-btn a:nth-child(3) {
  background-color: #f08300;
}
.listen-btn a:hover {
  background-color: #1F497D;
  color: #ffffff;
}

/*訂單 橘底標籤*/
.OFCheck {font-size:13px; background-color:#ff9c00; color:#ffffff; padding:1px 8px;border-radius:5px;font-style:normal; margin: 0 6px 0 6px ;}
/*試聽 綠底標籤*/
.iMode1 {font-size:13px; background-color:#2ec07d; color:#ffffff; padding:1px 8px;border-radius:5px;font-style:normal; margin: 0 6px 0 6px ;}
/*會員 灰底標籤*/
.iMode2 {font-size:13px; background-color:#a2a2a2; color:#ffffff; padding:1px 8px;border-radius:5px;font-style:normal; margin: 0 6px 0 6px ;}
/*KM 藍底標籤*/
.iMode3 {font-size:13px; background-color:#4f79af; color:#ffffff; padding:1px 8px;border-radius:5px;font-style:normal; margin: 0 6px 0 6px ;}
.iModeSource {color:#999;font-size:0.9em}
/*.from {font-size:13px; background-color:#9f9f9f; color:#ffffff; padding:1px 8px;border-radius:5px;font-style:normal; margin: 0 6px 0 6px ;}*/
.from {font-style:normal; margin: 0 0px 0 6px ;}

/*#FileContent img {
/*文繞圖垂直置中
vertical-align:middle;
mix-blend-mode: multiply;/*圖片去背
}*/

#QRkmfilelist .QRkmfile .content img {
vertical-align:middle;
}

/*題組*/
#Bundle{
border-width:2px;border-style:solid;border-color:#e0e0e0;padding:15px;margin:0 0 20px 0;
}

/*自訂標號，括弧流水號*/
#brackets ol {
  list-style: none;
/*  命名自訂標號變數  */
  counter-reset: my-counter;
}
#brackets ol li {
/*  使用自訂標號  */
  counter-increment: my-counter;
/* 段落首行縮排 */
  text-indent: -1.7em;
}
/* 以偽元素自訂標號樣式 */
#brackets ol li::before {
  content: "("counter(my-counter) ")";
  margin-right:0.5em;
  /*color: blue;
  font-weight: bold;*/
}

/*段落橫線*/
        #link-top {
            width: 100%;
			margin:1em 0;
            /*height: 10px;*/
            border-top: solid #ACC0D8 1px;
        }

.KMFilelist a {
	text-decoration:none;
	color:#4f79af;
}
.KMFilelist a:hover {
	color:#ff9c00;
}


.label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}

.bg-carrot {
    background-color: #fe8929;
    color: #fff;
	}