/*修正「綰」「碧」「筵」三字顯示問題*/
@font-face {
  font-family: '新微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75;
  font-style: normal;
  font-weight: bold;
  src: local(MS Gothic), local(Yu Gothic);
}
@font-face {
  font-family: '新微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75;
  font-style: normal;
  font-weight: normal;
  src: local(微軟正黑體), local(Microsoft JhengHei);
}

body {
	font-family: 'Open Sans', Verdana, Geneva,"新微軟正黑體",'Microsoft JhengHei',"微軟正黑體", sans-serif;
}

html,
body {
  /*height: 100%;不能設定，IE8會無法捲動*/
	line-height:1.7
}



.container {
	padding-left: 0;
	padding-right: 0;
}

#BodyContentMainDetail {
/*AlertMember下拉選單myDropdown定位切右對齊用*/
position:relative;
}

/*話題專欄*/
#Column{
	width:100%;
	padding:0em;
	border: px solid #dcdcdc;
	display:inline-block;
}
#Column ul.Column{
	width:100%;
	float:left;
	padding:2% 2%;
	margin:0% auto 1.7% auto;
	background:#f8f8f8;
	list-style-type: none;
}
#Column ul.Column:nth-child(2n){
	background:#f8f8f8;
}
/*#Column ul.Column li a{color: #555;}*/
#Column ul.Column li.column_img{
	width:22%;
	float:left;
	margin-right: 4px;
	margin-left: px;
}
#Column ul.Column li.column_content{
	width:75%;
	float:left;
}
#Column .column_name{
	font-size: 1em;
	color: #ef544d;
	font-weight: bold;
	line-height: 1.5em;
}

#Column .column_title{
	font-size: 0.8em;
	color: #424b52;
	margin:0.5% 0 0 0;
	line-height:1.4em;
}
#Column .column_title a{
color: #424b52;
}

#Column .column_title2{
	font-size: 0.8em;
	color: #424b52;
	margin:0.5% 0 0 0;
	line-height:1.4em;
}

#Column .column_title2 a{
color: #424b52;
font-size: 0.9em;
}

#Column .column_title2 ul{
margin:0 0 0 -21px;
}
/*黃律的ul格式*/
#Column .column_content .NewsStyle {
	margin: 0;
    padding: 0;
	color: #424b52;
	line-height:1.4em;
}

#Column .column_title ul {padding:0; list-style:none;}
#Column strong, #Column .skip1 ul li:first-child {display:none!important;}
#Column .column_title li{
  	font-size: 1.1em!important;
	color: #424b52!important;
	line-height:1.4em!important;
    padding-left:0!important;
}

/*黃律的li格式*/
#Column .column_title .NewsStyle{
	font-size: 1.1em;
	color: #424b52;
	line-height:1.4em;
	margin-left: 18px;
}

.spacing{
width: 49%;
padding-left:1%;				
}

.interval{
margin: 0 5px 0 5px;
font-weight:bold;
}

@media (min-width: 992px)  { 
.container {	
  width:992px;
  max-width:992px;
  display:table;
}
.container > .row {  display:table-row!important}
.col-sm-push-12 { left:75% }
.col-sm-pull-4 { right:25% }
.container > .row > .col-sm-4 { display:table-cell!important; margin:0 3px 0 10px; padding-left:0; padding-right:0; width:240px; float:left }
.container > .row > .col-sm-12 { display:table-cell!important; margin:0 10px 0 6px; padding-left:0; padding-right:0; float:left; width:721px; vertical-align:top  }
}
@media print { /*bootstrap預設會將超連結網址印出;加以下樣式可不印*/
 a[href]:after { content: none !important; } 
}

/*主架構*/
/*Header---------------------------*/
#BodyHeader { 
	z-index:99;
	font-size:15px;
	margin:0;
	padding:0;
}
.header-bottom {
	float:left;
	width:100%;
	height:4px;
	margin:0;
	padding:0;
	background-color:#2c7db2;
	background: -webkit-linear-gradient(left, #fff, #2c7db2 7%); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #fff, #2c7db2 7%); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #fff, #2c7db2 7%); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #fff, #2c7db2 7%); /* Standard syntax */
}

#BodyHeader .navbar-header, #BodyHeader .navbar-brand, #BodyHeader nav.navbar {
	margin:0;
	padding:0
}

#BodyHeader .loginarea {
	/*margin-top:-3px;
	margin-bottom:12px;*/
	padding: 0;
	font-size:13px;

}

#BodyHeader .loginarea a {	color:#424b52 }
#BodyHeader .login_out {
	padding:2px 10px;
	margin-right:0;
	margin-left:5px;
	text-align:center;
	font-size:13px;
	background-color:#dfdfdf;
}
#BodyHeader .close {
  padding-left:5px;
  padding-right:5px;
  margin-top:-4px;
  line-height: 60px;
  height:60px;
  color: #fff;
  text-shadow: 0 1px 0 #c4c4c4;
  opacity: 0.75;
  filter: alpha(opacity=30);
}
#BodyHeader .btn-danger { color:#fff!important }
#BodyHeader .dropdown-header {/*選單中的標題*/
	color:#9bc8e6
}
#BodyHeader .navbar-toggle {
    float:none;
	padding:5px 15px;
	margin:0;
	color:#2c7db2;
	background-color:#fff/*漢堡排底色*/
}
#BodyHeader .navbar-toggle:focus {
	background-color:#e4f2f8/*漢堡排按下底色*/
}
#BodyHeader .icon-bar {
	background-color:#2c7db2/*漢堡排的顏色*/
}
#BodyHeader .navbar-toggle .icon-bar {/*漢堡排的尺寸*/
	width: 33px;
	height: 4px;
	border-radius: 2px
}


/*home.css 共用*/
#AD > div img { width:100%; display: block; max-width: 100%;  height: auto }

/*Menu-我的課程、熱門考情、免費贈送*/
#Menu-R #member { background:url(/File/Image/bg_member.png) bottom right no-repeat #d5edf8; border-top:1px solid #dddddd;border-right:4px solid #109ad7}
#Menu-R #member a { display:block;width:100%; padding: 6px 15px 4px;color:#534b49; }
#Menu-R #member a:hover { background-color:#109ad7;color:#fff;}

#Menu-R .hot-lecture {background-color:#fafafa;/* background:url(/File/Image/bg_lecture.png) center right repeat-y;*/border-right:4px solid #28ae95;}
#Menu-R .hot-lecture a, #Menu-R .freeUse a, #Menu-R .club a, #Menu-R .club div { display:block;width:100%; padding: 6px 15px 4px;color:#534b49; }
#Menu-R .hot-lecture a:hover,  #Menu-R .freeUse a:hover, #Menu-R .club a:hover { background-color:#fff;}
#Menu-R .club div a {display:inline; padding-left:2px;padding-right:2px}

#Menu-R .panel-group { margin-bottom: 10px;}

#Menu-R .club { background-color:#f2f2f2; margin-bottom:0; margin-top:-10px; border-right:4px solid #e2547e}
#Menu-R .freeUse { background-color:#f6f6f6; margin-bottom:10px; border-right:4px solid #ffaf1c}

@media (max-width:767px) {
#BodyHeader .logo {
	margin:0;
	height:60px;/*手機翻轉時，需限制logo高度*/
	width:auto;
}
#BodyHeader {
	min-height:66px;
	margin:-1px;
	padding:0;
}
#BodyHeader .name_IP, #BodyHeader .top-menu {display:none}

#BodyHeader nav.navbar, #BodyHeader .container {
	height:64px;
}
#BodyHeader .nav > li >a {
	line-height:1.35;
	margin-bottom:-5px;
}
#BodyHeader .login_out {
	padding:6px 10px;
	margin:5px;
	text-align:center;
	font-size:13px;
	background-color:#dfdfdf;
}
/*#BodyHeader iframe { display:block; max-width:100% }*/

#BodyHeader .height96 { height:30px; margin:10px 0; float:right }
/*#BodyHeader div.visible-xs { line-height:1 }*/

/*看課介面header*/
#BodyHeader .left { float:left }
#BodyHeader .right { float:right; margin:0!important }
#BodyHeader .close {
	font-size:24px;
}

#BodyMenu { padding-top:15px; color:#6b6b6b}


/*header的dropmenu在右側選單變collapse********************/
#BodyMenu ul.nav-pills > li { text-align:center;background-color: #fff; border-radius:5px; margin-top:5px; font-size:17px;  font-weight:bold!important; padding-top:2px; padding-bottom:2px }
#BodyMenu ul.nav-pills > li > a { color:#ff7f00!important }
#BodyMenu ul.nav-pills > li > a:focus, #BodyMenu ul.nav-pills > li > a:hover { background-color: #eeeeee}
#BodyMenu .dropdown-header {
	color:#9bc8e6
}
#BodyMenu .dropdown {
	list-style:none;
	text-align:center;
	padding:12px 5px;
	background-color:#ffffff;
	margin:5px 0
}
#BodyMenu .dropdown > a { color:#ff7f00!important; font-weight:bold  }
#BodyMenu .dropdown-menu {
  text-align:center;
  position:relative;
  width:100%;
  top: auto;
  left: auto;
  z-index: auto;
  float: none;
  background-color:#f6f6f6;
  border:none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
}
#BodyMenu .dropdown-menu a {color: #2c7db2; line-height:28px}
#BodyMenu .dropdown-menu .divider {
  background-color: #999999;
}
	/*Home.css共用*/
	#New-Course { display:none }
	#AD > div { padding:12px 0 0 3px}
#Menu-R .Menu-mp-bottom, #Menu-R .Menu-ol-bottom, #Menu-R .Menu-sd-bottom { padding:15px; background-color:#f6f6f6; border-radius:3px; color:#268ad3 }

#Menu-R .visible-xs .btn { width:100%; margin-bottom:5px }

#Column .column_title{
	font-size: 0.9em;
	color: #268ad3;
	margin:0.5% 0 0 0;
	line-height:1.4em;
}
#Column .column_title a{color: #268ad3;}
}
@media (min-width:768px) and (max-width:991px)  { 
/*#BodyHeader { height:91px!important }*/
#BodyHeader .container { background:url(/File/image/bg_header_sm.gif) right top no-repeat}
#BodyHeader nav.navbar, #BodyHeader .container, #BodyHeader .logo {
	height:84px!important;
}
#BodyHeader .name_IP {text-align:right; height:36px }
#BodyHeader .top-menu {text-align:right; height:48px}
#BodyHeader .nav-pills {
	margin:22px 15px 0 0;
	padding:0;
	/*width:487px!important;*/
	height:26px;
    background-color:#2c7db2;
	/*background:url(/File/image/IE_bg_HeaderMenu.png) center no-repeat!important;*/
}
#BodyHeader .nav {
	/*margin-top:9px;*/
}
#BodyHeader .nav>li>a {
	padding-left: 10px;
}
#BodyHeader .close {
	font-size:30px
}
#Menu-R { margin-left:-20px}
}
@media (min-width:768px) {
#BodyHeader .nav-pills {
	background-color: #2c7db2;	
	border-top-left-radius: 10px;
	border-top-right-radius: 10px
}
#BodyHeader .nav-pills > li {
	margin:0 0 6px 0;
	padding:0;
	height:20px;
     text-align:center
}
#BodyHeader .nav-pills > li > a {
	color:#fff;
	padding:2px 14px;
}
#BodyHeader .nav-pills > li:first-child > a {
	border-top-left-radius: 10px;
}
#BodyHeader .nav-pills > li:last-child > a {
	border-top-right-radius: 10px;
}
#BodyHeader .dropdown-menu { margin-top:9px }
#BodyHeader .dropdown-menu > li > a {
  line-height:2;
  padding: 3px 20px
}
#BodyHeader .height96 { height:96px; margin:0; float:right }
/*#BodyHeader .nav-mooc { border-bottom-right-radius: 10px;background:rgba(254,137,41,1); background: linear-gradient(0deg, rgba(44,125,178,1) 4px, rgba(254,137,41,1) 4px,rgba(254,137,41,1) 60%, rgba(250,179,72,1) 99.5%); }*/
#BodyHeader .nav-mooc { border-bottom-right-radius: 10px;/*background:#00bcd4;*/height: 25.5px;}


#Menu-R { padding-top: 20px }
#Menu-R li { font-size:17px;padding-top:2px; padding-bottom:2px }
#Menu-R .panel-default > .panel-heading {
  background-color:#fcfcfc;
  color:#0075c1!important;
  text-align:center;
  border:0px solid #dddddd;	
  font-weight:bold}
#Menu-R .panel { 
	border:0;
	-webkit-box-shadow:none;
	box-shadow:none
}
#Menu-R .list-group-item {
	font-size:15px;
	padding:8px 15px;
	margin-bottom: -1px;
	background-color:#f6f6f6;
	color:#424b52
}
#Menu-R .list-group-item.text-danger {   color: #fd6343 }
#Menu-R .list-group-item:hover { background-color:#fff}
#Menu-R a:hover { text-decoration:none}
#Menu-R  .list-group-item:last-child  {
  border-bottom: 1px solid #ffffff;
}
#Menu-R .Menu-mp-bottom, #Menu-R .Menu-sd-bottom, #Menu-R .Menu-ol-bottom {
	padding:0 15px 130px;
	font-size:15px
}
#Menu-R .Menu-mp-bottom a, #Menu-R .Menu-sd-bottom a, #Menu-R .Menu-ol-bottom a { display:inline-block}
#Menu-R .Menu-mp-bottom { 
	background:url(/File/image/pic_Menu_MP.gif) bottom center no-repeat; color:#06a5cc
}
#Menu-R .Menu-sd-bottom { 
	background:url(/File/image/pic_Menu_SD.png) bottom center no-repeat; color:#ed4c28
}
#Menu-R .Menu-ol-bottom { 
	background:url(/File/image/pic_Menu_OL.png) bottom center no-repeat; color:#366dd3
}
/*home.css 共用*/
#AD > div { padding:0 0 10px 3px}

}
@media (min-width:992px) {
#BodyHeader {
	width:100%;
	height:101px!important;
	display:table
}

#BodyHeader nav.navbar {
		width:992px;
		height:101px;
		padding:0;
		margin:0;
		display:table-cell;
		vertical-align:top
}
#BodyHeader .container { height:101px; background:url(/File/image/bg_header.gif) right top no-repeat}
#BodyHeader .logo { width:403px; height:96px!important; padding:0; margin:0; max-width:auto; border-width:0}
#BodyHeader .name_IP {text-align:right; height:48px }
#BodyHeader .top-menu {text-align:right; height:48px}
#BodyHeader .nav { margin-top:9px }
#BodyHeader .nav-pills {
	margin:14px 15px 0 0;
	padding:0;
	/*width:485px!important; 跨學科體驗課位置*/ 
	height:26px;
	/*	background:url(/File/image/IE_bg_HeaderMenu.png) center no-repeat!important;*/
}
#BodyHeader .close {
	font-size:46px
}
.header-bottom {
	width:100%;
	background:url(/File/image/IE_bg_headerbottom.png) left no-repeat #2c7db2;
}
#Menu-R .list-group-item { padding: 6px 15px; }
}

/*Body ----------------------------*/

#BodyContainer {
  z-index:-10;
}
#mobile { display:none; }
/*Menu ----------------------------*/
/*登入區塊-共用*/
@media (max-width:767px) {
#web { display:none; }
#mobile { display:block; width:100%}

}
@media (min-width:768px) {
#web { display:block; }
#mobile { display:none; }
}

#login {
	border:2px solid #fe8d30;
	border-radius:12px;
	background-color:#f9f9f9;
	padding:0 15px 13px;
	margin-top:15px;
	margin-bottom:8px;
}
#login h3 { color:#fe8d30; font-size: 22px; line-height:22px;margin-top:10px;}
#login .form-group { margin-bottom:6px }
#login .form-control { border:1px solid #bababa; padding-left:3px; padding-right:3px; }
#login .btn { font-size:15px; margin-top:1px; padding:6px 0!important; line-height:15px}
#login .form-group.code > div > .form-control { display:inline-bl-ock }
#login .form-group.code > div > img {cursor:pointer; margin-top:0; display:inline-block; text-align:left }

