*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html {
	font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
body {
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
    margin: 0
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

a {text-decoration: none;}

img { border-width:0 }

.flex-row {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content:flex-start;
}

/*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:30px;
	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) {
	#account:hover .nav-content {
		margin-left:-90px
	}
}
@media (max-width:374px) {
	#BodyHeader #logo { width:180px; padding-left:0;}
    #BodyHeader #account .nav-head.about { display:none;}
	}
@media (min-width:768px) and (max-width:991px) {
	#account:hover .nav-content {
		margin-left:-75px
	}
}
/* dropmenu END */
@media screen and (max-device-width: 480px) {
/*	#BodyHeader {
		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 #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: 10px 10px 2px;
		width:85px;
	}*/
}
/*Header End*/

/*Menu BEGIN*/

#BodyMenu { background:url(../Image/bg_banner.png) bottom right no-repeat #f7f7ec; background-size:180%;}
    #AD, .mainSubject{
      display: flex;
      display: -webkit-flex;
      display: -ms-flex;
      -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
    }
    #AD .owl-item {padding:0;}
    .banner .item{box-shadow:0 0 10px 0 rgba(0,0,0,0.3); display:block;}
    #AD {width:100%; padding:0;}
    .mainSubject { width:100%; margin:0; padding:15px 30px;letter-spacing:2px;}
    .mainSubject a {text-decoration:none;color:#333333;}
    .mainSubject h1 {font-size:22px;line-height:46px!important; height:42px; vertical-align:middle; margin:0 0 5px}
	
    .mainSubject span {background-color:#d9534f; color:#ffffff; font-weight:normal;font-size:12px; padding:2px 3px; border-radius:3px;vertical-align:bottom;}
    .mainSubject h1 img {vertical-align:bottom; padding-right:15px;}
    .mainSubject h1:after {content:url(../Image/ico_course_more.png); display:inline-block; padding-left:15px;}
    .mainSubject p { margin:-10px 0 0 52px; }
    .mainSubject p a {color:#4f79af; padding:0 10px; display:inline-block;}
    .mainSubject .btn_forsale {display:block; padding:0; margin:5px 0 0 60px; width:200px; height:43px; line-height:43px;  border-radius:25px; background-color:#f08300; color:#ffffff; font-size:18px; font-weight:bold; text-align:center;}
    .mainSubject .btn_forsale img {vertical-align:middle; padding-right:5px;}
/*Menu End*/

/* Footer */
#BodyFooter {
  font-size:15px;
	/*margin-top:5em;*/
	/*padding-bottom:5em;*/
	padding-bottom:1em;
	background-color: #F2F2F2;
    padding-top:40px;}
#BodyFooter #footerEND {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	-ms-flex-wrap: wrap;
	-webkit-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;
}

/*Content*/
#BodyContentMainNavigator {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content:flex-start;
  align-items:center; /*物件置中對齊*/
  padding: 15px;
  font-size: 15px;
}

#BodyContentMainNavigator a {
	color: #999;
	text-decoration: none;
}
#BodyContentMainNavigator a:hover {
	color: #1f497d;
    text-decoration:underline;
}
#BodyContentMainDetail{ justify-content:center;}

/*登入、註冊 共用按鈕*/
.login-form, .login-form form {
    display: flex;
	display: -webkit-flex;
	display: -ms-flex;
    flex-wrap:no-wrap;
	-webkit-flex-wrap:no-wrap;
	-ms-flex-wrap:no-wrap;
    flex-direction:column;
	justify-content: center;
    align-items:center;
    width:100%;
  }
.login-form h1 {font-size:26px;}

.login-form h3 {
	color:#4f79af;
	border-bottom:1px dotted #4f79af
}


.login-form div b {color:#ed540e;}
.login-form div small {color:#ed540e;}
.login-form a { color:#4f79af; text-decoration:underline;}
.login-form a:hover { text-decoration:none;}
.login-form a.soldier { background-color:#4f79af;color:#ffffff; padding:2px 7px; border-radius:7px;text-decoration:none;}
.login-form a.soldier:hover { background-color:#23a6d5;}
.login-form form > div { max-width:310px; margin-bottom:10px;flex-direction:column;}
.login-form form > div > label {display:flex;color:#1f497d; font-weight:bold;}
.login-form form > div > label:before {content:"．"; color:#1f497d;}
.inputs {
	display: inline-flex;
    width:208px;
    background-color: #c9c9ce;
    border-radius: 0.5em;
    color: #FFF;
    font-size: 16px;
    line-height: 2;
    margin: 0.5em;
    padding: 5px;
    border: 1px solid #7b7b7b;
}

.login-form.reg input[type="text"], .login-form.reg input[type="password"], .login-form.reg select, .login-form.confirm input {
	display: inline-flex;
    width:270px;
    background-color: #f3f3f3;
    border-radius: 0.25em;
    color: #525252;
    font-size: 16px;
    line-height: 1.7;
    margin:8px 5px;
    padding: 5px;
    border: 1px solid #aeaeae;
}
.login-form.reg select {   
    height:39px;
    max-width:235px;
}
.login-form.reg .w80 { width:78%; margin-right:0}
.login-form.reg .w20 { width:18%;}
.login-form.reg .w25 { width:25%;}
.login-form.reg .w50 { width:50%;margin-right:0}

.login-form.reg img { max-width:100%; height:auto;}

.options { display:flex;width:270px; margin:8px 15px; flex-direction:row; flex-wrap:wrap;align-items:center;}
.options label { width:100%;}
.help-block { color:#ed540e; font-size:14px; display:block; margin:-5px 0 15px; width:265px;align-items:center; }
#iMemberType1, #iMemberType2 { margin-left:30px;}

#LoginBtn {
	width:208px;
    background-color: #ff9c00;
    border-radius: 0.5em;
    color: #FFF;
    cursor: pointer;
    font-size: 16px;
    padding: 0.5em;
    margin: 0.5em;
    border: 0;
}
#cancelBtn {
	width:208px;
	background-color: #F2F2F2;
	border-radius: 0.5em;
	color: #000;
    cursor: pointer;
    font-size: 16px;
    padding: 0.5em;
    margin: 0.5em;
    border: 0;
}
#LoginBtn:hover, #cancelBtn:hover { background-color:#23a6d5; color:#fff;}
.submit {/*送出、取消列*/
  width:100%;
  padding:30px 0;
  justify-content:center!important;
  flex-direction:row!important;
}
.txtBtn {
  font-size: 15px;
  margin-bottom: 48px;
  margin-top: 16px;
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  width:280px;
  justify-content:space-around;
  align-items:center;
}
.txtBtn a {width:90px;text-align:center; color:#767e88;background-color:transparent;padding: 5px 0;}

.step {
    padding:8px 15px;
	margin:15px;
	color:#aeaeae;
	background-color:#F2F2F2;
	border-radius:5px;
}
.step .active {
	font-weight:bold;
	color:#000
}
#phone_content { margin-top:30px;}
#phone_content a { color:#fc8000;}

#BodyContentMainDetail .mainSubject { border:1px solid #ededed; border-radius:10px;padding:15px; width:100%; background-color:#f9f9f6}
#BodyContentMainDetail .mainSubject h1 { text-align:center;}

/* 會員個人資料保護權益事項 */
#agree { 
	width:100%;
}
#agree #agree_content {
	line-height:1.5;
}
#agree_content h1 {font-size:23px;}
#agree_content h2 {
  font-weight:bold;
  color:#41a4ce;
  font-size:18px;
}


/*課程書摘頁ProducrDetail.aspx*/
#ProductDetail { width:100%; margin:0 auto;}

#ProductDetail h1 {
	color: #000;
	font-size: 24px;
	text-align: center;
	line-height: 180%;
}

#ProductDetail > .flex-row {
	background-color: #E1E1E1;
	margin:0;
	padding:0;	
}

#ProductDetail .flex-row div {
	margin: 0;
	padding:3px 0;
}
    .TabMenuWhite, .TabMenuBlue, .TabMenuOrange{
        line-height:58px;
        height:58px;
        vertical-align:middle;
    }
    .TabMenuWhite {
        width:115px;
        text-align:center;
        color:#4f81bd;
        background-color: #FFF;
        border-top:3px solid #4f81bd;
        border-left:1px solid #E1E1E1;
        border-right:1px solid #E1E1E1;
        border-bottom:1px solid #FFF;
    }
    .TabMenuBlue {
        width:115px;
        text-align:center;
        color:#4f81bd;
        margin:0;
        border-right:1px solid #F5F5F5
    }
    .TabMenuBlue a {
        padding:0;
        margin:0;
        color:#000;
        text-decoration: none;
    }
    
    .TabMenuBlue:hover {
        background-color:#f0f0f0;
    }
    .TabMenuOrange {
        width:115px;
        text-align:center;
        border-radius:0.25em;
        color:#ffffff;
        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;
    }

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
    #ProductDetail .TabMenuOrange a {
        color:#FFF;
        text-decoration: none;
        vertical-align:middle
    }
    #ProductDetail .TabMenuOrange:hover a {
      text-decoration:underline
    }