.change-display { display:block; width:50%; float:left }
.bg-onlineservice { background-color:#f6f6f6; font-size:18px; color:#758592/*#fe8711*/; font-weight:bold; border-radius:5px!important; padding:10px 0 auto }
.bg-onlineservice:hover { background-color:#c2c2c2 }
.bg-5tutor { position:relative;overflow:hidden; z-index:1;background-color:#ff9a3a; background: linear-gradient(135deg, #ff8b2f,#ff9a3a 30%); /* Standard syntax */
font-size:18px; color:#ffffff/*#fe8711*/; font-weight:bold; border-radius:5px!important; padding:2.5px 0 2.5px 10px; margin-bottom:5px; disply:flex; justify-content:space-between; align-items:center; text-shadow:4px 4px 8px #ec7a1e; width:100%}
.bg-5tutor:hover { background:#ff8221!important;box-shadow: inset 0 5px 5px rgba(0,0,0,0.30)}
.bg-5tutor B {z-index:-1; position:relative; display:inline-flex;justify-content: center; align-items: center; background-color:#c35d0a; border-radius:50%; width:42px; height:42px;font-weight:bold; font-size:26px; color:#fff6c5; box-shadow:0 0 0 7px #dc771e, 0 0 0 15px #ed882c;}
.bg-center { border-width:0px;background-color:#53beaa;position:relative;overflow:hidden; z-index:1; border-radius:5px;padding:0 10px 0 5px; height:47px; width:100%;display:flex; background: linear-gradient(135deg, #41af98,#53beaa 30%, #2e9e84 85%);justify-content: space-around;align-items: center;font-size:20px; color:#fff;/*color:#ffE41C;*/}
.bg-center:before	{content:" ";z-index:-1; position:absolute;left:-8px; display:block;background-color:#26876e; border-radius:50%; width:45px; height:45px;box-shadow:0 0 0 7px #349b83, 0 0 0 15px #48b29c; animation:8s pulse infinite; animation-timing-function:linear;}
/*.bg-center {background-color:#28ae95; box-shadow: inset 0 5px 5px rgba(0,0,0,0.30);color:#ffE41C; }*/
.bg-center small {width:38px;color:#f93b88;font-weight:bold;display:inline-flex;text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,0 0 3px #fff; transform:rotate(-15deg); line-height:1; font-size:15px;}
.bg-center a{ color:#fff;font-weight:bold}
.bg-center a:hover {text-shadow: 0 0 10px #196956; text-decoration:none; font-size:21px}


.AlertCourse { background-color:#00a6d8;
	background: -webkit-linear-gradient(left, #06C7FF,#00BAF0 20%); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #06C7FF,#00BAF0 20%); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #06C7FF,#00BAF0 20%); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #06C7FF,#00BAF0 20%); /* Standard syntax */
font-size:18px; color:#ffffff/*#fe8711*/; font-weight:bold; border-radius:5px!important; padding:10px 0 0 10px!important; vertical-align:middle}
.AlertNews { background-color:#0dc4ae;
	background: -webkit-linear-gradient(left, #28d9c3,#1dcdb7 20%); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #28d9c3,#1dcdb7 20%); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #28d9c3,#1dcdb7 20%); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #28d9c3,#1dcdb7 20%); /* Standard syntax */
font-size:18px; color:#ffffff/*#fe8711*/; font-weight:bold; border-radius:5px!important; padding:10px 0 0 10px!important; vertical-align:middle}
.AlertQuiz { background-color:#28ae95;
	background: -webkit-linear-gradient(left, #28ae95, #31ccaf 40%); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #28ae95, #31ccaf 40%); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #28ae95, #31ccaf 40%); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #28ae95, #31ccaf 40%); /* Standard syntax */
font-size:18px; color:#ffffff/*#fe8711*/; font-weight:bold; border-radius:5px!important; padding:10px 0 0 10px!important; vertical-align:middle}
.online { color:#00a0e8!important; font-size:13px!important }
.offline { color:#030303!important; font-size:13px!important; font-weight:normal!important }
.offline > span { color:#ed4c28!important }


/* 首頁公告-電腦版右側 & 手機板header下---------------------------*/	
/*上下邊界需為0，無公告時才不會出現底色*/
#announce {
        margin: 0;
        color: #758592;
    }
    #announce-header {
        height:auto;
        padding:0 5px 0 50px;
        margin:0;
        background:url(/File/image/ico_announce.gif) top left no-repeat #faf8de;
        color: #758592;
     }
    #announce .news, #announce-header .news {
        width:100%;
        display:block;
        border-bottom:1px dotted #d7e3d7\9; padding-bottom:8px\9
    }
    #announce .news a, #announce-header .news a {
        line-height:1.7;
        padding-left:20px;
        padding-left:26px\9;
        padding-right:10px;
        font-size:13px;
        font-family:"Arial","Helvetica","sans-serif";
        color: #4f4f4f;
        background:url(/File/Image/ico_news.gif) left top no-repeat;
        width:100%;
        display:block;
    }
    #announce-header .news { padding-top:5px; padding-bottom:3px;}
    #announce .news:first-of-type:before, #announce .news:only-of-type:before {
     display:table;
     width:100%;
     content: url(/File/Image/ico_announce_txt.png);
     margin: 0;
     text-indent: 0;
     padding:0;
     height:49px;
    
    }
    #announce .news:first-of-type:after, #announce .news:only-of-type:after {
      clear:both;
    }
    #announce .news:not(:first-of-type):before { content: ""; }
    #announce .news:last-of-type:after, #announce .news:only-of-type:after {
      content: url(/File/Image/28408.gif);
      display:block
    }

    #announce img{
	margin: 0px 0px 4px 0px;
	}

/*公告-登入後列表*/
#announce-member {
	width:100%; 
	height:auto;
    padding:0;
    margin:0;
    background:url(/Member/image/ico_news.png) left center no-repeat #f6f6f6;
    color: #5c6c83/*423218*/;
    text-align:left;
    font-weight:bold
}

    /*若只有一個公告，讓它可垂直置中*/
        #announce-member .news:only-of-type { display:table-cell; height:56px; vertical-align:middle }
        #announce-member .news:only-of-type a { display:block }    

    /*有多個公告*/
        #announce-member .news { 
            display:table;
            width:100%; 
            vertical-align:middle;
            padding:0 0 0 66px;
            font-family:"Arial","Helvetica","sans-serif";
            clear:both;
        }
        #announce-member .news a {
            display:block;
            padding:0 10px 0 15px;
            font-size:13px;
            line-height:24px;
            color: #4f4f4f;
            background:url(/Member/image/ico_news_dot.png) left center no-repeat #f6f6f6
        }
        #announce-member .news:first-of-type a { margin-top:8px }
        #announce-member .news:last-of-type a { margin-bottom:8px }
	    #announce-member .news a b { color:#f25930 }


@media (max-width: 720px) { /*平板*/
.announce-iframe iframe { width:185px!important }/*避免在平板時右側被切掉*/
#announce-member { margin-left:15px; }
}
@media (max-width: 559px)  { /*手機*/
#announce-member {
    margin:0;/*一定要設margin:0，才可貼合手機邊界*/
}
#announce-member .news a {
	height:auto;
	line-height:22px;
}
/*#announce-member {
	height:auto;
	padding:0;
	margin:0;
	background:url(/Member/image/ico_news_s.png) left top no-repeat #f6f6f6;/*faf8de*/
/*} 
#announce-member .news { padding:0 0 0 48px  }

#announce-member .news a { line-height:1.5;}*/
}


@media (max-width: 180px) {/*pad*/
#announce { 
width:180px;
	/*background:url(/File/image/ico_announce_pad.png) top center no-repeat;*/
 }
#announce .news:first-of-type:before {
 content: url(/File/Image/ico_announce_pad.png);
 display: block;
 margin: 0;
 text-indent: 0;
 padding:0;
 width:180px;
 height:55px;
/* line-height:55px;
 vertical-align:middle;
 border-radius:5px;
 background-color:#f6f6f6;  */
}
#announce .news { padding:0; margin: 0; text-indent: 0; width:180px!important}
#announce .news a {  width:180px!important }

}


#announce a:hover, #announce-header a:hover { text-decoration:underline }


/*Content----------------------------------*/
#BodyContentMain {
	padding-bottom:60px;
}



/*看課介面*/
.orderID {
	font-size:12px;
	color:#9dabb2;
	-webkit-text-fill-color: #9dabb2;
    height:18px;
    display:block;
    max-width:955px;
    margin:0 auto;
	overflow:hidden
}

.playerbar {
	padding: 6px 0;
	margin:0;
	background-color:#222222;
}
.playerbar > .btn {
	background-color:#295474;
	height: 36px!important;
	border: 1px solid #295474!important;
	padding:0!important;
	margin:-1px 0 0!important
}
.playerbar > select {
	border: 1px solid #295474!important;
	border-radius: 0!important;
	font-size:13px!important;
	height:36px!important;
	padding:0!important;
	margin:0 -5px!important
}
.videotag {
	padding-top: 5px;
	background-color:#e3e4e8
}
.btn_videotag {
	width: 76px;
	padding: 3px 0!important;
	height: 36px;
	-webkit-appearance: none;
	border-radius:0;
	margin-left:-1px
}
.tag_row { width:100%; text-align:center }
.img_videotag {
	display:inline-block;
	height: 36px;
	border:1px solid #d8d9db
}
.videotag .form-control-static {
	min-height: 36px;
}
.input_playbar {
	padding: 0 1px!important;
	font-size: 14px
}
.playarea { margin:0;padding:0 10px; text-align:center; display:block; float:left }
.playarea h2 { color:#2b7daf }
.notearea { color:#5c6c85; padding:0 10px 15px; display:block; float:left}/*	border-left: 2px solid #73bad9;*/

.notearea .h5 {
	font-size:15px;
	line-height:1.4;
    /*text-indent: -30px;
    padding-left:30px;*/
	overflow:auto
}

.notearea .h5 > img {vertical-align:text-bottom }
.notearea h5 { color:#2a7fb5 }
.notearea textarea { color:#5f6b85!important; margin-bottom:7px}

.notearea .btn { margin-top:0; padding:0 15px; height:48; line-height:48px; background-color:transparent}
.notearea .btn:hover { color:#6C6C6C; text-decoration:underline }
.player-note { color:#5d646a; background-color:#f6f6f6; padding-top:15px; margin:0 auto }
.player-note th { font-size:17px;text-align:center; color:#2E3032; font-weight:bold }

/*Only for Online Course*/
.OLplayerbar {
	padding:0;
	margin:0;
	height:48px;
	line-height:36px;
	background-color:#f6f6f6;
	vertical-align:bottom
}
.OLplayerbar > .btn {
	border-width:1px;
	padding:3px 0;
	margin:-1px 0 0;
	width: 80px;
}
.OLplayerbar > select {
	border: 1px solid #26a1cb;
	border-radius: 0;
	font-size:14px;
	padding:5px 0;
	margin:0 -5px;
	width: 84px;
}

/*hls video ui ---------------****/
.rmp-hd, .rmp-cc, .rmp-quality.rmp-module, .rmp-airplay,.rmp-module, .rmp-quality, .rmp-quality-hd, .rmp-captions {
    display: none!important;
}

/*v8 loading動畫*/
  .rmp-loading-spin {
    background-color:transparent!important;
  }
  .rmp-loading-spin {height: 30px!important; margin-top: -15px!important; width: 30px!important; margin-left: -15px!important;}
  .rmp-loading-spin-circle {width: 30px!important; height: 30px!important; border: 3px solid!important; border-color: transparent rgba(255,255,255,0.5)!important;}


/*隱藏電腦、Mobile的play&pause按鈕、並改成可點影片畫面播放*/
  .rmp-overlay-button  {opacity: 0!important; }
  .rmp-video {cursor:pointer!important;}
  .rmp-mobile-central-ui { width:100%!important;height: calc(100% - 70px)!important; margin:0!important; top:0!important;left:0!important;visibility:visible!important;opacity: 0!important;}
  .rmp-mobile-central-ui .rmp-i-play,.rmp-mobile-central-ui .rmp-i-pause {opacity:0}
  /* .rmp-s2 .rmp-loaded { background: rgba(255, 255, 255, 0.85);} */
@media (max-width:767px) {
/*v8 s2面板行動裝置的時間軸，修正iPhone長度不正確
.rmp-s2 .rmp-time-total {background:rgba(255, 255, 255, 0.5)!important;}
.rmp-s2 .rmp-seek-bar, .rmp-s2.rmp-captions-ui .rmp-seek-bar, .rmp-s2.rmp-audio-ui .rmp-seek-bar, .rmp-s2.rmp-captions-ui.rmp-audio-ui .rmp-seek-bar, .rmp-s2.rmp-quick-rewind-or-forward-ui .rmp-seek-bar, .rmp-s2.rmp-quick-rewind-and-forward-ui .rmp-seek-bar, .rmp-s2.rmp-related-ui .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-small .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-extrasmall .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-captions-ui .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-audio-ui .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-audio-ui .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-small .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-audio-ui.rmp-small .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-audio-ui.rmp-small .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-extrasmall .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-audio-ui.rmp-extrasmall .rmp-seek-bar, .rmp-s2.rmp-related-ui.rmp-captions-ui.rmp-audio-ui.rmp-extrasmall .rmp-seek-bar {
    left:20px!important;
    top: -16px!important;
    height: 8px!important;
    width:calc(100% - 40px)!important; }*/
}
.rmp-quick-rewind-and-forward-ui .rmp-time {
    left: 210px!important;
}
.rmp-quick-rewind-and-forward-ui .rmp-seek-bar {
    left: 332px!important;
	width: calc(100% - 120px - 282px)!important;
}

@media (max-width:767px) {
.rmp-quick-rewind-and-forward-ui .rmp-seek-bar {
		left: 120px!important;
		width: calc(100% - 120px - 70px)!important;
}
#BodyContentMain {
	padding-left:0;
	padding-right:0;
	padding-top:0;/*上邊界*/
	margin-left:15px;
	margin-right:15px;
}

#BodyContentMainDetail {
	min-height:510px;
/*	height:100%;*/
	margin-left:0;
	margin-right:0;
	padding-left:10px;
	padding-right:10px;
	padding-top:15px
}

.breadcrumb {
clear:both;/*左右兩邊不可以有任何東西。*/
	margin: -10px 0 0;
	text-align: left;
}


/*.player-width {
	width: 100%;
}*/
.playersize {
	margin-right:0
}
#play-course #BodyContentMainDetail { padding:0 15px }
.playarea { width:100%; padding-left:0; padding-right:0 }
.notearea { width:100% }
.notearea > textarea { height:99px }

.playerbar { float:left; width:50%!important; padding-left:0; padding-right:0 }
.playerbar > .btn {
	width: 56px!important;
	font-size:14px
}
.playerbar > select {
	width: 56px!important;
}
.videotag { padding-left:0; padding-right:0; height:76px}
.btn_videotag {
	width: 56px;
	height: 36px;
	font-size:14px;
	padding-left:0;
	padding-right:0 
}
.img_videotag {
	overflow:hidden;
	width:46px;
	margin:0 4px
}

.input_playbar {
	width: 56px;
	margin-left:-5px;
	margin-right:-5px;
	font-size:12px
}
#time-sum > div.playarea { padding:30px 15px 15px }
.row.player-note { padding-left:30px; padding-right:30px; width:calc(100% + 30px); margin:0 -15px  }
#BodyMenu {
	margin-right: 40px
}
/*手機版登入區塊*/
#login { position:relative }
#login h3 { height:25px; }


#login .login-input { padding:0 0 2px 0; width:67%; display:block; float:left; }
#login .code  { padding:0 0 5px 0; width: 100%; display:block; float:left; }
#login .login-btn  { padding:0 0 2px 0; width: 33%; display:block; float:left;}
#login .form-group { width:100%; margin:0 0 6px;}
#login .form-group .control-label { width:31%; display:block;float:left;font-size:15px;padding: 1px 0 0 2px;}
#login .form-group > div { width:68%;display:block;float:left;padding-left:4px; padding-right:0;}
#login .form-group .form-control{ height: 31px; padding: 5px 1px; font-size: 13px; line-height: 1.5; border-radius: 3px;}
#login .login-btn .btn { font-size:14px; margin:0; padding:7px 0!important; line-height:15px; width:80px}
#login .code .form-group .control-label{ width:20.5%;}
#login .code .form-control { width:calc(79.5% - 92px);display:block; float:left;}
#login .code .form-group > div { width:79.5%; max-width:280px;display:block;float:left;padding-left:6px; padding-right:0;}
#login .code img { height:31px; margin-left:0; display:block; float:left;}
#login .small {font-size:13px; line-height:16px;}

#login .my-course .btn {
    width: 45%;
    display: block;
    float: left;
    margin: 7px 2.5%;
}


.change-display { width:100% }

#BodyContentMain .video_player {
	margin:0 15px 15px;
}
.playerUI {
	margin:-15px;
	padding-left:-15px;
	padding-right:-15px
}
}
@media (max-width:370px) {
.playerbar > .btn {
	width: 47px!important;
}
.playerbar > select {
	width: 47px!important;
	font-size:13px
}
.btn_videotag {
	width: 48px;
}
.img_videotag {
	overflow:hidden;
	width:42px;
	margin:0 3px
}
.input_playbar {
	width: 48px;
}

}
@media only screen and (device-width: 768px) {
.playerbar > .btn {
	margin:0!important;
}
}
@media (min-width:768px) {
.playersize {
	margin:-30px 0 0!important
}
.playerbar { width:50% }
.playerbar > .btn {
	width: 95px!important;
}
.playerbar > select {
	width: 79px!important;
}
.videotag { height:78px}
.btn_videotag {
	width: 88px;
	height: 36px;
}
.img_videotag {
	overflow:hidden;
	width:90px;
	margin:0 0 0 -1px
}
.input_playbar {
	width: 83px;
}
}
@media (min-width:768px) and (max-width:991px) {
#play-course #BodyContentMainDetail { padding:0 15px; margin:0}
.playarea { padding:0 }
.playarea, .notearea { width:100%}
.notearea > textarea { height:99px }
/*.notearea {  margin:0 0 0 -15px; border-left-width:0 }
.playarea {  margin:0 0 0 -15px }*/
#time-sum > div.playarea { padding:50px 15px 15px }
.player-note { margin:0 -15px; padding-left:30px;padding-right:30px; }
}
@media (min-width:992px) {
#play-course #BodyContentMainDetail{ padding-bottom:0 }
.playarea { padding-top:15px; width: 78.5%; padding-left:15px}
.notearea { padding-top:15px; width: 21.5%}
.notearea .h5 {
    padding:6px 0 20px;
	margin-top:0;
	min-height:131px;
}
.notearea > textarea { height:328px; background:url(/Member/image/ico_notes.png) left top no-repeat; padding-top: 37px}
#time-sum > div.playarea > .pull-left { text-align:left; padding-left:110px;}
#time-sum > div.playarea > .pull-right { text-align:right!important; padding-right:110px;}

.player-note { margin:60px 0 0; width:100%; padding-left:6%; padding-right:6%}
}
@media (min-width:768px) {
/*Menu ----------------------------*/
#BodyMenu {
	padding:20px 0 0
}

}

@media (min-width:768px) and (max-width:991px) {
#BodyContentMain {
	padding-right:15px;
	padding-left:0;
	padding-top:0;/*上邊界*/
	margin-left:0;
	margin-right:0;
}

#BodyContentMainDetail {
	margin-left:15px;
}


/*Menu ----------------------------*/
#BodyMenu {
	margin-top:0;
}
#BodyMenu iframe { width:168px; display:block; max-width:100%}

/*平板-登入區塊*/
#login { padding:0 13px 13px; }
#login .row{ display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;}
#login .login-input,#login .code,#login .login-btn { width:100%; padding:0 2px 3px 8px; display:block;float:left;}
#login .login-input{-webkit-order: 1;order: 1;}
#login .code{-webkit-order: 2;order: 2;}
#login .login-btn{-webkit-order: 3;order: 3;}
#login .control-label { width:52px;font-size:14px; padding: 7px 0 0 5px; display:block;float:left;}
#login .form-group div { width:calc(100% - 76px); padding-left:5px;display:block;float:left;}
#login .code img { height:30px;}
#login .login-btn .form-group { margin:5px 10px 5px 6px;}
#login .login-btn .btn { font-size:14px; margin-top:1px; padding:6px 15px!important; line-height:15px}
#login .my-course .btn { width: 136px; display:block; margin:7px 0 7px 22px }
#login .small {font-size:12px}
#login .small > span { display:block; margin-bottom:-15px }

.change-display { width:100% }

.bg-onlineservice { padding-top:5px; padding-bottom:5px; text-align:center }
.bg-onlineservice > img, .bg-5tutor > img { display:block; margin-left:auto; margin-right:auto }
.bg-5tutor {padding:10px 0 0 0;}
.bg-5tutor img { margin-bottom:-10px;}
.bg-5tutor B {margin-right: -10px}
.bg-center {padding:7.5px 7px; height:auto; flex-wrap:wrap; justify-content:space-evenly}
.bg-center span { display:flex;}
.bg-center small {transform:rotate(0); line-height:1; width:100%; display:flex;}

#login .col-sm-14 { padding-left:20px; padding-right:20px }
.player-note { margin-left:-15px }
}
@media (min-width: 992px) {
#BodyMenu {
	margin-left:0;
	margin-right: 0;
	width:240px
}

.bg-onlineservice { text-align:left!important; padding-left:17px; width:240px; height:49px; background:url(/File/image/IE_bg_onlineservice.png) center no-repeat }
.bg-onlineservice { padding-left:17px; width:240px; height:49px; background:url(/File/image/IE_bg_onlineservice.png) center no-repeat }
.bg-onlineservice:hover {background:url(/File/image/IE_bg_onlineservice_h.png) center no-repeat }

/*電腦版登入區塊*/
#login {
	border-width:0;
	width:240px;
	height:195px;
	padding:0 15px;
	background:url(/File/image/IE_bg_login.png) center no-repeat;
	position:relative
}
#login h3 { visibility:hidden; width:100%; height:38px; display:table-cell}
#login .my-course .btn {
	width: 206px;
	display: block;
	margin:7px 4px 7px 18px;
}

#login .login-input { padding:0 0 2px 0; width:67%; display:block; float:left; }
#login .code  { padding:0 0 5px 0; width: 100%; display:block; float:left; }
#login .login-btn  { padding:0 0 2px 0; width: 33%; display:block; float:left;}
#login .form-group { width:100%; margin:0 0 6px;}
#login .form-group .control-label { width:50px; display:block;float:left;font-size:15px;padding: 1px 0 0 2px;}
#login .form-group > div { width:107px;display:block;float:left;padding-left:4px; padding-right:0;}
#login .form-group .form-control{ height: 31px; padding: 5px 1px; font-size: 13px; line-height: 1.5; border-radius: 3px;}
#login .login-btn .btn { font-size:14px; margin:0; padding:7px 0!important; line-height:15px; width:68px}
#login .code .form-control { width:62px;display:block; float:left;}
#login .code .form-group > div { width:190px;display:block;float:left;padding-left:6px; padding-right:0;}
#login .code img { height:29px; margin-left:0; display:block; float:left;}
#login .small {font-size:13px; line-height:16px;}

#AD > div { padding-left:0 }

}
.breadcrumb {
	clear:both;/*左右兩邊不可以有任何東西。*/
	font-size:13px;
	margin-bottom:0;
}
.breadcrumb a {	color:#5c5c5c }
.breadcrumb > .active {
  color: #a6a6a6;
}
h2 {
	color:#2c7db2; /*87939b*/
	padding-top:3px;
	font-weight:bold;
	text-align:center;
	margin-top:0
}
h3 {
	color:#2c7db2;
	/*padding-top:15px;*/
	font-weight:bold;
	text-align:center
}
.clearfixhome{

	line-height:2;
	
	}

#BodyContentMainDetail .h4{
	font-size:18px;
	line-height:1.2;
	margin:20px 0 10px 0;
	color:#175ea6;
	font-weight:bold;
}
#BodyContentMainDetail .h4 > .small { color:#303030 }

#BodyContentMainDetail a.small {
	font-size:14px;
	color:#26a1cb
}


/*tab樣式*/
/* Tabs panel */
.tabbable-panel {
/*  border:1px solid #eee;*/
clear:both;  /* 左右兩邊不可以有任何東西 */
  padding: 0 0 5px;
  margin:0 0 4px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
  width:49.5%;
  width:calc(50% - 2px);
  text-align:center
}
.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
  padding:10px 0
}

.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px solid #fcc261;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #fcc261;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px solid #f39800;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #f39800;
  font-weight:bold;
  background-color:transparent;
  cursor: pointer;
}


.tabbable-line > .tab-content {
  margin: -3px 0 0;
  background-color: #f6f6f6;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
  border-radius: 8px
}

.tab-content h2 {
	padding-top:20px;
}
@media (min-width:992px) {
.tabbable-line > .nav-tabs > li > a {
  font-size:18px
}
}


@media (max-width:767px) {
h2 {
	line-height:1.5;
	margin:10px 0
}
h3 {
	font-size:19px;
}
}



/*圓點步驟圖*/
.btn-circle {
	width: 24px;
	height: 24px;
	line-height:24px;
	vertical-align:middle;
	text-align: center;
	font-size: 13px;
	padding:0;
	cursor: default
}

.process {
	display: table;
	width: 100%;
	position: relative;
	margin:15px 0 30px
}

.process-row {
	display: table-row
}
.process-step button[disabled] {
	opacity: 1 !important;
	filter: alpha(opacity=100) !important
}
.process-step .btn:focus {
	outline: none
}
.process-row:before {
	top: 15px;
	bottom: 0;
	position: absolute;
	content: " ";
	width: 100%;
	height: 1px;
	background-color: #eee;
	z-order: 0
}
.process-step {
	display: table-cell;
	text-align: center;
	position: relative
}
.process-step p {
	margin-top: 4px;
	font-size: 15px;
	color:#939393
}
.process-step p.active { color:#f39800; font-weight:bold }

.step, .step-active, #test .process-step > .step, #test .process-step > .step-active {
	text-align:center;
	vertical-align:middle;
	display:inline-block;
	cursor: pointer
}
.step {
	color:#303030;
	width: 24px;
	height: 24px;
	line-height:24px;
	background: url(/File/image/pic_btn_cicles.png) center no-repeat;
	font-size: 13px;
}
.step-active {
	color:#fff;
	width: 24px;
	height: 24px;
	line-height:24px;
	background: url(/File/image/pic_btn_cicle_actives.png) center no-repeat;
	font-size: 13px;
}

/*環境測試*/

#test .process-step > .step{
	color:#303030;
	width: 36px;
	height: 36px;
	line-height:36px;
	background: url(/File/image/pic_btn_cicle.png) center no-repeat;
	font-size: 16px;
}
#test .process-step > .step-active {
	color:#fff;
	width: 36px;
	height: 36px;
	line-height:36px;
	background: url(/File/image/pic_btn_cicle_active.png) center no-repeat;
	font-size: 16px;
}
#test .process-row:before {
	top: 15px;
	height: 5px;
	background-color: #eee;
}
#test .table { border: 1px solid #d8dde6 }
#test .table th {	background-color: #f6f6f6 }
#test .table td { font-size:15px }
#test .btn-group { border-bottom:1px solid #ddd; width:100%; }
#test .btn-group > .btn { border-width:0; padding-left:20px; padding-right:20px; margin-top:2px; margin-bottom:-1px; background-color:#fff }
#test .btn-group > .btn:hover { color:#000; cursor:default }
#test .btn-group > .btn-link { color:#268ad3; font-weight:bold; border-bottom:5px solid #268ad3!important;  text-decoration:none; cursor:default }
#test .btn-group > .btn-primary {  color:#268ad3; cursor:pointer!important}
#test .playarea { width:100% }/*與看課介面共用，寬度設定不同*/ 

.pager a { color:#109ad7 }
.pagination li > a { color:#525252}
.pagination li.active a { background-color:#109ad7; border:1px solid #109ad7 }
.pagination li:hover a  { background-color:#f6f6f6 }

#join .process-step { width:25% }
#join legend {
	margin: 22px 0 0;
	font-size: 18px;
	font-weight:bold;
	color: #6093b4;
	border-bottom: 0 solid #c4c4c4;
}
#join .form-area { padding: 10px 15px 15px 0;background-color:#f6f6f6; border-radius:8px }
/*#join .form-area .help-block { color:#F41E00; font-size:15px;}*/
#join .form-area .mustfill {background-color:#fefef1; margin-right:-15px; margin-bottom:5px; margin-top:5px;padding:5px 0;}
#join .form-area .mustfill span {color:#F41E00; font-size:15px;}
/*聯絡客服 行動版首頁*/
#Ask #BodyContentMainDetail .row { margin-left:0; margin-right:0 }
#Ask .col-33 {
	padding:0 15px;
	background: #f8f8f8;
	background: -webkit-linear-gradient(#ffffff,#f2f1f1);
	background: -o-linear-gradient(#ffffff,#f2f1f1);
	background: -moz-linear-gradient(#ffffff,#f2f1f1);
	background: linear-gradient(#ffffff,#f2f1f1); 
	border:6px solid #ffffff;
	border-radius:12px!important;
}

#Ask .col-33:hover {
	background:#f2f1f1!important;
	border-radius:12px!important;
}
/*#Ask:hover  H4:after { content:" →" }*/
#Ask .col-33 H4 {
	padding:7px 0 0;
	margin-bottom:10px
}
#Ask .col-33 p {
	min-height:136px;
	/*border-top: 1px solid #dfdfdf;*/
	padding-top:12px;
    margin-bottom:0;
}
/*#Ask .col-33:hover p:after { content:"　《填寫表單→》" }*/
#Ask .col-33 > div { border-top:1px solid #dfdfdf; }
#Ask .col-33 a:link, #Ask .col-33 a:visited {
  color:#585b5e;
  display: inline-block;
  padding:8px 0;
  text-align:center; 
  width:100%; 
  font-weight:700;
}
#Ask .col-33 .tutor a {color:#fe8929;}
#Ask .col-33 div a:hover { color:#00a6d8;}
#Ask .col-33 p a.policy { width:46%; background-color:#e5e7e8; border-radius:13px; padding:2px 0; margin:0 1.5%; font-size:14px;font-weight:normal;}


/*ASk 選課程型態*/
/*.bg-light input[type="radio"] { display: none; }*/
.radio label { background-color:transparent; cursor: pointer; margin-left:0; padding:0 8px 0 30px}
.radio input[type="radio"] { margin-left:9px }
.radio input[type="radio"]:checked + label {  color:#fff; background-color:#f39800; border-radius:4px }


/*ASk 選課程型態*/
.radio2 label {
	background-color: transparent;
	cursor: pointer;
	margin-left: 0;
	padding-top: 0;
	padding-right: 8px;
	padding-bottom: 0;
	padding-left: 10px;
	font-weight: normal;
}
.radio2 input[type="radio"] { margin-left:9px }
.radio2 input[type="radio"]:checked + label {  color:#fff; background-color:#f39800; border-radius:4px }


.form-control-static {
  padding-top: 6px;
  padding-bottom: 6px;
  min-height: 36px;
}
select.input-sm {
  height: 36px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857143;
  color: #000000;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #bcc8de;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-group-sm {
	padding-bottom:12px;
}

#BodyContentMainDetail .control-label {
padding:5px 0 0;
text-align:right

}

input:required:focus,
select:required:focus {
  border: 1px solid red;
  outline: none;
}
input[type="radio"] {
  width:20px!important;
  height:20px;
}

@media (max-width:767px) {
#BodyContentMainDetail .form-horizontal .control-label {
	margin-top:2px;	
	text-align:right
}
.form-control::-moz-placeholder {
	font-size:14px
}
.form-control:-ms-input-placeholder{
	font-size:14px
}
.form-control::-webkit-input-placeholder {
	font-size:14px
}
.radio {width:100%}
#join .form-area .school span { display:block }

#BodyContentMainDetail .test_step {
	width:105%;
	width:calc(100% + 35px);
	margin-left:-15px;
	border-radius:0;
	font-size:15px;
}
#BodyContentMainDetail .test_btn {
	padding:7px 0;
}
#BodyContentMainDetail .test_btn:hover,
#BodyContentMainDetail .test_btn.active {
	padding:7px 8px;
	background-color:#f30164;
	border-radius:18px;
}
#Ask #BodyContentMainDetail p {
	font-size:15px
}
#Ask .col-33 p {
  min-height:auto;
  padding-bottom:10px;
}

#Ask .col-33 p a.policy {width:90px; margin:5px 1.5%;}
}
@media (min-width:768px) {
.radio {float:left}
.radio2 {
	width: 50%;
	float: left
}
#Ask #BodyContentMainDetail > p > span { display:block }
}
@media (min-width:768px) and (max-width:991px) {
#Ask .col-33{
	padding:0 15px;
	margin-right:5px;
	height:auto
}
#Ask #BodyContentMainDetail .row { width:94%; margin:auto!important  }
#Ask #BodyContentMainDetail  p {
	font-size:15px
}
#Ask .col-33 { width:100%  }
#Ask .col-33 p { min-height:auto; padding-bottom:10px;}
#Ask .col-33 p a.policy { width:90px; margin:5px 1.5%;}
}

/* Footer */
#BodyFooter {
  z-index:-10;
  background-color:#f2efe6;
  padding:0 5px 10px;
  border-bottom:4px solid #3e73b8;
  font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
/* group-Footer */
#group {
  z-index:-10;
  line-height:1.8;
}
#group .foottitle {
	border-bottom:1px solid #e5d8ae;
	font-size: 23px;
	color:#9a9175;
	display:inline-block;
/*	background:url(/File/Image/footer_slash.png) right center no-repeat;*/
}
#group .audition { 
	text-align:center; padding:0 0 7px; margin:-4px 0 0; font-size: 17px; font-weight:bold;	display:inline-block
}
#group .footsub {
	font-size: 17px;
	font-weight:bold;
	padding:10px 0 5px;
	color:#9a9175
}
#group .ibrain-service, #group .venture { display:block; float:left; min-height:1px; padding-left:10px; padding-right:10px }
#group .ibrain-service .about, #group .ibrain-service .member, #group .ibrain-service .howtobuy, #group .venture .venture1, #group .venture .venture2 { padding-left:15px ;padding-right:15px; float:left; display:block }
#group ul {
	margin-left:-39px;
}
#group li {
	list-style:none;
	font-size: 14px;
}
#BodyFooter a {
	color:#000
}