.parts {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  align-content:stretch;
  justify-content:flex-start;
  border: 1px solid #E1E1E1;
  border-top-width:0;
}
.parts > div {
  	padding: 10px 10px;
	min-height:22px;
    width:100%;
    margin:0 auto;/*.flex-row*/
}
.parts .item {
	width: 100%;
	color: #1F497D;
	font-weight: bold;
	background-color: #E1EEFD;
    min-height:22px
}
.parts .publish-date {
	width: 100%;
}
.parts .content {
	width: 100%;
}
#ProductDetail a:hover { text-decoration:none;}

#ProductDetail h2 {
	color:#41a4ce;
	font-size:1.15em;
	font-weight:bold;
	padding:10px 10px 0px 0px;
	margin:0;
	border-bottom: 1px dotted #41a4ce;
}
#ProductDetail li {
	padding:4px 0;
}
#ProductDetail li > ul {
	padding-left:20px;
	list-style-image:url("../image/ico_list.png"); 
}

#ProductDetail .system{
    -webkit-column-count:1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
	padding-left:25px;
	line-height:180%
}
	/*縮和、開啟目錄*/
    .expandCh {color:#4f81bd; margin:16px auto; width:100%;}
    .expandCh > li { border-top:1px solid #E9E9E9; padding:8px!important; cursor:pointer;}
    .expandCh > li > b:after { content:url(../Image/ico_down_arrow.png); padding:2px 8px}
    .expandCh > li > ul > li > b:after { content:none;}
    .expandCh > li:last-child { border-bottom:1px solid #E9E9E9;}
    .expandCh > li:hover {background-color:#E1EEFD;}
    .expandCh > li > ul { color:#000;}
    .expandCh a { display:block; margin-top:-32px;width:100px; float:right;text-align:right; margin-bottom:6px;}
    .expandCh a div {display:inline-block;background-color:#f38000; color:#ffffff; padding:3px 10px;border-top-left-radius:12px; border-bottom-right-radius:12px;}
    .expandCh a:hover div {background-color:#2ec07d;}
    .openAll { display:block; width: 120px; padding:4px 0; text-align:center; background-color: #ce418d;color:#fff; text-decoration:none; float:right; margin-top:-17px;}
    .expandCh small{background-color:#CFDADF; border-radius:5px; padding:2px 5px;}
    /*目錄內篇章節的註解*/
    .qus-list {font-size:14px; color:#3a96ba;}
    .qus-list:before{content:"Q.";}
    
/* ProductDetail.aspx- 我想了解更多/ 提示登入 */
#support {
   margin-top: 1em;
   padding: 0.5em;
   text-align: center;
}
    #popForm, #alertNote {
        border: 3px solid #B9CDE5;
        background-color: #FFF;
        display: none;
        padding: 1em;
    }
    #popForm p {
        line-height: 1.8;
    }
    .close {/*關閉視窗 */
	background-color:#fb8b00;
	float:right;
	padding-top:3px
    }
    .close a {
        border-radius: 0.5em;
        color: #B9CDE5;
        padding: 0.2em 0.3em;
        text-decoration: none;
    }
    #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;
    }
/*show modal END*/

/*ListChpter.aspx*/
.ChapterPath {
	font-size: 1em;
	margin: 0.75em 0.25em 0.75em 0.5em;

}
.ChapterPath a {
	text-decoration:none;
	color:#4f79af;
}
.ChapterPath a:hover {
	color:#ff9c00;
}
#ProductDetail .list a {
	color: #000;
	text-decoration: none;
}
#ProductDetail .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;
}
#ProductDetail .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;
	padding: 1em;
}

.seeAll { text-align:center;}
.seeAll a { color:#fb8b00;text-decoration:none;}
.seeAll a:hover { text-decoration:underline;}


/*Guide.aspx*/
.fixtop { position:sticky; top:0;box-shadow: 0 0 5px 0 #C1C1C1; background-color:#ffffff;}
  .topmenu .flex-row { justify-content:center; align-content:center; align-items:center; }
  .topmenu .flex-row a {  
    display:  flex;
    align-items: center;
    justify-content:  center;/*讓圖文垂直置中，display, align-items,justify-content*/
    font-weight:bold;
    color:#00679c;	
	text-decoration:none;
    height:42px;
    line-height:42px;
    flex-grow:1;
	margin:0;
    padding:0 5px;
}
  .topmenu .qr { background-color: #dfebf4;}
  .topmenu a:hover {
	text-decoration:underline;
	cursor:pointer
  }
  .topmenu.active {background-color:#799ecb; }
  .topmenu.red { bottom:200px;}
  .text-center { text-align:center; margin: 0 auto;}
#guide h1, #guide h2, #guide h3 { text-align:center;}
#guide h1 {padding-top:30px;}
#guide section { padding:30px 0;}
#guide .flex-row { max-width:980px; margin:0 auto; }
#guide #Use .flex-row { max-width:1060px;}
   #rule .flex-row {border:1px #41a4ce solid;}

#guide .co-50 > table {
	padding: 45px 25px 0
}
#System td, #System th { padding:0 10px; margin:0; line-height:2.2;}
#System th { border-bottom:1px #41a4ce solid;}
#guide .co-33 { padding:0 15px 30px; margin: 0 auto;}
.center-block {text-align:center; max-width:100%; height:auto;}


/*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;
	font-size: 0.9em;
    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) {
	.mainSubject { width:320px; padding: 10px 0 15px; 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;}

/*課程介紹*/
.parts .item {width: 113px; text-align:center;}

.parts .publish-date, .parts .content {
  width: 113px;/*要有值，才能延展*/
  flex-grow:1;
}
#ProductDetail .system{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

/*Guide.aspx*/
  .topmenu .flex-row { width:768px; margin:0 auto;}
  #guide .co-66 { width:66%;}
  #guide .co-50 { width:50%;}
  #guide .co-33 { width:33%;}
  #guide .co-66 > ul, #guide .co-50 > table,#guide .co-66 > p {
	padding-left: 15px;
	padding-right: 15px
  }
  #guide #Use .flex-row .co-33 p {min-height:52px; display:flex; align-items:flex-end;}

}

@media (min-width:768px) and (max-width:991px) {
#BodyHeader{}    
#BodyMenu{}
    #AD {width:calc(100% - 320px); margin:5px auto;}
    .mainSubject h1 { font-size:20px}
    .mainSubject h1 img { padding-right: 10px;}
    .mainSubject p { margin-left:48px; }
}
@media (min-width:992px) {
#BodyHeader #account {width:264px;}
#BodyMenu{}
    #AD {width:60%; margin:15px auto;}
    .mainSubject { margin:35px auto 30px;}
    .mainSubject h1 { width:100%;font-size:22px;line-height:42px!important; height:42px;}
    .mainSubject p { margin:-15px 0 0 52px; }
    .mainSubject .btn_forsale {height:42px; line-height:42px; font-size:18px;}    
    /*.login-form {width:60%; margin:15px auto;}*/

.login-form.reg select { width:auto; }
.options { width:calc(100% - 220px);padding-left:0;height:55px; margin:0 15px auto; align-items:center; }
.options label { min-width:70px; width: auto;}
.options:not(:first-of-type) { padding-left:94px;}

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


#ProductDetail { width:90%;}
.parts > div {padding: 10px 35px;}
}
@media (min-width:1200px) {
    .mainSubject { width:420px;}
    
}
@media (min-width:1440px) {
#BodyMenu{}
#BodyMenu .container { width:1280px;}  
    #AD {width:720px; margin:15px auto;}
    .mainSubject { margin:35px auto 30px; }
}
/*Header, Menu,  Footer END*/


@keyframes mousehover {
  0% {
   opacity: 1;
  }
  100% {
    opacity: 0.05;
  }
}

/*Content*/
.serial {
  font-size:19px;
  font-weight:bold;
  padding:20px 0 15px;
  width:100%;
  color:#333333;
  display:block;
}

/*首頁系列並排*/
.serial2 {
  font-size:19px;
  font-weight:bold;
  padding:0px 0 15px 0px;
  margin:-45px 0px 0px 10px;
  width:6%;
  color:#333333;
  display:block;
}

.serial:after {content:" "; width:56px; display:block; border-bottom: 5px solid #fc9928;  flex:none;}
/*首頁系列並排*/
.serial2:after {content:" "; width:56px; display:block; border-bottom: 5px solid #fc9928;  flex:none;}
.single {
	color:#f08300;
	font-weight:bold;
	margin:7px 0;
	padding:0;
    display:flex;
    width:100%;
    justify-content:space-between;
    align-items: center;
    flex-wrap:wrap;
}
.block { flex:1;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content:center;
}
.buysingle {
	background-color:#f08300;
	border-radius:5px;
    margin:0 3px;
	color:#FFF;
	font-weight:bold;
	padding:1px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content:center;
    flex:1;
}

#SC1 {
	margin-left:62px
}
#SC2 {
	margin-left:166px}
/* dropmenu END */





/*首頁 下端藍色列*/
#goFB {
    position: fixed;
	_position: absolute; 
	bottom: 0;
    right:0;
    left:0;
	cursor: pointer;
	width:100%;
	padding:5px 0;
    display: none;
	margin:0;
	background-color:#1f497d;
	top:expression(documentElement.scrollbottom+"px");
	z-index:1; 
	text-align:center
    }
#goFB img { padding:0 8px; display:inline-block }
#goFB .FB {border-left:1px solid #a5b6cb; border-right:1px solid #a5b6cb }
@media (max-width: 767px) {/*mobile*/

#goFB img { width:90px }

}
@media (min-width: 768px) {
.block {flex:100%;}

#goFB {
	padding:5px 0 1px;
}
#goFB img { padding:0 25px }
}
@media (min-width: 992px) {
.block {flex:1;}
}
/*首頁--end*/



@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

/*滾動卷軸，右下出現的購物按鈕*/
#floatMenu { }
#help, #auth, #cart {
	font-size:15px;
    right: 0.5%;
    padding: 4px;
	text-align: center;
	position: fixed;
	z-index: 99;

    text-decoration:none;
	color: #fff;
	bottom: 104px;
    display:block;
}
#auth {
	background:rgba(31, 73, 125, 0.85);
}
#help {
    bottom: 52px;
	background:rgba(35, 166, 213, 0.85);
}
#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;
  bottom: 156px;
}

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