/* Footer tag */
#footer {
  background-color:#f2efe6;
  padding:10px 30px 0;
  font-size: 14px;
}
#footer .logo-footer, #footer .logo, #footer .title, #footer .contact {
	float:left;	display:block
}
#footer .logo { padding-top:5px; padding-right:10px; text-align:right}
@media (max-width:767px) {
#BodyFooter {
  padding:0;
}
#group .foottitle, #group .audition  { padding-top:10px; text-align:center; display:block}
#group .ibrain-service  { width:100%; padding:0 15px 0 25px}
#group .ibrain-service .about  { width:33%; padding:0 }
#group .ibrain-service .member { width:27%; padding:0 }
#group .ibrain-service .howtobuy {width:40%; padding:0}
#group .venture  { width:100%; padding:0 15px 0 25px }
#group .venture .venture1 { width:60%; padding:5px }
#group .venture .venture2 { width:40%; padding:0 }

#group .footsub {
	margin:0;
}
#group ul{
	margin:5px 0 15px;
	padding-left:0;
	padding-right:0
}
#group li{
	margin:0;
	padding:0;
}
#group .label { margin-left:20px}

#footer .logo-footer { width:100% ; margin-bottom:10px}
#footer .logo { width:35% }
#footer .title { width: 65% }
#footer .contact { width:100% }
#footer .contact .rights, #footer .contact .center { display:block }
#footer .contact address .inline { display:block} 
}
@media (min-width:768px) and (max-width:991px) {
#BodyFooter {
  padding:15px 10px 10px;
   margin-left:0;
   margin-right:0;
   width:100%;	
 }
#group .foottitle { 
 	margin:0 20px 10px -20px;
	padding:15px 0 0 40px }
#group .foottitle, #footer .audition  { width:50% }
#group .ibrain-service  { width:50%; padding-left:20px }
#group .ibrain-service .about  { width:33% }
#group .ibrain-service .member { width:27.5% }
#group .ibrain-service .howtobuy {width:39.5%}
#group .venture  { width:50%; padding-left:0; padding-right:0 }
#group .venture .venture1 { width:55%; padding-right:5px }
#group .venture .venture2 { width:45%; padding-right:0 }
#footer .logo-footer {width: 300px }
#footer .logo { width:80px; }
#footer .title { width: 210px }
#footer .contact { width: 70%; width:calc(100% - 320px) }
#footer .contact .center { display:block }
#footer .contact .rights { padding-right:15px}
}
@media (min-width:992px) {
#group .foottitle {
 	margin:0 20px 10px -20px;
	padding:15px 0 0 50px;
}

#group .ibrain-service  { width:56%; padding-left:30px }
#group .ibrain-service .about, #group .ibrain-service .member { width:30% }
#group .ibrain-service .howtobuy {width:40%}
#group .venture  { width:44% }
#group .venture .venture1 { width:55% }
#group .venture .venture2 { width:45% }
#footer .logo-footer { width:350px; padding-top:15px }
#footer .logo { width:140px; }
#footer .title { width: 200px }
#footer .contact {padding-top:15px }
#footer .contact .rights { width:169px; display:inline-block; padding-right:15px}
#footer .contact .center { padding-left:15px }
#footer .contact address .inline { display:inline} 
}
#footer .contact address span { display:inline-block; width:6.5em; text-align:center; background-color:#fe8929; color:#fff; margin:0 0 3px; border-bottom-left-radius:5px;border-top-right-radius:5px}


/*不支援IE8　全幅alert*/
#fullscreen.alert {margin:0 0 0 -10px}
#fullscreen { position:fixed; bottom:0; z-index:99999; width:100%; background-color:#FFF500; text-align:center; color:#000; padding:6px 15px; font-size:15px }
#fullscreen a { color:#D30003 }
	
/*圖片標題、頁標題*/
.alert {  border-radius: 8px }
.alert > strong { display:block}
.alert .btn-link { color:#ed7513; font-size:14px }
.alert-warning { background: url(/File/Image/ico_waring.png) left top no-repeat #fcf8e3; padding-left:35px }
.alert-PW { background: url() left top no-repeat #fcf8e3; padding-left:4px;padding-top:15px;padding-bottom:0px }
.alert-warning.small { background: url(/File/Image/ico_hint.png) left top no-repeat #fcf8e3; padding-left:35px }
.alert-danger { background: url(/File/Image/ico_danger.png) left top no-repeat #fff; padding-left:35px }


.btn-lg {
  border-radius: 24px;
}

.btn-group > .btn,
.btn-group > .btn-lg {
  border-radius: 0;
}

/*環境測試*/
/*環境測試頁Test/#select_type*/
#course_type_select { padding:0;display:flex; justify-content:space-between; align-items:stretch;}
#course_type_select > a {text-decoration:none; margin:5px 7.5px;text-align: center;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px; padding: 7px 15px; display:block; flex:1}

#course_type_select .type-sd {
	border:1px solid #f1b6a3;
}
#course_type_select .type-mp,#course_type_select .type-ol {
	border:1px solid #9dcbde
}
#course_type_select .type-name {font-size: 25px; font-weight: bold; clear: both; line-height: 25px; padding: 10px 5px 0;}
.type-name.sd {color:#ed4c28}
.type-name.mp {color:#fe8929}
.type-name.ol {color:#ed4c28}

#course_type_select .type-descript { font-size:12px; color:#000; padding:0; clear:both }
#course_type_select a:hover, #select_type a:hover {
	background-color: #f6f6f6;  border-radius: 14px; }

#select_type {display:flex; justify-content:space-between; align-items:stretch;}
#select_type a {color:#a5a5a5;flex:1}
#select_type a:hover { text-decoration:none;}
#select_type .type-sd.active {border-bottom:3px solid #ed4c28; color:#ed4c28}
#select_type .type-mp.active, #select_type .type-ol.active {border-bottom:3px solid #07a4cc}
#select_type .type-mp.active {color:#fe8929}
#select_type .type-ol.active {color:#ed4c28}

#select_type .tab {border-width:0; border-bottom:1px solid #c7c7c7; border-bottom-left-radius:0!important; border-bottom-right-radius:0!important; margin:0!important; display:flex; justify-content:center; align-items:center}

.tech_reserve { font-size:14px; margin:80px 45px 0;}
.tech_reserve h4 { color:#fe8929; font-weight:bold; text-align:center }



#detect { margin:0; padding:0 }
#detect .th { font-weight:bold; color:#393939; padding:0 8px  }
#detect .row {text-align:left; border-bottom:1px solid #DCDCDC }
#detect .device, #detect .os, #detect .browser { display:inline-block;line-height:1.4 }
#detect #message-area { border:3px solid #76b9d6; padding:9px 8px }
/*#detect .col-xs-2, #detect .col-xs-5, #detect .col-xs-9 { padding-left:8px; padding-right:8px }*/

#detect2 { text-align:center }
#detect2 .device, #detect2 .os, #detect2 .browser { float:none; display:inline-block; width:auto; padding:0}
#detect2 .device:after { content:"："}
#detect2 .os:after { content:"；"}
#detect3 { display:none;}
#detect3 .device, #detect3 .os, #detect3 .browser { float:none; display:inline-block; width:auto; padding:5px 10px 0}
#detect3 #message-area { text-align:left}

#detect-ua { margin:0; padding:0 }
#detect-ua b { font-weight:bold; color:#76b9d6; padding:0 8px; display:inline-block;}
#detect-ua .row {margin:0; text-align:left; border:3px solid #76b9d6;padding:9px 8px }
#detect-ua .device, #detect-ua .os, #detect-ua .browser { display:inline-block;line-height:1.4; color:#fe8929; padding-right:35px; }
.os small { display:block;}

@media (max-width:767px) {
#detect .device{ width:60px;}
#detect .os { width:108px;}
#detect .browser { width:auto; }
#detect-ua b { width:5.2em;}
#detect-ua .device, #detect-ua .os, #detect-ua .browser { display:block; padding-right:0; }
.os small { padding-left:66px;}
/*環境測試頁Test/#course_type_select*/
#course_type_select { flex-direction:column;}
#select_type .tab {flex-direction: column;}
}
@media (min-width:768px) { 
#detect { margin:0 20px }
}
@media (min-width:768px) and (max-width:991px) { 
#detect-ua b { width:5.2em;}
#detect-ua .device, #detect-ua .os, #detect-ua .browser { display:block; padding-right:0; }
.os small {padding-left:66px;}

#course_type_select > a { padding:7px 0; margin:0 3px;}

}

#course_type_select .small { font-size:16px!important }


/*全螢幕*/
#player-size {margin:0; width:100%;height:auto; position:relative; overflow:hidden;}
#player-size #handheldEsc { position:absolute;margin:0;bottom:4px;right:0; z-index:2147483647; color:rgba(255,255,255,0.8); background:rgba(0,0,0,0.1); padding:8px 14px 9px;border-radius:4px;course:pointer;font-size:13px;}
/*#player-size #handheldEsc { position:absolute;margin:0;bottom:4px;right:0; z-index:2147483647; color:#ffffff; background:#464646; padding:8px 14px 9px;border-radius:4px;course:pointer;font-size:13px;}*/
#player-size #handheldEsc:focus {color:#2196f3 }
.fullvideo { position:fixed!important; width:100%!important; height:100%!important; top:0; left:0; bottom:0; right:0; z-index:2147483640!important;background-color:#000!important; padding:0;}
.rmpfull {width:100%!important; height:100%!important;}

/*???*/
@media (max-width:1024px) {
    /*#rmp-fullscreen { display:none;}*/
    #player-size #handheldEsc {padding:8px 10px 9px; }
}
/* ----------- iPad ----------- */
/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { #rmp-fullscreen { display:none;}} */

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {  #rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}}

/* Landscape
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { #rmp-fullscreen { display:none;}} */

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
#rmp-fullscreen { display:none;}
#player-size #handheldEsc {display:block}
}

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {
#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}
}

/* Landscape */
@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}
}

/* Portrait */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}
}

/* Landscape */
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}
}
/* ----------- Galaxy ----------- */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) {#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}}
/* ----------- Nexus ----------- */
@media only screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}}
@media only screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {#rmp-fullscreen { display:none;} #player-size #handheldEsc {display:block}}

@media (max-width: 767px) {
#course_type_select { padding:10px 0 20px}

#course_type_select .type-name { font-size:25px; font-weight:bold;  clear:both; line-height:25px; padding:10px 5px 0 }

#select_type .type-name > span, #select_type .type-name > small, #select_type .type-name > img { display:block; margin-left:auto; margin-right:auto }
#select_type .type-name > img { width: 40px; height:40px }

#test .btn-group > .btn { padding-left:11px; padding-right:11px }

}
@media only screen and (max-device-width: 767px) {
#rmp-fullscreen { display:none;}
#player-size #handheldEsc {  padding:8px 5px 9px; }
}
@media only screen and (max-device-width: 320px) {
#player-size #handheldEsc { padding:8px 3px 9px; }
#mpico{
	display: block;
}
}
@media (min-width: 768px) and (max-width: 991px) {

#course_type_select .type-icon { width: 50px}
#course_type_select .type-name { font-size: 20px; font-weight:bold;  clear:both;  }
#course_type_select .small { font-size:15px!important }
#course_type_select .type-name { padding:10px 0 0 }
#course_type_select .alert { padding:40px 45px 0;  }
#course_type_select .alert img { padding:0 15px }
#select_type .type-name > img { width:40px }



#detect .device { width:18% }
#detect .os { width:34% }
#detect .browser { width:47% }
}
@media (min-width: 992px) {
/*環境測試頁Test/#course_type_select*/
#course_type_select .alert-default { padding:70px 45px 0 }
#course_type_select .alert img { padding:0 }
#course_type_select .alert.small { font-size:14px!important }
	/*與home.css共用*/
	.type-used > span {display:block; width:50%; float:left}
	/*#course_type_select .icon, .type-descript { display:none }*/

#SD_test, #MP_test, #OL_test { padding-top:15px; clear:left }

#select_type .tab { margin:0;height:53px; padding:0 }
#select_type .type-name, #select_type .type-descript, #select_type a > div > img {
	display:inherit; padding:0 
}

#detect .device { width:17% }
#detect .os { width:34% }
#detect .browser { width:48% }
}

/*環境測試按鈕樣式*/
.btn_download{
	width:100%;
	height: 65px;
	text-align:center
}
.btn_downplayer a{
	background-image:url(/Test/image/btn_downplayer.gif);
	background-repeat:no-repeat;
	background-position:center;
	display:inline-block;
	width:210px;
	height:59px}
.btn_downplayer a:hover{
	background-image:url(/Test/image/btn_downplayer_o.gif)}
.btn_downfile a{
	background-image:url(/Test/image/btn_downfile.gif);
	background-repeat:no-repeat;
	background-position:center;
	margin-left: 25px;
	display:inline-block;
	width:210px;
	height:59px}
.btn_downfile a:hover{
	background-image:url(/Test/image/btn_downfile_o.gif)}
@media (max-width:991px) {

.pic-responsive {
	display: block;
	max-width: 100%;
	height: auto}
}
@media (max-width:767px) {
/*環境測試按鈕樣式*/
.btn_download{
	width:calc(100% + 70px);
	margin-left:-30px;
	}
.btn_downplayer a{
	background-image:url(/Test/image/btn_downplayer_m.gif);
	margin-left: 0;
	width:150px}
.btn_downplayer a:hover{
	background-image:url(/Test/image/btn_downplayer_m_o.gif)}
.btn_downfile a{
	background-image:url(/Test/image/btn_downfile_m.gif);
	margin-left: 0;
	width:150px}
.btn_downfile a:hover{
	background-image:url(/Test/image/btn_downfile_m_o.gif)}
}

/*頻寬測試---------------------------------*/
/*#WMPAlert{
	padding:0}*/
#WMP { padding-top:30px }
#WMP .panel.panel-default { border-width:0; background-color:transparent; box-shadow:none; padding:0 }
		
.bandwidth {
	font-size:17px;
	font-weight:bold;
	color:#FFF;
	padding:10px 0;
	text-align:center;
	background:#00a6d8;
}

#WMPProgressbar{
	font-size:17px;
	padding-top:10px;
	text-align:center;
	border:2px solid #00a6d8;
	border-bottom:none}

#WMPMessage{
	text-align:center;
	color:#E33100}
	
.WMPButton{
	text-align:center;
	border:2px solid #00a6d8;
	border-top:none;
	padding-bottom:15px;
	padding-top:15px;
	margin-bottom:15px}

#vLastSec.alert { width:100%; font-size:22px }
#vROStep1,#vROStep2,#vROStep3,#vROStep4,#vRON,#vROY,#vRODownload {
	width:100%
}
/*.SD_GetKeyButton{
	width: 580px;
	border: #5195d8 1px solid;
	padding: 10px
}*/

#MP4Note {
	padding-left:5px;
	padding-right:5px;
	border-bottom:#e2ecfa 1px solid;
	border-left:#e2ecfa 1px solid;
	border-right:#e2ecfa 1px solid;
}

/*舊版播放器------------------------------*/
.test-speed-btn, .entrance2  { height:45px; 
	font-size:17px;
	display:block;
	line-height:45px;
  	vertical-align:middle;
	margin:0 auto 10px}
.test-speed-btn:hover, .entrance2:hover {
 text-decoration:none }
.entrance2 { background-color:#b9b9b9; color:#fff!important; }
.WMPButton small { color:#FFF501 }

.speed-ok, .speed-slow, .speed-ng { padding:0 0 5px; margin-top:-5px; display:block; font-size:15px }
.speed-slow a, .speed-ng a { font-weight:100}
.speed-ok { color:#333 }
.speed-slow { color:#ee7600; font-weight:bold }
.speed-ng { color:#EB0003; font-weight:bold }
@media (max-width:767px) {
.test-speed-btn, .entrance2  { width:275px}
}
@media (min-width:768px) {
.test-speed-btn, .entrance2  { width:305px }
}

/*下載gvi樣式-------------------------------*/
.msg_FlagDownload {
	text-align:center;
	font-size:15px;
	line-height:15px;
	padding:8px 18px;
	margin:0 15px 25px;
	color:#fe7e01;
	border:1px solid #ddd;
	border-radius: 14px
}
#newfile { background-color:#ecfcfa!important; border-left:3px solid #1bceb8!important }
#newfile a.ico_download_gvi {
	background:url(/Member/image/ico_download_gvi.png) right no-repeat;
  padding-right:23px;
 
}

#newfile a.ico_download_gvi:hover {
	background:url(/Member/image/ico_download_gvi_o.png) right no-repeat;
 }	
a.hadload_gvi { color:#666666!important;}
	
/*Q&A常見問題---------------------------------*/
/*Q&A 上方的Menu用*/
#QA.navbar { margin-bottom:0 }
#QA .container-fluid { background-color:#f5f8f9; margin:0 }
#QA .navbar-brand { font-weight: bold }
#QA .navbar-nav > li > a {
  padding: 19px 10px;
  line-height: 22px;
}
#QA .navbar-nav > li > a:hover { background-color:#fff }
#QA .navbar-toggle {
	padding:9px 15px;
	margin:6px 16px;
	background-color:#fff
}
.ChapterLevel:not(:last-child):after { content:url(/File/image/ico_arrow_qa.png) }
a.ChapterLevel {color:#424b52 }
.bg-submenu { padding:4px 15px; background-color:#f6f6f6; width:100%; min-height:0 }
.submenu { font-size:16px; padding:0 6px; display:inline-block; }
/*.submenu:first-child { display:inline-block;padding-left:16px; padding-right:0; background-color:transparent ; color:#424b52 }*/
a.submenu { padding:0 14px; margin-right:5px; border-radius:14px; background-color:#424b52; color:#fff;display:inline-block }
/*.submenu:last-child:before { padding:0; display:none } */
.submenu:focus {background-color:#f5f8f9;}
#searchQA { padding:8px 0 0; margin:0}
#QA-list .row { margin:0;border-bottom:1px solid #c7d9ed;}
#QA-list .row:hover { background-color:#f6f6f6!important }
#QA-list .row:nth-child(even) { background-color:#f7fafc }
#QA-list .order { color:#e093a2; font-weight:bold;font-size:14px; float:left; position:relative }
#QA-list .question { float:left; position:relative; border-left: 4px double #f1ced5; }
#QA-list .question b { float:right; font-size:13px; border-radius:4px; color:#fff; padding:0 5px;background-color:#4892e4 }
#QA-list .question b.sd { background-color:#ff7c3b!important}
#QA-list .question b.mp { background-color:#2abbfe!important}
#QA-list .catalog { color:#bbbbbb; font-size:13px; text-align:left }
#QA-list .content { background-color:#fcfcfc; border-bottom: 1px solid #eeeeee; padding:25px 10px 15px; margin:0 -5px; text-align:justify }
#QA-list .content h4 { color:#0075c1; font-weight:bold; margin-top:45px }
#QA-list .content h5 { font-weight:bold; font-size: 17px;color:#5a6064; margin:20px 0 0 }
#QA-list .content .label { font-size: 17px; padding:5px 8px 4px!important }
#QA-list .table { border-width:0 }
#QA-list .table tr { border-width:0; border-bottom:3px solid #fff }
#QA-list .content img { display: block; max-width: 100%; height: auto;margin:5px auto 25px}
#QA-list .list-group-item:hover { background-color:#f9f9f9 }
#QA-list .list-group-item-heading { font-size: 18px; color:#000; margin-top:25px!important}
#QA-list .list-group-item-text { padding:5px 15px 15px; line-height:24px}
#QA-list .nav-tabs { border-bottom:1px solid #f39800 }
#QA-list .nav-tabs li.active a { color:#fff }
#QA-list .nav-tabs li a { color:#f39800}
#QA-list .nav-tabs li a:hover { background-color:#fcfcfc; color:#f39800}
#QA-list .bg-light { padding:9px!important; border-width:0px!important }

#QA-list .tags { list-style: none; margin: 30px 0 0; overflow: hidden; padding: 0; }
#QA-list .tags li { float: left; }
#QA-list .tag { background: #eee; border-radius: 3px 0 0 3px; color: #999; display: inline-block; height: 26px; line-height: 26px; padding: 0 20px 0 23px; position: relative; margin: 0 10px 10px 0; text-decoration: none;  -webkit-transition: color 0.2s; }
#QA-list .tag::before { background: #fff; border-radius: 10px; box-shadow: inset 0 1px rgba(0, 0, 0, 0.25); content: ''; height: 6px; left: 10px; position: absolute; width: 6px; top: 10px; }
#QA-list .tag::after { background: #fff; border-bottom: 13px solid transparent; border-left: 10px solid #eee; border-top: 13px solid transparent; content: ''; position: absolute; right: 0; top: 0; }
#QA-list .tag:hover { background-color: #109ad7; color: white; }
#QA-list .tag:hover::after { border-left-color: #109ad7; }
@media (max-width:767px) {
.submenu { display:block; text-align:center; width:100%;}
a.submenu {line-height:36px; margin-top:3px; border-radius:6px; }
#QA-list .row { padding:9px 5px; }
#QA-list .pad-lg { padding:0!important}
#QA-list .order, #QA .catalog { padding:3px 8px; line-height:1 }
/*#QA-list .q-title-list { width:100%; padding:3px 8px; border-width:0; }*/
#QA-list .question { width:100%; padding:3px 8px; border-width:0; }
/*#QA-list .question { width:100%; padding:3px 8px; border-left: 0px double #f7e6c9; border-right:0px double #f7e6c9}*/
#QA-list .catalog:before { content:"／" }
#QA-list .content { margin:-8px -5px; }
}
@media (min-width:768px) {
#QA-list .row { padding:0 5px }
#QA-list .order { width:10%; padding:10px 8px; line-height:22px; text-align:center}
#QA-list .catalog { margin-bottom:-10px}
/*#QA-list .q-title-list { width:90%; padding:10px 8px; line-height:22px }*/
#QA-list .question { width:90%; padding:10px 8px; line-height:22px }
/*#QA-list .question { width:70%; padding:10px 8px; line-height:22px }*/
#QA-list .content { padding:40px 30px 25px }
}
@media (min-width:768px) and (max-width:991px) {
#QA .navbar-collapse { padding-left:0; padding-right:0;}
}

/*頁面下排常駐按鈕*/
.support {
	z-index: 99;
	position: fixed;
	display: block;
	right: 80px;
	height:50px;
	padding: 15px 15px;
	bottom: 0;
	text-align:center;
	font-size: 15px;
	background: #175ea6;
	color: #fff;
	cursor: pointer;
	border-top-left-radius:6px;
}
.gotop {
	z-index: 9999;
	position: fixed;
	display: block;
	right: 5px;
	bottom: 5px;
	width:48px;
	height:48px;
	text-align:center;
	padding: 13px 13px;
	background: #f6f6f6;
	color: #888888;
	cursor: pointer;
	font-size:14px
}
@media (max-width:767px) {
.support {
	right: 60px;
	height:36px;
	padding: 8px 15px;
	font-size: 14px;
}
.gotop {
	display:none
}
}

/*New-----訂單不分課程型態*/
/*課程訂單、科目、章節新樣式-----------------------------------*/
#During-Period .orderlist { width: 100%; border:1px solid #ebebeb; border-bottom:4px solid #dfeaf2;
	margin: 0 0 15px 0;
	padding: 0;
	display: inline-block;
	cursor:pointer;
	background: top right no-repeat #f7f7f7;
	background: url(/Member/image/btn_view_order.png) top right no-repeat, -webkit-linear-gradient(#fff, #f7f7f7);
	background: url(/Member/image/btn_view_order.png) top right no-repeat, -o-linear-gradient(#fff, #f7f7f7);
	background: url(/Member/image/btn_view_order.png) top right no-repeat, -moz-linear-gradient(#fff, #f7f7f7);
	background: url(/Member/image/btn_view_order.png) top right no-repeat, linear-gradient(#fff, #f7f7f7);
}
#During-Period .orderlist:hover  { border-color:#fff; border-bottom-color:#f39800;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);
	box-shadow:  0px 0px 10px 0px rgba(0,0,0,0.35);
}
#During-Period .ordername {
	width:100%;
	font-size:19px;
	font-weight:bold;
	line-height:22px;
	color:#109ad7;
	display:inline-block;
}
#Expired .orderlist { width: 100%; border:1px solid #ccd5db; border-bottom:4px solid #b0bfca;
	margin: 0 0 15px 0;
	padding: 0;
	display: inline-block;
	background-color: #dae1e6;
}
#Expired  .ordername {
	width:100%;
	font-size:19px;
	font-weight:bold;
	line-height:22px;
	color:#575e63;
	display:inline-block;
	padding:23px 14px
}
.order-no { color:#109ad7; font-size:13px; display:block;float:left}
.order-no small { padding-right:8px }
.order-date, .total-minute, .tutor-date, .exp-date {color:#109ad7; font-size:14px; line-height:24px; display:block;float:left }
.order-date2{
color:#888888; font-size:14px; line-height:24px; display:block;
margin:0 30px 0 0;
}
@media (max-width: 767px) {
#During-Period .orderlist { 
	background: url(/Member/image/btn_view_order_m.png) top right no-repeat, -webkit-linear-gradient(#fefefe, #f5f5f5);
	background: url(/Member/image/btn_view_order_m.png) top right no-repeat, -o-linear-gradient(#fefefe, #f5f5f5);
	background: url(/Member/image/btn_view_order_m.png) top right no-repeat, -moz-linear-gradient(#fefefe, #f5f5f5);
	background: url(/Member/image/btn_view_order_m.png) top right no-repeat, linear-gradient(#fefefe, #f5f5f5);
	padding-bottom:10px;
}
#During-Period .orderlist:hover  { 
	background: url(/Member/image/btn_view_order_m_o.png) top right no-repeat #fffbf3;
}
#During-Period .ordername {
	padding:23px 75px 18px 12px
}
#Expired .orderlist { padding-bottom:10px; }
.order-no { padding:0 0 0 30px; width:100% }
.order-no small { font-size:14px}
.order-date, .tutor-date, .total-minute, .exp-date {padding:0 0 0 30px; width:100% }
}
@media (max-width: 991px) {
#During-Period .ordername {
	padding:23px 75px 18px 12px
}
#Expired .orderlist { padding-bottom:10px; }
.order-no { padding:0 0 30px 30px; width:40% }
.order-no small { font-size:14px}
.order-date, .tutor-date, .total-minute, .exp-date {padding:0 30px 0 0; width:60% }
}
@media (min-width:992px) {
#During-Period .orderlist { 
	background: url(/Member/image/btn_view_order.png) top right no-repeat #f7f7f7;
	background: url(/Member/image/btn_view_order.png) top right no-repeat, -webkit-linear-gradient(#fff, #f7f7f7);
	background: url(/Member/image/btn_view_order.png) top right no-repeat, -o-linear-gradient(#fff, #f7f7f7);
	background: url(/Member/image/btn_view_order.png) top right no-repeat, -moz-linear-gradient(#fff, #f7f7f7);
	background: url(/Member/image/btn_view_order.png) top right no-repeat, linear-gradient(#fff, #f7f7f7);
}
#During-Period .orderlist:hover  { 
	background: url(/Member/image/btn_view_order_o.png) top right no-repeat #fffbf3;
}
#During-Period .ordername {
	padding:23px 110px 18px 14px
}
.order-no { padding:0 0 30px 30px; width:24% }/*padding:0 0 45px 30px;*/
.order-no span { display:block }
/*訂單一排2個*/
.order-date, .total-minute, .tutor-date, .exp-date { width:38%; min-height:24px;}
/*訂單一排3個*/
/*.order-date, .total-minute, .tutor-date, .exp-date { width:25%; min-height:24px;}*/
.total-minute { padding-right: 0 }
}

/*------OrderFormItemList.aspx------*/
/*訂單、課程標題-共用樣式*/
#SubjectTitle {
	margin-top:5px;
	margin-bottom:30px;
	color:#06a1c9;
	word-wrap: break-word;
	}
#SubjectTitle a, #SubjectTitle a:visited{
	color:#686868} /*06a1c9*/
#SubjectTitle a:hover{
	color:#109ad7}
#SubjectTitle .pagepath{
	font-size:13px;
	padding:12px 0 4px;
	display:block
	}
#SubjectTitle .SubjectName {
	/*color:#515151;*/
	font-size:26px;
	font-weight:bold;
	margin:0;
	line-height:28px;
	height:28px;
	}

#SubjectTitle .SubjectName.mp { color:#2eaee6 }
#SubjectTitle .SubjectName.sd  { color:#fb7155 }
#SubjectTitle .SubjectName.ol  { color:#046cd6 }
#SubjectTitle .SubjectName.download  { color:#1bceb8 }

/*#course-list-課程列表上方頁籤*/
#course-list-tab { width:100%; height:46px }
#course-list-tab:before, #course-list-tab:after {
	content: " ";
	display: table;
}
#course-list-tab:after { clear:both }
#course-list-tab strong { font-size:17px; color:#787878; padding:0 5px 0 0; line-height:46px }
#course-list-tab .btn-dataload { float:right; text-align:center; font-size:15px; color:#fff; background-color:#1bceb8; padding: 10px 17px }
#course-list-tab .btn-course-list { float:right; text-align:center; font-size:15px; color:#fff; background-color:#4dacea; padding: 10px 17px }
#course-list-tab .btn-course-list.sd { background-color:#fb7155!important }
#course-list-tab .btn-schedule { float:right; text-align:center; font-size:15px; color:#fff; background-color:#ef8d6f; padding: 10px 17px }

/*#course-list-三種型態的課程列表*/
#course-list:before, #course-list:after {
	content: " ";
	display: table;
}
#course-list:after { clear:both }
#course-list { width:100% }
#course-list .mp4, #course-list .sd, #course-list .ol {	border:1px solid #ddd; padding:5px 6px 2px; margin-top:-1px; position:relative}
#course-list .row { padding:5px 0 5px}
#course-list .mp4 { border-left:4px solid #2eaee6 }
#course-list .sd { border-left:4px solid #fb7155 }
#course-list .ol { border-left:4px solid #046cd6 }
#course-list .mp4:hover, #course-list .sd:hover, #course-list .ol:hover { background-color:#fafafa }
#course-list .type, #course-list .no, #course-list .course-name, #course-list .tutor-date, #course-list .view-date{ display:block; float:left }
#course-list .btn-datadown, #course-list .view-time { display:block; float:right; text-align:right }
#course-list .type { width:30px; padding:0 0 0 15px; text-align:center }
#course-list .no { font-size:12px; width:70px; padding:7px 0 0 15px }
#course-list .course-name { padding:7px 0 0 5px; font-size:17px; line-height:20px; font-weight:bold }
#course-list .label { border-radius:6px;  line-height:17px; display:inline-block; font-weight:normal}
/*#course-list .course-name:hover { position:relative; top:1px; left:1px; text-decoration:none }
#course-list .course-name:link, #course-list .course-name:visited, #course-list .course-name:active { text-decoration:none }
#course-list .course-name:hover:after, #course-list .course-name:focus:after { content:url(/Member/image/btn_view_file_list.png) }*/
#course-list a:hover .course-name, #course-list a:focus .course-name, #course-list a:active .course-name { position:relative; top:1px; left:1px; text-decoration:underline }


#course-list .mp4 .no, #course-list .mp4 .course-name {color:#2eaee6 }
#course-list .sd .no, #course-list .sd .course-name {color:#fb7155 }
#course-list .ol .no, #course-list .ol .course-name {color:#046cd6 }

#course-list .btn-datadown { width:135px; padding:3px 0 0; font-size:16px; color:#08b5ac ;padding-right:17px; position:absolute; right:0; top:8px; z-index:990 }
#course-list .tutor-date { margin-left:105px }
#course-list .tutor-date, #course-list .view-date { width:225px; font-size:13px; color:#8e8e8e}
#course-list .view-time { width:165px; font-size:13px; color:#8e8e8e; padding-right:25px }

/*檔案列表的上方頁籤樣式*/
/*
#course-table-tab {
	display: table;
	width: 100%;
	margin: 25px 0 0;
}
*/
#course-table-tab {
	display: table;
	width: 100%;
	margin: 0px 0 0;
}

#mpico{
	float: left;
	display: inline;
	margin-right: 4px;
}

/*新版已播次數*/
.iUse {
color:#109ad7;
line-height: 26px;
float:left;
/*color:#a6a6a6;*/
font-size: 13px;
text-align:left;
margin-left:0px; 
/*line-height:34px;*/
/*padding-left:7.4%; 	*/
}

/*新版已看時數*/
.iMinuteTotal {
/*	padding-left: 0;*/
	color:#109ad7;
	line-height: 26px;
	display:block;
	float:left;
/*	color:#a6a6a6;*/
	font-size: 13px;
}
.hint { color:#888888; margin-top:-5px;}
.hint2 { color:#888888;}
/*新版上次播放*/
.dDateUse {	
color:#109ad7;
line-height: 26px;
float:left;
/*color:#a6a6a6;*/
font-size: 13px;
text-align:left;
margin-left:0px; 
/*padding-left:7.4%; */
/*line-height:34px*/
}



@media (max-width:991px) {
/*新版已播次數*/
.iUse {
/*padding-left:10.4%;*/
}
.dDateUse, .iMinuteTotal, .iUse {
/*width:auto; */
line-height: 26px;
}
}

@media (max-width:800px) {
.dDateUse, .iMinuteTotal {
width:auto; 
line-height: 26px;
}
.dDateUse{
clear:both;
display:block;
}
}

@media (max-width:280px) {
.dDateUse, .iMinuteTotal,iUse {
width:auto; 
line-height: 26px;
}
.dDateUse, iUse{
clear:both;
display:block;
}
}

@media (max-width:767px) {
/*新版上次播放*/
.dDateUse {	
/*padding-left:10.4%; */
}
.iMinuteTotal, .iUse {
/*width:50%; */
}
}


#course-table-tab strong { text-align:center; font-size:16px; padding: 10px 20px 15px 15px}
/*#course-table-tab a { text-align:center; font-size:15px; padding: 10px 0 15px 0; color:#686868; display:inline-block;}*/
#course-table-tab a:hover {text-decoration:none;}
#course-table-tab a:hover span {background-color:#f2f2f2;}
#course-table-tab strong.btn-filelist { color:#4dacea; border-bottom:4px solid #4dacea }
#course-table-tab strong.btn-filelist.sd { color:#fb7155; border-bottom:4px solid #fb7155 }
#course-table-tab strong.btn-material { color:#2eaee6; border-bottom:4px solid #2eaee6  }
#course-table-tab strong.btn-schedule { color:#ef8d6f; border-bottom:4px solid #ef8d6f  }

/*檔案列表的上方頁籤-新版li*/
#course-table-tab ul{
	padding:0;
	margin-bottom:0;
    text-align:center;
	display: flex;
    justify-content: space-around;
}
#course-table-tab ul li {
	padding: 0;
	display:inline-block;
    width:calc(20% - 4px);
    text-align:center;
}
/* #course-table-tab ul li > a {color:#686868} 2023/11/15 hide*/
#course-table-tab ul li > a {color:#2eaee6} /*2023/11/15 add*/
#course-table-tab ul li > a span { width:100%;display:block; padding: 15px 0 5px;}
#course-table-tab ul li > a span:empty { width:0%; padding:0;}
#course-table-tab ul li a span.tab_exam {color: #f37000; }
#course-table-tab ul li > a span img {display:block;margin:0 auto}
.act a {
	text-align: center;
    font-size:16px;    
    font-weight: bolder;
    }
    #course-table-tab .tabs .act.c a span {color: #4dacea;border-bottom:4px solid #4dacea;}
    /*#course-table-tab .tabs.sd .act a span {color: #fb7155;border-bottom:4px solid #fb7155;}*/
    #course-table-tab .act.s a span{color: #2eaee6;border-bottom:4px solid #2eaee6;}

    #course-table-tab .act.s a span.tab_exam {color: #f37000; border-bottom:4px solid #f37000; background-color:#dff3ef}
	#course-table-tab .tabs_data .act.c a span { color: #2eaee6; border-bottom:4px solid #2eaee6;}
/*#course-table-tab a img {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 
    filter: grayscale(100%)
}*/

@media screen and (min-width: 395px) and (max-width: 767px) {
#SubjectTitle .pagepath, #SubjectTitle .SubjectName{
}

#course-list-tab strong { padding:0 }
#course-list-tab .btn-dataload, #course-list-tab .btn-course-list, #course-list-tab .btn-schedule { padding-left:2px; padding-right:8px}
/*#course-table-tab a,#course-table-tab .act a, #course-table-tab .tabs_data .act a { padding: 10px 10px 4px;}*/
#datadown, #course-list { display:table }

#course-list .mp4, #course-list .sd, #course-list .ol {	padding:5px }
#course-list .btn-datadown { padding-right:5px; }
#course-list .course-name { padding:20px 10px 10px 20px; width:100%; display:block }
#course-list .view-date { width:50%; padding-left:5px; padding-right:15px; line-height:20px; height:18px; overflow:hidden/*折行的時分秒不顯示*/}
#course-list .tutor-date {  width:50%; margin-left:0px; padding-left:20px; line-height:20px  }
#course-list .view-time { float:left; width:100%; text-align:left; padding-left:calc(50% + 5px); line-height:15px }

#course-table-tab strong { padding: 10px 10px 15px 8px}
/*#course-table-tab a { padding: 10px 10px 9px}*/

}
@media (max-width:350px) {
#course-list-tab .btn-dataload, #course-list-tab .btn-course-list, #course-list-tab .btn-schedule { padding-left:2px; padding-right:5px}
#course-list-tab  img {
	margin-right:-5px
}
#course-table-tab strong { padding: 10px 5px 15px 0}
#course-table-tab a { padding: 10px 7px 9px 3px}
/*#course-table-tab img { margin-right:-5px }*/
}
@media (min-width:768px) and (max-width:991px) {
#course-list .course-name { width:325px; padding-bottom:10px }
#course-list .tutor-date, #course-list .view-date {  width:190px; padding-left:5px }
#course-list .tutor-date { margin-left:0px; padding-left:20px }
}
@media (min-width:992px)  {
#course-list .course-name { padding-bottom:10px; width:500px }
#course-table-tab ul{
    text-align:left;
}
}
@media (min-width:1280px) {
course-list a:hover .course-name:after, #course-list a:hover .course-name:after { content:url(/Member/image/btn_view_file_list.png) }
#course-table-tab ul{
    text-align:left;
}
}
	