/*產品區塊*/
.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;
}

/*封面圖333*160高度全秀*/
/*
.card .thumb > img{
  max-width:100%;
  height:100%;
  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.new { position:relative;}
.card.new .thumb:before { position:absolute; background-image: linear-gradient(50deg,  #d10205, #d15202); color:#ffffff; font-size:13px; content:"New"; padding:3px 20px 3px 15px; bottom:0; left:0; border-top-right-radius:40px}
/*///.card.new .thumb:before { position:absolute; background-image: linear-gradient(90deg,  rgba(255,179,172,1) 0%, rgba(236,88,68,1) 8%, rgba(209,25,1,1) 50%,rgba(209,82,2,1) 80%, rgba(209,82,2,0) 100%); color:#ffffff; font-size:14px; content:"New"; padding:3px 30px 3px 15px; top:0; left:0;}
///*/

/* 左上緞帶 */
.ribbon {
  width: 80px!important;
  height: 80px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before, .ribbon::after {
  position: absolute;
  z-index: 0;
  content: "";
  display: block; 
}
.new::before,.new::after { border:4px solid #991200;}
.coming::before,.coming::after { border:4px solid #8c6f2e;}
.ribbon span {
  position: absolute;
  display: block;
  width: 113px;
  height:24px;
  font-size:16px;
  padding:1px 0 0;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-align: center;
  right: -8px;
  top: 19px;
  transform: rotate(-45deg);
  z-index:1;
}

/* top left*/
.new, .coming{
  top: -2px;
  left: -2px;
}
.ribbon::before {
  top: 0;
  right: 0;
}
.ribbon::after {
  bottom: 0;
  left: 0;
}
.new span { background-image: linear-gradient( 90deg,#ec5844 0%,#d11901 50%, #ec5844 100%)}
.coming span { background-image: linear-gradient( 90deg,#d9be75 0%,#8c6f2e 50%, #d9be75 100%)}

.txt_coming {position:relative!important;text-align:center;height:94px; line-height:94px;vertical-align:middle;background:url(../image/blockquote.png) center no-repeat}
.txt_coming span {color:#a9bcd0; font-size:24px}
/*產品名*/
.card h1 {
  font-size: 1.2rem;
  margin: 7px 15px 0;
  min-height:2.25rem;
  line-height:1.2;
  width:100%;
  position:relative;
}
.card h1 em {  font-style:normal; padding:1px 5px 0; margin-left:-5px; position:relative;z-index:1;/* color:#f08300*/}
.card h1 em:after { content:" "; width:100%; height:100%; border-radius:6px;background:rgba(255,167,62,0.6)/*background:linear-gradient(0deg, rgba(255,167,62,1) 0%, rgba(255,167,62,0) 100%)*/; position:absolute; bottom:0; left:0;z-index:-1;}
/*師資*/
.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_new, .card .btn_buy, .card .btn_more { margin-bottom:-1px; padding:8px 0; border-bottom-width:5px; border-bottom-style:solid;}
.card .btn_new {color:#d9534f; border-color: #d9534f; }
.card .btn_buy {color:#5b5c5e; border-color: transparent}
.card .btn_more{color:#5b5c5e; border-color: transparent}

.card .btn_new:hover{ background-color:#d9534f; color:#fff}
.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}
/*#public, #nurse{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch; align-content: flex-start;}*/
@media (max-width:639px) {
.container { max-width:480px;}
.card {margin:0 10px 20px;}
.co-25, .co-33, .co-50, .co-66, #nurse .co-100 { max-width:400px; margin-left:auto; margin-right:auto;}
.card.co-100 {  margin: 0;}
.card .thumb{ height:180px; }
.card .thumb img { margin-top:-2px;}
}
@media (max-width:375px) {
.card .thumb{ height:160px; }
}

@media (min-width:640px) {
.container { max-width:100%;}
.co-25{width:calc(33.33% - 6px);margin:0 3px 15px;}
#public {width:66.66%;}
/*#nurse {width:33.33%;}*/
#public .co-50{flex:1; margin: 0 2.5px 15px;}
.card .thumb{ height:136px; }
}
@media (min-width:768px) {
.serial {margin-left:-10px;}
#public .serial, #nurse .serial, #keypoint .serial {margin-left:5px;}
.co-25 .serial {margin-left:-5px;}

.card .thumb{ height:143px; }
.card p { margin:5px 11px 41px 13px;}
}
@media (min-width:992px) {
#public {width:66.66%;}
#/*nurse {width:33.33%;}*/
.co-25{width:calc(33.33% - 30px); margin:0 15px 15px;}
#public .co-50{ margin:0 15px 15px;}
#nurse .co-100{ margin:0 15px 15px;}
}
@media (min-width:1200px) {
#public {width:50%;}
/*#nurse {width:25%;}*/
.co-25{width:calc(25% - 16px); margin:0 8px 30px;}
.co-33{width:calc(33.33% - 30px); margin:0 15px 30px;}
#public .co-50{ margin:0 8px 30px;}
#nurse  .co-100{margin:0 8px 30px;}
.card .thumb{ height:145px;}

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


/*keypoint爭點*/
.btn_tutor {
  background-color:#d9534f; color:#ffffff; font-size:15px; padding:3px 8px; border-radius:5px; display:inline-block;
}
.intro strong, .intro p { padding:0 10px;}
.intro p {color:#7F7F7F}

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


/*大法官釋字*/
#years {
  padding: 0;
  width: 100%;
  text-align: center;
  margin: 18px 0 0;
}
#yearSelect {
  width: 100%;
}
.btnshowMenu {
  width: 100%;
  height: 32px;
  line-height: 32px;
  vertical-align: middle;
  display: inline-block;
  background-color:  #f08300;
  color:#FFF;
  font-weight: bold;
  padding: 0;
  margin: 0;
}
/* dropmenu BEGIN */
#years .nav-head {
  width: 100%;
  position: relative;
}
#years .nav-head a {
  color:#FFF;
}
#years .nav-content a {
  color: #ffffff;
}
#years .nav-content {
  display: none; /* 隱藏功能表 */
  width:100%;
  background-color:#f08300;
  left:50%;
}
#yearSelect:hover .nav-content, #yearSelect:focus .nav-content {
  display: flex; /* 解除隱藏功能表 */
  display: -webkit-flex;
  display: -ms-flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap; 
  /*position:absolute;讓子選單浮在上層，不會把下面元素往下擠 */
  animation-name: showMenu;
  animation-duration: 0.1s;
  animation-timing-function: linear; 
}
#years .nav-content ul {
  padding: 3px 5px;
  margin:0 0 -5px;
  width:100%;
}
#years .nav-content li {/* 子選單樣式調整 */
  background-color: #f08300;
  border-bottom: 1px solid #f08300;
  list-style: none;
  font-size: 0.85em;
  text-align: center;
  width:100%;
  display:block;
}
#years .nav-content li.litop {/* 裝飾角 */
  color: #f08300;
  background-color: rgba(240,131,0,0);
  border-bottom: 0;
  text-align: center;
  margin-top: -3px;
  margin-bottom: 0;
}
#years .nav-content li.bordetop { /* 子選單上圓角 */
  border-top-left-radius: 0.25em;
  border-top-right-radius: 0.25em;
  border-bottom: 1px solid #dda35e
}
#years .nav-content li.borderbottom {/* 子選單下圓角 */
  border-bottom-left-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
  border-bottom: 0px
}
#years .nav-content ul > li > a {
  display: block;
  padding: 0 8px;
  width: 100%;
  text-align:left;
  vertical-align: top;
  animation-name: showMenuli;
  animation-duration: 0.25s;
  animation-timing-function: ease-in;
  height: 36px;
  line-height: 36px;
}
@keyframes showMenu {
 from {
 opacity:0;
}
 to {
 opacity:1;
}
}
@keyframes showMenuli {
 from {
 opacity:0;
 height: 0;
 line-height: 0;
}
 to {
 opacity:1;
 height: 36px;
 line-height: 36px;
}
}
#years .nav-content ul > li > a:hover {
  color: #FFF;
  background-color: #1F497D;
}