/*課程列表---------*/
/*sd & mp*/
#course-table-sd , #course-table-mp { border-bottom: 30px solid #f3f3f3; padding:0; position:relative;}
#course-table-sd .row.th { font-weight:bold; border-bottom: 3px solid #fb7155; padding-top:5px; padding-bottom:0}
#course-table-mp .row.th { font-weight:bold; border-bottom: 3px solid #4dacea; padding-top:5px; padding-bottom:5px }
#course-table-mp .courseFile { position:relative;}
#datadown { width:100%; border-bottom:20px solid #dddddd }
#datadown .row.th { font-weight:bold; color:#2eaee6; padding:0; margin:0; border-bottom:3px solid #2eaee6}
#datadown .row:hover { background-color:#e4f2f8!important }
#datadown .row.th > div {line-height:40px; height:40px; vertical-align:middle }
#datadown .news, #datadown .update, #datadown .newsdate { display:block; float:left }
#datadown .news a { color: #424242/*#268ad3*/ }
#datadown .update { color:#2eaee6; /*font-size:14px */}
#datadown img { float:left; padding-right:8px }
#datadown > .row > div { padding:6px 5px}

#course-table-sd, #course-table-mp, #datadown { margin:0 0 15px}
#course-table-sd .row, #course-table-mp .row, #datadown .row { margin:-1px 0!important ; padding:6px 0 3px; border: 1px solid #dddddd }
#course-table-sd .row:hover { background-color:#fef0ee!important }
#course-table-mp .row:hover, #course-table-mp .row:hover > div  { background-color:#f6f6f6!important }
#course-table-sd .order, #course-table-sd .course-name, #course-table-sd .course-dl,#course-table-sd .download, #course-table-sd .downloaded, #course-table-sd .teacher, #course-table-sd .tutor, #course-table-sd .date,
#course-table-mp .order, #course-table-mp .course-name, #course-table-mp .download, #course-table-mp .teacher, #course-table-mp .view-time, #course-table-mp .tutor, #course-table-mp .date, #course-table-mp .tag, #course-table-mp .file-name, #course-table-mp .chapter, #course-table-mp .play, #course-table-mp .play-times, #course-table-mp .last-played {
	padding:3px 8px; position: relative; min-height: 1px; color:#666666
}
.SeeChap { display:block;background:url(/Member/image/CourseSchedule.png) center no-repeat; width:45px; height:45px; margin:0 auto; cursor:pointer}
.SeeChap:focus { background:url(/Member/image/CourseSchedule-o.png) center no-repeat}

#course-table-sd .course-name small { background-color:#268ad3; margin-left:7px; padding:1px 4px; border-radius:7px; color:#fff; font-size:12px;}
#course-table-sd .th > div, #course-table-mp .th > div {font-size: 16px!important }
#course-table-sd a, #course-table-mp a { color:#268ad3 }
#course-table-mp .ShowChapter {
	background:url(/Member/image/bg_ShowChapter.png) center bottom no-repeat #f6f6f6;
	padding:10px 3px 18px;
	margin:-7px 0 -5px;
	border-top:1px solid #f6f6f6;
	color:#1880b7;
	text-align:center;
    position:relative;
}
.noData { background-color:#f6f6f6;border-top:1px solid #efefef;text-align:center; padding:15px 0 0;}


#course-table-sd .ShowChapter {
	background:url(/Member/image/bg_ShowChapter.png) bottom center no-repeat;
	width:100%;
	padding-bottom:22px;
	border-top:1px solid #f6f6f6;
	color:#d98900;
	text-align:center;
	margin:-7px 0 -3px;
}
/*OrderFormItemCourseChapter.aspx的隨堂測紀錄*/
.inClassRecord { font-size:15px;text-decoration:none; padding:0 5px 8px!important; float:right;}
.inClassRecord i {opacity:0.75; font-size:13px;}
.inClassRecord:hover {text-decoration:none; color:#F37000!important;}

/*OrderFormItemCourseChapter.aspx的隨堂測驗*/
.ShowQuiz { padding: 0 15px!important;background-color:#fffbea;border-top:1px dotted #ffc95e!important; position:relative}
.ShowQuiz a.QuizName { display:block; float:left; width:100%;color:#590110!important; padding:7px 0 0;}
.ShowQuiz a.QuizName i {text-align:center; font-size:15px; padding-right:7px; opacity:0.75}

/*.ShowQuiz:hover {background-color:#ffb812;
background: -webkit-linear-gradient(right,#fff 0%, #ffb812 15%,  #ffb812 85%, #fff 100%);
    background: -o-linear-gradient(bottom, #fff 0%, #f5f4eb 15%,  #f5f4eb 85%, #fff 100%);
    background: -moz-linear-gradient(right, #fff 0%, #f5f4eb 15%,  #f5f4eb 85%, #fff 100%);
    background: linear-gradient(90deg, #fff 0%, #ffb812 15%,  #ffb812 85%, #fff 100%);}*/
.ShowQuiz a.QuizName:hover{text-decoration:none; color:#F37000!important; }


#course-table-sd .order, #course-table-sd .course-name, #course-table-sd .course-dl,#course-table-sd .download, #course-table-sd .downloaded, #course-table-sd .teacher, #course-table-sd .tutor, #course-table-sd .date, #course-table-mp .order, #course-table-mp .course-name, #course-table-mp .download, #course-table-mp .teacher, #course-table-mp .view-time,#course-table-mp .tutor, #course-table-mp .date, #course-table-mp .tag, #course-table-mp .file-name, #course-table-mp .chapter, #course-table-mp .play, #course-table-mp .play-times, #course-table-mp .last-played {
	float: left;
}
#course-table-sd .date input[type="checkbox"] {
  margin: 0;
  width:20px;
  height:20px;
  line-height:20px;
}

#course-table-sd .date { padding:3px 0;}
#BodyContentMainDetail .nav-pills > li > a.btn-light { width:100%!important; margin-right:-2px; white-space:normal!important; font-size:15px!important }
#BodyContentMainDetail .nav-pills > li > a.btn-light.active { border-bottom:1px solid #fff }
@media (max-width: 767px) {
#BodyContentMainDetail .nav-pills > li { width:32.5% }	
#BodyContentMainDetail .nav-pills > li > a.btn { padding:13px 0 10px}
#BodyContentMainDetail .nav-pills > li > a > img { display:none }

#course-table-sd .row.th, #course-table-mp .row.th { display: none}

#course-table-sd .order { width:30px; font-size:14px; height:26px; line-height:26px; vertical-align:middle }
#course-table-sd .course-name { width:45%; height:auto; line-height:23px; vertical-align:middle }
#course-table-sd .course-dl {width:42%; height:auto; line-height:23px; vertical-align:middle }
#course-table-sd .teacher { width:70px; font-size:14px; height:26px; line-height:26px; vertical-align:middle}
#course-table-sd .tutor { float:right; height:26px; line-height:26px; vertical-align:middle; width:55px!important; }
#course-table-sd .download { padding-left:30px; clear:left; display:inline-block; width:100px; text-align:center; height:50px; line-height:50px; vertical-align:middle  }
#course-table-sd .date { width:10%;}
#course-table-sd .date:last-child { display:none}
#course-table-sd .downloaded { padding-left:39px; font-size:14px; float:left;width:78%; height:auto; line-height:20px; vertical-align:middle;  }

#course-table-mp { background-color:#f6f6f6 }
#course-table-mp .row { padding:0}
#course-table-mp .order { width:70%; font-size:13px; line-height:13px;padding:10px 8px 0!important;margin:0!important }
#course-table-mp .course-name { clear:left; width:100%; font-weight:bold; padding:10px 8px 20px;margin:0 0 10px!important; line-height:1;  background:url(/member/image/bg_course_name.png) right center no-repeat; color:#268ad3 }
#course-table-mp .download { width:79px; float:right!important; border-left: 1px solid #DFDFDF; font-size:14px;text-align:right }
#course-table-mp .download a:before { content:"資料" }
#course-table-mp .download > a > img { display: none }
#course-table-mp .teacher { width:20%; font-size:14px; background-color:#ffe4c5; border-radius:12px; padding: 0 5px; margin-left:6px;text-align:center }
#course-table-mp .view-time:before { content:"已看時數：" }
#course-table-mp .view-time { width:50%; font-size:14px;text-align:right;float:right!important}
#course-table-mp .tutor:before { content:"輔導期限：" }
#course-table-mp .date:before { content:"收看期限：" }
#course-table-mp .tutor { width:50%; font-size:13px; line-height:1.2 }
#course-table-mp .date { width:50%; font-size:13px; padding-left:0; line-height:1.2 }
#course-table-mp .ShowChapter {top:-32px; z-index:9999; margin-bottom:-32px}

#course-table-sd .ShowChapter {
	background:url(/Member/image/bg_ShowChapter.png) bottom center no-repeat #fef0ee;
	margin:-7px 0 -3px;
}



/*order共用*/
#course-table-mp .tag { width:30%;padding:0 8px!important;margin:0!important; background-color:#fff; float:right; text-align:center }
#course-table-mp .file-name { width:50%;  font-weight:bold; padding:10px 8px 20px;margin:0 0 10px!important; line-height:1 }
#course-table-mp .chapter { width:20% }
#course-table-mp .play { width:30%; text-align:center }
#course-table-mp .play > .btn { margin-top:3px; width:100%; height:38px;line-height:38px; border-radius:19px; background-color:#2498d5; font-size:14px; color:#fff; padding:0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
#course-table-mp .play > .btn:hover {  background-color:#f15934; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);}
#course-table-mp .play > img { display: inline-block; max-width: 100%; height: auto }
#course-table-mp .play-times:before { content:"已播次數：" }
#course-table-mp .last-played:before { content:"上次播放：" }
#course-table-mp .play-times { clear:left; width:50%; font-size:14px; padding:12px 0 3px 8px; color:#ababab  }
#course-table-mp .last-played { width:50%; font-size:14px; padding:12px 0 3px 4px; color:#ababab }

#datadown { font-size:14px; padding:0 }
#datadown .row.th { display:none }
#datadown .row { padding-top:0 }
#datadown .update { width:100% }
#datadown .news { width:100%; margin-top:-10px!important }
}
@media (max-width: 480px) {
#BodyContentMainDetail .nav-pills > li > a.btn-light { font-size:15px }

#course-table-sd .tutor, #course-table-mp .tutor, #course-table-mp .date { width:100% }
#course-table-mp .file-name, #course-table-mp .chapter { height:50px; vertical-align:middle; padding-top:12px}
#course-table-mp .file-name { width:42% }
#course-table-mp .chapter {width:23%; line-height:36px}
#course-table-mp .play { width:35%; padding-right:5px }
#course-table-mp .play > .btn { line-height:1; height:50px; border-radius: 25px }
#course-table-mp .play > .btn > img { display:block; margin: 7px auto 0; padding-left: 8px}

#course-table-mp .play-times { width:100%; padding: 12px 8px 0}
#course-table-mp .last-played { width:100%; padding: 0 8px}
#course-table-mp .tutor { width:100%; font-size:13px; line-height:1.2 }
#course-table-mp .date { width:100%; font-size:13px; padding-left:8px; line-height:1.2 }
#course-table-mp .ShowChapter {top:-55px; z-index:9999; margin-bottom:-55px}

}
@media (min-width: 768px) and (max-width:991px) {
#course-table-sd .order { width:6%; font-size:14px }
#course-table-sd .course-name { width:calc(49% - 104px); }
#course-table-sd .course-dl { width:calc(49% - 104px); }
#course-table-sd .teacher { width:13% }
#course-table-sd .tutor { text-align:center; width:17%; font-size:14px }
#course-table-sd .download { text-align:center;width:15% }
#course-table-sd .downloaded { text-align:center;width:27% }
#course-table-sd .date { text-align:center;width:104px; font-size:14px }

#course-table-sd, #course-table-mp { line-height:1.2 }
#course-table-mp .order { width:12%; font-size:14px; padding-top:8px }
#course-table-mp .course-name { width:44%; padding-left:0; padding-top:8px }
#course-table-mp a > .course-name { color:#268ad3 }
#course-table-mp .download { width:17%; padding-top:8px }
#course-table-mp .teacher { width:12%; padding-top:8px }
#course-table-mp .view-time { width:15%; font-size:14px; text-align:center; padding-top:8px }
#course-table-mp .tutor:before { content:"輔導期限：" }
#course-table-mp .date:before { content:"收看期限：" }
#course-table-mp .tutor { clear:left; width:56%; font-size:14px; padding:12px 8px 3px 12%; color:#ababab }
#course-table-mp .date { width:44%; font-size:14px; padding:12px 8px 3px; color:#ababab }

#course-table-mp .ShowChapter {
	margin:-40px 0 -5px;
}


/*order共用*/
#course-table-mp .tag { width:14%; padding:3px 8px 3px 0 }
#course-table-mp .file-name { width:30% }
#course-table-mp .chapter { width:22%; font-size:14px; text-align:center }
#course-table-mp .play { width:22%; text-align:center }
#course-table-mp .play > .btn { margin-top:3px; width:100%; height:38px;line-height:38px; border-radius:19px; background-color:#2498d5; font-size:14px; color:#fff; padding:0 }
#course-table-mp .play > .btn:hover {  background-color:#f15934; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);}
/*#course-table-mp .play > .btn:hover > span::before { content:"播放 "}
#course-table-mp .play > .btn:hover > img { display:none }*/
#course-table-mp .play > img { display: inline-block; max-width: 100%; height: auto }
#course-table-mp .play-times:before { content:"已播次數：" }
#course-table-mp .last-played:before { content:"上次播放：" }
#course-table-mp .play-times { clear:left; width:56%; font-size:14px; padding:12px 8px 3px 12%; color:#ababab  }
#course-table-mp .last-played { width:44%; font-size:14px; padding:12px 8px 3px; color:#ababab }

#datadown { padding:0 0 0 10px }
#datadown .news { width:82% }
#datadown .update { width:18% }
#datadown > .row > div { font-size:14px }

#BodyContentMainDetail .nav-pills > li { width:32.5%; }


}
@media (min-width: 992px) {
#course-table-sd { margin:0 0 15px}
#course-table-sd .row {  margin:0 }
#course-table-sd .order, #course-table-sd .course-name, #course-table-sd .course-dl, #course-table-sd .download, #course-table-sd .teacher, #course-table-sd .tutor, #course-table-sd .date {
	float: left;
}
#course-table-sd .order { width:8%; font-size:14px }
#course-table-sd .course-name { width:32%;}
#course-table-sd .course-dl { width:17%; }
#course-table-sd .teacher { width:10% }
#course-table-sd .tutor { text-align:center; width:15%; font-size:14px }
#course-table-sd .download { text-align:center;width:20% }
#course-table-sd .downloaded { width:35%; font-size:14px; text-align:center }
#course-table-sd .date { text-align:center;width:15%; font-size:14px }