/* dropmenu END */


@media (min-width:661px) and (max-width:1199px) {
.container {
  padding: 0
}
#years { margin-top:19px;}
}


.owl-carousel .card.co-25 { width:calc(100% - 16px);}
.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev {position:absolute;top:35%; font-size:35px;color:#869791}
.owl-carousel .owl-nav button.owl-prev{left:-10px;}
.owl-carousel .owl-nav button.owl-next{right:-10px}


.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:0}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:0}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px;}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

.owl-carousel .owl-item .btn_play img{ display:inline-block; width:auto;}/*線上試聽的圖不要撐大*/

/*首頁系列並排*/
@media (max-width:460px) {
.realestate{
margin: 0 0 30px 0px;
}
}

@media (min-width:461px) and  (max-width:639px) {
.realestate{
margin: 0 0 30px 40px;
}
}

@media (min-width:640px) and (max-width:1200px) {
.realestate{
margin-left:-60px;
}
}

@media (min-width:1201px){
.realestate{
margin: 0 0 30px -85px;
}
}

@media (max-width:639px) {
.serial2 {
  font-size:19px;
  font-weight:bold;
  padding:0px 0 0px 0px;
  margin:0px 0px 15px 0px;
  width:100%;
  color:#333333;
  display:block;
}
}