#course-table-mp .order { width:7%; font-size:14px }
#course-table-mp .course-name { width:33% }
#course-table-mp a > .course-name { color:#268ad3 }
#course-table-mp a:hover > .course-name { text-decoration:underline }
#course-table-mp .download { width:12% }
#course-table-mp .teacher { width:9% }
#course-table-mp .view-time { width:13%; font-size:14px; text-align:center }
#course-table-mp .tutor { width:13%; font-size:14px }
#course-table-mp .date { width:13%; font-size:14px }

/*order共用*/
#course-table-mp .tag { width:10% }
#course-table-mp .file-name { width:27% }
#course-table-mp .chapter { width:12%; font-size:14px; text-align:center }
#course-table-mp .play { width:18%; text-align:center }
#course-table-mp .play > .btn { margin-top:3px; padding:0 0 0 23px; width:113px; height:38px; line-height:38px; background:url(/Member/image/IE_btn_play.png) center no-repeat; font-size:14px; color:#fff; vertical-align:middle }
#course-table-mp .play > .btn > img { display:none }
/*#course-table-mp .play > .btn:hover {  background-color:#f15934; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);}*/
#course-table-mp .play > .btn:hover {  background:url(/Member/image/IE_btn_play_hover.png) center no-repeat}
/*#course-table-mp .play > .btn:hover > span::before { content:"播放 "}*/
#course-table-mp .play > .btn:hover > img { display:none }

#course-table-mp .play-times { width:11%; font-size:14px; text-align:center; padding-left:0 }
#course-table-mp .last-played { width:15%; font-size:14px; padding-left:0 }
#BodyContentMainDetail .nav-pills > li{ width:190px!important }
}
@media (min-width:768px) {
/*OrderFormItemCourseChapter.aspx的隨堂測紀錄*/
/*.inClassRecord {position:absolute;top:-10px; left:0;margin-left:-30px;}*/
.inClassRecord { padding:7px 5px 8px!important; }
.ShowQuiz a.QuizName { padding:7px 5px 8px 52px; width:calc(100% - 90px);}
}

#datadown { padding:0 }
#datadown .row {padding: 6px 6px 3px;}
#datadown .row.th { padding:0 6px 3px}
#datadown .row { display:flex; justify-content:space-between; align-content:center}
#datadown .row:hover{background-color: transparent!important;}
#datadown .row > div { padding-left:4px; padding-right:0;}
#datadown .row .update span{padding: 2px 6px;font-size:13px; margin-left:3px;background-color:#eee;}
#datadown .row .news { flex:1;word-wrap:break-word;}
#datadown .row .newsdate {font-size:14px; color:#2eaee6}
@media (max-width:767px) {
    #datadown .row { flex-direction:column}
    #datadown .row > div { width:100%;}
    #datadown .row .news { margin:5px 0!important}
}
@media (min-width:768px) {
    #datadown .row .update { width:18%}
    #datadown .row .newsdate { width:105px}
}

/*連線速度、看課前測速*/
.btn-test-speed { width: 215px; margin-bottom:10px; display:inline-block }
/*------------------------------------------------*/


.globaltrust { position:relative; margin:0 ; padding:0 0 15px; width:100%; border-radius:5px;float:left;}
.globaltrust .legoman { position:relative; margin:-12px 0 0 ;padding:0;width:100%; float:left;background:url(/File/image/copyright_again.png) top center no-repeat; -moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain;}
/*.globaltrust > .btn { float:left; margin:8px 5%; padding:3px 8px;color: #ffffff; background-color: #9c9c9c; font-size:13px }*/
.globaltrust .legoman .know-more { position:absolute; right:5px;}
.globaltrust .know-more:hover { margin-left:2px; margin-top:2px; }
.globaltrust-sign { float:right; background:url(/File/image/globaltrust_seal.gif) right center no-repeat; padding:24px 50px 0 0; line-height:1.3; font-size:13px; height:46px; color:#999999;margin:0 auto; width:100%; text-align:right;}
.globaltrust-sign a { color:#999999 }

.globaltrust.orderform { padding-top:15px;}

@media (max-width:767px) {
.globaltrust .legoman { width:100%; margin:10px 0 0; height:210px;}
.globaltrust .legoman .know-more { bottom:78px; }
	.globaltrust-sign { color: #7b7b7b!important}
	/*.globaltrust > .btn { width:80%; margin:0 10% 10px}*/
	.globaltrust-sign { width:80%;margin:8px 10% }
.globaltrust.orderform .legoman {height:180px;}
.globaltrust.orderform .know-more { bottom:55px;}
}
@media (min-width:768px) {
.more { margin:0 7px -6px;}
}
@media (min-width:768px) and (max-width:991px) {
/*.globaltrust { margin:0 auto; width:100% }*/
.globaltrust .legoman {height:140px;}
.globaltrust .legoman .know-more { bottom:38px; }
.globaltrust.orderform .legoman {height:180px;}
.globaltrust.orderform .know-more { bottom:55px;}
}
@media (min-width:992px) {
.more {
	margin:5px 5px 0;
	height:12px;
}
.globaltrust .legoman {height:180px;}
.globaltrust .legoman .know-more { bottom:58px; }
/*.globaltrust > .btn { width:88px;padding-left: 0; padding-right: 0 }
.globaltrust-sign { width:100%; }*/
}

/*定位用------------------------------------------------*/
.col-33, .col-20, .col-66 { 
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px
}
@media (min-width:768px) {
.col-33, .col-20, .col-66 { float: left }
/*.col-33 { width: 33.3333% }*/
.col-33 { width: 33.3333% }
.col-20 { width: 50% }
.col-66 { width: 66.6666% }
}
.pad0 {
	padding:0!important;
}
.padLR0 { padding-left:0!important;	padding-right:0!important }
.pad10 {
	padding:10px!important;
}
.pad-sm { padding:3px 8px!important }
.pad-lg { padding:15px 10px!important; font-size:18px }
.padLR10 { padding-left:10px!important;	padding-right:10px!important }
.padLR15 { padding-left:15px!important;	padding-right:15px!important }
.pad15 {
	padding:15px!important;
}
.padtop {
	padding-top:20px!important;
}
.padtop45 {
	padding-top:45px!important;
}
.margin0 {margin:0!important }
.margin10 {margin:10px!important }
.margin-sm { margin:3px 2px!important }

/*字級控制------------------------------------------------*/
.large { font-size:125% }
.small { font-size:88% }
.smaller { font-size:78% }
.bold { font-weight:bold }
.no-bold { font-weight:normal!important }
blockquote { font-size:15px!important; border-left:0; padding: 0 15px 5px 0}

/*其他配色------------------------------------------------*/
.bg-marron { background-color:#c32148; color:#fff }
.bg-pink { background-color:#e14163; color:#fff }
.bg-dark { background-color:#393939; color:#fff }
.bg-yellow { background-color:#FFD600; color:#393939 }
.bg-yellow2 {
	background-color: #FFE23E;
	color: #4B4B4B;
	font-size: 20px;
	font-weight: bold;
	padding-top: 4px;
	padding-bottom: 4px;
	display: block;
	margin-bottom: 20px;
	margin-top: 20px;
	text-align: center;
	border-radius: 10px;
}
/*.bg-red { background-color:#e23c49; color:#fff } 
.bg-red:hover { background-color:#f6f6f6!important; color:#e23c49!important }*/
.bg-red { background-color:#c00000; color:#fff } 
.bg-red:hover { background-color:#f6f6f6!important; color:#c00000!important }
.bg-carrot { background-color:#fe8929; color:#fff }
.bg-orange { background-color:#f39800; color:#fff }
.bg-orangered {background-color:#ff5500; color:#fff }
.bg-gold { background-color:#b8a759; color:#fff }
.bg-oliver { background-color:#689725; color:#fff }
.bg-oliver:hover { background-color:#f6f6f6!important; color:#689725!important }
.bg-dark:hover, .bg-carrot:hover { background-color:#f6f6f6; color:#fe8929!important }
.bg-light { background-color:#f9f8f4; color:#393939 }
.bg-white { background-color:#fff }
.bg-sky { background-color:#03aefe!important; color:#fff }
.bg-sky:hover { background-color:#f6f6f6!important; color:#03aefe!important }
.bg-navy {background-color:#185ba6; color:#fff }
.bg-graysky { background-color:#dee7ef!important; color:#424b52 }
.bg-cloud { background-color:#ebf2f7; color:#424b52 }
.bg-gray { background-color:#a5a4aa; color:#fff }
.text-white { color:#FFF }
.text-black {color:#1e1e1e}
.text-yellow { color:#ffff00!important }
.text-orange { color:#f39800 }
.text-persimmon { color:#ed4c28 }
.text-marron { color:#c32148;}
.text-carrot { color:#fe8929 }

.text-quiz{
	font-size:15px;
	color: #666666;
	font-weight: bold;
}
.text-quiz:hover,.text-quiz:focus{
	color: #666666;
	position: relative;
	bottom: 2px;
	text-decoration: underline;
}

.fillet-red { 
font-size: 13px;
margin-left:4px;
display:inline-block;
padding:0px 14px; 
border-radius:20px;
white-space: normal;
background-color: #c00000;
color:#fff;
word-wrap:break-word;
word-break:break-all;
}

.fillet-white { 
font-size: 13px;
margin-left:4px;
display:inline-block;
padding:0px 14px; 
border-radius:20px;
white-space: normal;
background-color: #fff;
color:#c00000;
word-wrap:break-word;
word-break:break-all;
}

.fillet-grey { 
font-size: 13px;
margin:5px 0 10px -5px;
display:inline-block;
padding:4px 15px; 
border-radius:20px;
white-space: normal;
background-color: #eaeaea;
color:#000;
word-wrap:break-word;
word-break:break-all;
}

.fillet-green { 
font-size: 13px;
margin-left:-5px;
display:inline-block;
padding:4px 15px; 
border-radius:20px;
white-space: normal;
background-color: #689725;
color:#fff;
word-wrap:break-word;
word-break:break-all;
}

.fillet-red-OrderForm { 
font-size: 13px;
margin-left:-5px;
display:inline-block;
padding:4px 15px; 
border-radius:20px;
white-space: normal;
background-color: #c00000;
color:#fff;
word-wrap:break-word;
word-break:break-all;
}
/*.text-grayblue {color:#00567e}*/
.text-grayblue {color:#6d7e9b }
.text-lightgrayblue {color:#1a8db9}
.text-purple { color:#b16393 }
.text-oliver { color:#689725 }
.text-lightgray { color:#ADADAD }
.text-gray {color:#a5a5a5 }
.text-navy {color:#185ba6 }
#text-navy2 {
	color:#185ba6;
	font-size: 26px;
	text-align: center;
	font-weight: bolder;
}
.text-sky { color:#2eaee6 }
.btn-link:hover,
.btn-link:focus {
  color: #109ad7!important
}

.btn-light {
	text-align:center;
	border: 1px solid #dfdfdf;
	border-top-left-radius:12px!important;
	margin-bottom:-1px
}
.btn-light:hover { color:#109ad7; background-color:#F5F8F9!important }
a.img-hover:hover { border:2px solid #ed4c28 }

@media (max-width:767px) {
.RandomCode { padding-right:0; margin-right:-10px }
.RandomCode .form-control { padding-left:7px!important; padding-right:3px!important }
}



@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  10% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  30%  {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  to {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  10% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  30% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  to {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}


/*滑動表單*/
#ecMenuLayer.top_t {
	color: #FFF;
	text-align: center;
	position:fixed;
	z-index: 10000;
	background-color: #F4F0EA/*de1e46*/;
	padding: 0;
	-webkit-box-shadow: 0 0 3px rgba(255, 255, 255, 0.4),
 0 10px 20px rgba(0, 0, 0, .1);
	-moz-box-shadow: 0 0 3px rgba(255, 255, 255, 0.4), 
 0 10px 20px rgba(0, 0, 0, .1);
	box-shadow: 0 0 3px rgba(255, 255, 255, 0.4), 
 0 10px 20px rgba(0, 0, 0, .2);
}
#ecMenuLayer.top_t a {
	font-family: "Arial", "Helvetica", "sans-serif";
	border-radius: 4px;
	display: block;
	line-height: 23px;
	color: #000;
	text-align: center;
	padding: 6px 0;
	border-top: 1px solid #FFF;
	text-decoration: none;
}
#ecMenuLayer.top_t a:hover{
	color: #000000;
	background-color: #CDE4F3;
	POSITION: relative;
	TOP: 0px;
	left: 0px;
}
#ecMenuLayer.top_t .ch {
	background-color: #2C7DB2;
	color: #FFFFFF;
}
#ecMenuLayer .dropdown-menu {
  padding: 0;
  margin: 0;
  width:100%;
  background-color: #F4F0EA;
  border-width: 0;
}
@media (max-width:767px) {
#ecMenuLayer.top_t {
	top:auto;
	bottom: 0;
	width: calc(100% - 10px);
	margin:5px
}
#ecMenuLayer.top_t .ch {
	font-size: 18px;
	width:100%
}
#ecMenuLayer.top_t a {
	font-size: 15px;
	width:100%;
	line-height: 25px;
}

}
@media (min-width:768px) and (max-width:991px) {
#ecMenuLayer.top_t {
	top: 450px;
	right: 50px;
	width: 110px;
}
#ecMenuLayer.top_t .ch{
	font-size: 16px;
}
#ecMenuLayer.top_t a {
	font-size: 15px;
}
#ecMenuLayer .dropdown-toggle { display:none }
#ecMenuLayer .dropdown-menu {
  position:relative;
  top:auto;
  left:auto;
  z-index: 1000;
  display: block;
  padding: 0;
  margin: 0;
}
}
@media (min-width:992px) {
#ecMenuLayer.top_t {
	top: 124px;
	right: 80px;
	width: 180px;
}
#ecMenuLayer.top_t .ch {
	font-size: 20px;
}
#ecMenuLayer.top_t a {
	font-size: 20px;
}
#ecMenuLayer .dropdown-toggle { display:none }
#ecMenuLayer .dropdown-menu {
  position:relative;
  top:auto;
  left:auto;
  z-index: 1000;
  display: block;
  padding: 0;
  margin: 0;
}
}
@media (min-width:992px) and (max-width:1200px) {
#ecMenuLayer.top_t {
	top: 115px;
	right: 20px;
	width: 140px;
}
#ecMenuLayer.top_t .ch{
	font-size: 18px;
}
#ecMenuLayer.top_t a {
	font-size: 16px;
}
}

/*------------ 經銷通路、門市地址共用 ------------*/
#Approach h3 { text-align:center; color:#f39800; font-weight:bold; margin:0; padding:8px 0 5px }
#Approach h3 > span { background:url(/file/image/ico_hint.png) left no-repeat; padding-left:33px }
#Approach .list-group a { color:#303030 }
#Approach .list-group > a > img { margin:-10px 3px }
#Approach .list-group  strong { color:#3e8fc6; display:inline-block; width:210px; float:left; font-size:17px }	
#Approach .list-group > a:hover { background:#f5f5f5 url(/File/image/ico_arrow_right.png) right no-repeat }
#Approach .list-group > div { padding-top:7px; margin-bottom:-6px }
#Approach .large { font-size:118% }
#Approach #BodyContentMain { padding:auto 15px 30px }
#Approach .flex-row { margin:15px 0; display:flex; justify-content: space-around;align-items: stretch;}
#Approach .flex-row .add-block { width:32.5%; padding: 10px 15px; border: 1px solid #d8dde6;border-radius:12px;}
#Approach .flex-row .add-block strong { display:block; border-bottom:3px solid #109ad7;}
#Approach .flex-row .add-block a { color:#109ad7; display:block;margin:8px 0}
.add-block i { color:#fe8929; width:26px; }
.fa-line,.fa-map-marker-alt {font-size:19px;}
#Approach .flex-row .add-block span{ padding-left:26px; display:block;}
#Approach .flex-row .add-block dl {margin:-8px 0 15px}
#Approach .flex-row .add-block dt a{ background-image:linear-gradient(#109ad7 0%,#28ae95 100%); color:#fff; padding:3px 16px}
#Approach .flex-row .add-block dd { padding:0 16px}

@media (max-width:767px) {
#Approach .list-group { padding-left:10px; padding-right:10px }
#Approach .list-group  strong { display:block; width:100% }
#Approach .slash { display:none }
#Approach .list-group span  { display:block; padding-left:24px}
#Approach .padL30 { padding-left:0!important }

/*寄發進度下的【課程洽詢】，將客服信箱和服務專線上移
#Approach .list-group-item .col-33, #Approach .list-group-item .col-66 { width:100%; text-align:left }
#Approach .list-group-item .col-66 .fax { display:inline-block; width:100%; padding-left:98px }*/
#Approach .list-group-item .fax { display:inline-block; width:100%; padding-left:86px }

#Approach.row, #Approach.row .col-xs-16 { margin:0 0;}
Approach.row .col-xs-16 { padding:0;}
#Approach .flex-row {flex-direction:column; margin: 10px 0;}
#Approach .flex-row .add-block { width:calc(100% - 30px); margin:5px auto}
}
@media (min-width:768px) {
#Approach .list-group span { display:inline }
#Approach div.list-group-item > a { display:inline-block }
#Approach .list-group-item.row { margin-left:0; margin-right:0 }
/*#Approach .list-group-item .col-33 { width:40%; text-align:center; float:left; padding-left:0; padding-right:0 }
#Approach .list-group-item .col-66 { width:60%; text-align:center; float:left; padding-left:0; padding-right:0 }*/
}
@media (min-width:768px) and (max-width:991px) {
#Approach #BodyContentMain { padding-left:60px; padding-right:75px }
#Approach .list-group  strong { width:195px }	
#Approach div.list-group-item > a {width:155px }
#Approach .list-group span { padding-left:17px }
#Approach .list-group .line, #Approach .list-group .time { display:inline-block; padding-left: 233px }
}
@media (min-width:992px) {
#Approach #BodyContentMain { padding-left:60px; padding-right:75px }
#Approach div.list-group-item > a {width:190px }
#Approach .list-group span { padding-left:10px }
#Approach .list-group .time { display:inline-block; padding-left: 250px }
}

/*---------------寄發進度 #Schedule--------------*/
#Schedule #BodyMenu li { list-style:none; border:1px solid #dfdfdf; border-right:7px solid #109ad7; margin-bottom:-1px; padding:5px 8px;background-color:#fff;  }
#Schedule #BodyMenu li a { color:#9c8c54 }
#Schedule #BodyMenu li:hover, #Schedule #BodyMenu li.active { font-weight:bold; background-color:#fe8929; color:#fff; border-left:0px solid #fe8929; border-right:7px solid #fe8929; margin-left:-7px }
#Schedule #BodyMenu li:hover a { color:#fff }
#Schedule .pad10 { padding-top:25px!important }
#Schedule .table { border-width:0; border-bottom:1px solid #d8dde6 }
#Schedule .table th { background-color:#6699CC; color:#fff; font-weight:bold; font-size:16px; word-break: keep-all }
#Schedule .update { font-size:13px; color:#666666;white-space: nowrap }
#Schedule td.type { background-color:#e4edf7; color:#808080; font-size:13px; vertical-align:middle; padding-right:0; border-left:0px solid #fff!important; border-right:0px solid #fff!important}
#Schedule .table a { color:#424242 }
#Schedule tr td.sTypeName { background-color:#fff; font-size:15px; padding:25px 0 0;  }
#Schedule td.sTypeName > span { color:#6699CC; padding:0; font-weight:bold; }
#Schedule .nextLevel { font-size:18px }
#Schedule .nextLevel a:last-child { color:#424b52!important }
#Schedule .btn-group { padding:0 0 6px; background:url(/Schedule/image/bg_level.png) center repeat-x; width:100%; height:40px; }
#Schedule .btn-group > .btn { color:#fe8929; font-weight:bold; font-size:16.5px; border-right:1px solid #d8dde6; border-radius:0; padding:7px 7.8px;}

#Schedule #Right-menu-pull { float:right; width:45px; position:fixed; z-index:99999; right:0; bottom:60px; margin-right:-15px;}
#Schedule #Right-menu-pull > button { padding:5px 18px 10px 7px; background-color:#fe8929; border:0px solid #e4f2f8; border-top-left-radius:8px;border-bottom-left-radius:8px; font-size:13px; line-height:15px; color:#fff; 	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.35);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.35);}

#Schedule #sD { font-size:13px; line-height:4; text-align: right }
#Schedule .print { cursor: pointer; }
@media (max-width:991px) {
#Schedule .table th { font-size:14px; }
#Schedule .btn-group { background-repeat:repeat; background-position:top; height:auto; }
#Schedule .btn-group > .btn { font-size:15.5px; width:100%; border-radius:5px!important; height:40px;}
}

@media (min-width:992px) {
#Schedule .update { width:120px }
#Schedule td.type { width:145px}

}
@media print { /*bootstrap預設會將超連結網址印出;加以下樣式可不印*/
 #Schedule { font-size:inherit }
}

/*.teacher0 {font-size:13px;}*/
/*聖誕專區-----------*/
@media (max-width:767px) { /*snowman在#login內*/
.snowman {display:inline-block; text-align:center; width:100%; margin-bottom:-35px;}
.snowman img {display:inline-block; max-width:100%; height:auto;}
.nav-tabs img{
	width: 30px;
	height: 26px;
}
}
@media (min-width:768px) {/*snowman在#login外*/
.snowman { padding-top:15px;margin-bottom:-20px; margin-left:-20px;display:inline-block;}
}
/*聖誕專區:End-----------*/



/*IP*/
.ip {
	font-size: 9px;
}


/*消息氣泡開始------------------------------------------*/
.nav-link {
	position: relative;
	line-height: 30px;
	font-size: 15px;
	font-weight: bold;
	color: #dd4814;
	text-decoration: none;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 4px;	
}

.nav-link:hover, .nav-link:focus {
	color: #dd4814;
	text-decoration: none!important;
}

/* animation */
/* 文字閃爍 定义keyframe动画，命名为blink */
.blink{
    color: #ffff00;
    animation: blink 4s linear infinite;  
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink 4s linear infinite;
    -moz-animation: blink 4s linear infinite;
    -ms-animation: blink 4s linear infinite;
    -o-animation: blink 4s linear infinite;
}
.blink:hover {	
text-decoration: none!important;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    3% {
        opacity: 0.1;
    }
    6% {
        opacity: 1;
    }
    10% {
        opacity: 1.1;
    }
    15% {
        opacity: 1;
    }
	100% {
        opacity: 1;
    }
}

.fadein{
    animation: fadein 3s linear infinite alternate;  
}

@keyframes fadein {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
}

.counter {
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 10px;
	margin: 0 3px;
	font-weight: normal;
	color: white;
	text-align: center;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	background: #e23442;
	background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
	background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
	background-image: -o-linear-gradient(top, #e8616c, #dd202f);
	background-image: linear-gradient(to bottom, #e8616c, #dd202f);
	-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
	padding: 1px 0 0 1px;
	display:inline-block;
/*	animation: blink 8s ease infinite; */	
}
.nav-counter {
	position: absolute;
	top: -1px;
	right: 22px;
	min-width: 8px;
	height: 20px;
	line-height: 20px;
	margin-top: -14px;
	font-weight: normal;
	color: white;
	text-align: center;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	background: #e23442;
	/*  border: 1px solid #911f28;*/
	border-radius: 11px;
	background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
	background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
	background-image: -o-linear-gradient(top, #e8616c, #dd202f);
	background-image: linear-gradient(to bottom, #e8616c, #dd202f);
	-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
	padding: 0 6px;
}

.nav-counter-green {
  background: #75a940;
  border: 1px solid #42582b;
  background-image: -webkit-linear-gradient(top, #8ec15b, #689739);
  background-image: -moz-linear-gradient(top, #8ec15b, #689739);
  background-image: -o-linear-gradient(top, #8ec15b, #689739);
  background-image: linear-gradient(to bottom, #8ec15b, #689739);
}

.nav-counter-blue {
  background: #3b8de2;
/*  border: 1px solid #215a96;*/
  background-image: -webkit-linear-gradient(top, #67a7e9, #2580df);
  background-image: -moz-linear-gradient(top, #67a7e9, #2580df);
  background-image: -o-linear-gradient(top, #67a7e9, #2580df);
  background-image: linear-gradient(to bottom, #67a7e9, #2580df);
}


.nav-img{
	width: 24px;
	height: 24px;
	vertical-align: -20%!important;
}
/*---------------點擊下拉選單開始---------------*/
/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown-NEWS {
	margin-top: 3px;
/*    display: inline-block;*/
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	z-index: 999;
	right: 0px;
	display: none;
	position: absolute;
	background-color: #fffadf;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-top-width: 1px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ffd400;
	border-right-color: #ffd400;
	border-bottom-color: #ffd400;
	border-left-color: #ffd400;
	padding-bottom: 0px;
}
@media (max-width:767px) {
    .dropdown-content {
      min-width: 90%;
      left:5%;
	  right: 10px;
    }
}
@media (max-width:320px) {
    .dropdown-content {
      min-width: 90%;
      left:0;
      right:10px;
    }
}

.dropdown-product{
	font-size: 14px;
	color: #333333;
	font-weight: normal;
}

.dropdown-date{
	font-size: 10px;
	color: #797979;
	font-weight: normal;
}
/* Links inside the dropdown */
.dropdown-content a {
	text-decoration: none!important;
	color:#424b52;
	display: block;
	font-size: 15px;
}

.dropdown-content li {
	text-align: left;
	list-style-type: none;/*	list-style-image: url(/File/image/ico_path_arrow.gif);*/
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ffd400;
	background-color: #fff9d8;
	line-height: 120%;

	text-decoration: none!important;
	color: #73511f;
	display: block;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 28px;

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #fff5c0;
  	color: #ff9c00;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.IP {
	font-size: 12px;
	padding: 0px;
}



/**/
.css_button {
	text-decoration: none!important;
	border: 1px solid #bbbbbb;
	background-color: #ffd400;
	color: #101010;
	font-size: 14px;
	font-family: '微軟正黑體';
	font-weight: bold;
	-webkit-transition: 0s;
	-moz-transition: 0s;
	-o-transition: 0s;
	cursor: pointer;
	padding-top: 8px;
	padding-right: 25px;
	padding-bottom: 8px;
	padding-left: 25px;
   }
.css_button.a {
	text-decoration: none!important;
 }
.css_button:hover {
	background: none;
	background-color: #ffe76e;
	/*   box-shadow: 0px 0px 5px 0px #AAAAAA;*/
/*   -webkit-box-shadow: 0px 0px 5px 0px #AAAAAA;*/
/*   -moz-box-shadow: 0px 0px 5px 0px #AAAAAA;*/
   }
.css_button:visited {

   }   
/*.css_button:hover {
   background: none;
   background-color: #FFA200;
   box-shadow: 0px 0px 5px 0px #AAAAAA;
   -webkit-box-shadow: 0px 0px 5px 0px #AAAAAA;
   -moz-box-shadow: 0px 0px 5px 0px #AAAAAA;
   border: 1px solid #ffffff;
   color: #FF0000;
   }*/
/*.css_button:active {
   top: 1px;
   position: relative;
   }
   */


#AlertRight{
	clear:both;  /* 左右兩邊不可以有任何東西 */
	float: right;
	margin-bottom: 5px;
	}
	
.h2{
	clear:both;  /* 左右兩邊不可以有任何東西 */
	}	
	
a.NewNotice {
  font-weight: bolder;
  color:#101010;
}
.NewNotice:before {
	content:"●";
    color:#e51c23;
    font-size:22px;
    padding-right:6px;
    margin-left:-18px;
}
.NewNotice:hover {
	color: #e51c23;
}

.text-red {
	color: #F00;
}

/**/
#Menu-R .activity {background-color:#fffcdc/*#51bec1*/; color:#3a302c; padding: 6px 14px 8px; margin-bottom:10px;font-size:15px}
#Menu-R .activity b {color:#51bec1/*#f7e600*/; font-size:18px;}
#Menu-R .activity a { text-decoration:underline; color:#26405a/*#fff*/; }
#Menu-R .activity a:hover { color:#51bec1/*#26405a*/; }
#Menu-R .actives { border-radius:50%; width:17px; height:17px; background-color:#e0ac61; color:#ffffff!important; display:inline-block;font-size:15px!important; text-align:center; line-height:17px;}
#Menu-R .country {color:#8e827d/*#f7e600*/;font-weight:bold;}

#bandwidth2 {
	font-size: 17px;
	font-weight: bold;
	color: #6699CC;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-right: 25px;
	margin-left: 25px;
}

.parentheses ,.parentheses ol {list-style-type: none; padding-left:16px;}
.parentheses li {list-style: none;}
.parentheses  li:before {content: "(" counter(section, decimal) ") ";}
.parentheses  li { counter-increment: section;}

.parenthesesA ol {list-style-type: none;}
.parenthesesA li {list-style: none;}
.parenthesesA  li:before {content: "(" counter(section, lower-alpha) ") ";}
.parenthesesA  li { counter-increment: section;}

.upgrade { font-size:36px; font-weight:bolder;  clear:both; line-height:25px;padding-left:12px;color:#626262;margin:20px}
.upgrade2 { font-size:28px; font-weight:bolder;  clear:both; line-height:25px;padding-left:12px;color:#626262;margin-bottom:20px}



.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: #5e5e5e;
    padding: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    margin: 2px 0;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.2s;
    cursor: pointer;
}

.button2 {
line-height:14px;
    color: white;
    background-color: #bcbbbb; 
/*    color: black; */
    border: 1px solid #eae8e8;
}

.button2:hover {
    background-color: #eae8e8;
    color: #757575;
}


.button1 {
line-height:14px;
    color: white;
    background-color: #ed4c28; 
/*    color: black; */
    border: 1px solid #ffc1b3;
}

.button1:hover {
    background-color: #ffc1b3;
    color: #440c00;
}

/*圖片垂直翻轉*/
.vertical-turn{
   -moz-transform:scaleY(-1);
   -webkit-transform:scaleY(-1);
   -o-transform:scaleY(-1);
   transform:scaleY(-1);
   /*兼容IE*/
   filter:FlipV;
}

/*圖片刷淡*/
.transparent {opacity:0.5;
filter:alpha(opacity=50); /*  IE8 及更早的版本 */  
}

/*ASK編輯器*/
.ql-size-small{
font-size: 0.75em;
}
.ql-size-large {
font-size: 1.5em;
  }
.ql-size-huge{
font-size: 2.5em;
}
.tab_container strong{
font-size: 1.2em;
    font-weight: bold;
}