@media (min-width:640px) and (max-width:1200px) {
.serial2 {
  font-size:19px;
  font-weight:bold;
  padding:0px 0 15px 0px;
  margin:-45px 0px 0px 10px;
  width:9%;
  color:#333333;
  display:block;
}
}

/*ProductDetail詳細介紹頁*/
       #sale-price{color:#e51456;font-weight:bold;}
       #presale{color:#e51456;}
       .alert {border:1px solid #ff9c00; border-radius:8px; padding:3px 15px;}
       .alert a.buy {text-decoration:none;display:inline-block; padding:3px 8px; margin:0 5px;text-align:center;background-color:#ce4169; color:#ffffff;border-radius:5px;}
       .alert:hover { background-color:#fffbed;}
	   .alert a { color:#06C;}
       .alert a:hover{background-color:#417cce;color:#ffffff}
	   .notice a { color:#06C;}
	   .notice a:hover{background-color:#417cce;color:#ffffff}
       li em {font-style:normal; color:#525252;}
      .qus-list:before {content: "- ";}
	  /*ol清單-一二三*/
	  .cjk {list-style:cjk-ideographic}

@media (max-width:767px) {
.nav-head a[title]{
    padding: 3px 8px;	
	font-size: 0.9em;
}
#account:hover .nav-content {
	margin-top:24px;
}

	.container { max-width:470px; padding:0}
}
@media (max-width:480px) {
	.container { width:calc(100% - 30px);}
	#BodyMenu .container { width: 100%;}
}
@media (min-width:768px) and (max-width:991px) {
	.container { width:calc(100% - 30px);}
}
@media (min-width:992px)  {
	.container { width:976px }
}
@media (min-width:1200px)  {
	.container { width:1200px }
}
@media (min-width:1440px)  {
	.container { width:1400px }
}