@media only screen and (max-width: 320px) {
	/*
	header  #title{font-size: 1.6em; }
	.general #container, .download #container { font-size: 1.45em; }
	.general #btnmenu{ font-size: 1.3em; }
	*/
	header  #title{font-size: 1.4em; }
	.general #container, .download #container { width: 86%; }
	.general .imgframe { float: left; }
	.inside #container #main, .inside #mv video, .inside #player { width: 90%; }
	.player .playgroup{ left: 120px; }
	/*.player #ply_stop { left: 170px; }*/
	/*.player #ply_size{ display: none; }*/
	.player #ply_vol{ display:none; }
	.player #ply_stop{ display:none; }
	.general .btntitle { min-width: 50px; font-size: 1em; }
	.general .btntitle .btntxt:after { content: '老師 \A 教講'; white-space: pre;  }
}
@media screen and (min-width: 321px) and (max-width: 479px) {
	/*
	header  #title{font-size: 1.8em; }
	.general #container, .download #container  { font-size: 1.35em; }
	.general #btnmenu{ font-size: 1.25em; }
	*/
	header  #title{font-size: 1.6em; }
	.general #container, .download #container { width: 80%; }
	.general .imgframe { float: left; }
	.inside #container #main, .inside #mv video, .inside #player{ width: 90%; }
	.player .playgroup{ left: 120px; }
	.player #ply_stop { left: 170px; }
	/*.player #ply_size{ display: none; }*/
	.player #ply_vol{ display:none; }
	.player #ply_stop{ display:block; }
	.general .btntitle { min-width: 50px; font-size: 1em; }
	.general .btntitle .btntxt:after { content: '老師 \A 教講'; white-space: pre; }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
	/*
	header  #title{font-size: 1.8em; }
	.general #container, .download #container  { font-size: 1.35em; }
	.general #btnmenu{ font-size: 1.25em; }
	*/
	header  #title{font-size: 1.8em; }
	.general #container, .download #container { width: 70%; }
	.general .imgframe { float: left; }
	.inside #container #main, .inside #mv video, .inside #player{ width: 80%; }
	.player .playgroup{ left: 140px; }
	.player #ply_stop { left: 200px; }
	/*.player #ply_size{ display: none; }*/
	.player #ply_vol{ display:none; }
	.player #ply_stop{ display:block; }
	.general .btntitle { min-width: 90px; font-size: 1.2em; }
	.general .btntitle .btntxt:after { content: '老師教講'; white-space: nowrap; }
}
@media only screen and (min-width: 768px) {
	/*
	header  #title{font-size: 1.9em; }
	.general #container, .download #container  { font-size: 1.25em; }
	.general #btnmenu{ font-size: 1.2em; }
	*/
	header  #title{font-size: 2em; }
	.general #container, .download #container { width: 70%; }
	.general .sp{ text-align: center; }
	.inside #container #main, .inside #mv video, .inside #player{ width: 70%; }
	.player .playgroup{ left: 140px; }
	.player #ply_stop { left: 200px; }
	/*.player #ply_size{ display: block; }*/
	.player #ply_vol{ display:block; }
	.player #ply_stop{ display:block; }
	.general .btntitle { min-width: 90px; font-size: 1.2em; }
	.general .btntitle .btntxt:after { content: '老師教講'; white-space: nowrap; }
} 
.errorpage{ color: #fff; line-height: 4em; text-align: center; font-size: 1.5em; margin: 1em; display:flex; justify-content:center; align-items:center; border-style:solid; border-width: 2px; border-color: #669ef1; background-color: #1b66ec; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
footer, .player #player { -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; }
.general,.download{ -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; }

.is-start {opacity: 1;}
.is-hide {opacity: 0; /*visibility: hidden;*/ }
.is-show {opacity: 1; /*visibility: visible;*/ }
ul, ol, li { list-style:none; }
img { -ms-interpolation-mode: bicubic; }
ul, ol, li, span, body{padding:0; margin: 0;}
body{ font-family: Arial, "微軟正黑體", "sans-serif"; -webkit-tap-highlight-color: rgba(0,0,0,0); }
header { float:left; width:100%; height: 150px; text-align:center; background-position: left top; }
footer { width: 100%; clear: both; position: fixed; bottom: 0px; margin-top: 80px; }
header #title{ height: 150px; color: #fff; margin: 0 2.3em; display:flex; justify-content:center; align-items:center; }
.banner_1{ height: 150px; background: url('../images/banner_1.png'); background-repeat: no-repeat; background-size: cover; }
.banner_2{ height: 90px; background: url('../images/banner_2.png'); background-repeat: no-repeat; background-size: cover; }
._button {
  width: 55px;
  height: 55px;
  border-style:solid;
  border-width: 5px;
  -webkit-border-radius:55px;
  -moz-border-radius:55px;
  border-radius:55px;
  font-size: 1.3em;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 55px;
  transition: .1s; 
}
._dlbutton {
  padding: 0.1em 0.4em;
  min-width: 50px;
  border-style:solid;
  border-width: 4px;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  color: rgb(255, 255, 255);
  text-align: center;
  /*font-size:0.9em;*/
  transition: .1s; 
}
.no-touch ._button:hover, .no-touch ._dlbutton:hover {
  background-color: rgb(255, 156, 0);
  border-color: rgb(255, 215, 153);
}
.b1 {
  border-color: #99bff7;
  background-color: #1b66ec;
}

.b2 {
  border-color: #aab7f2;
  background-color: #2a4cdf;
}

.b3 {
  border-color: #bcb3e6;
  background-color: #5841c1;
}


.b4 {
  border-color: #cdb3ea;
  background-color: #8242ca;
}
.b5 {
  border-color: #eab5e8;
  background-color: #be36b9;
}
#logo{ width: 100%; /*min-width: 320px;*/ height: 40px; background: url('../images/logo.png') #e7e7e7;  background: url('../images/logo.png') #e7e7e7;
  background-repeat: no-repeat;
  background-size: auto auto;
  background-position: center center; }
.space { float: left; height: 120px; width: 100%; display:flex; justify-content:center; align-items:center; margin-bottom: 2em; }
.space span{ display: none; cursor: pointer; text-align: center; text-decoration: underline; }
.space span:after{ content:'回到頂端'; }
.bottombg {
  width: 100%;
  /*min-width: 320px;*/
  height: 20px;
  margin: 0 auto;
  background-image: -webkit-linear-gradient(0deg, #4eaddd 0%, #005eea 32.61904761904762%, #714897 100%);
  background-image:    -moz-linear-gradient(0deg, #4eaddd 0%, #005eea 32.61904761904762%, #714897 100%);
  background-image:      -o-linear-gradient(0deg, #4eaddd 0%, #005eea 32.61904761904762%, #714897 100%);
  background-image:     -ms-linear-gradient(0deg, #4eaddd 0%, #005eea 32.61904761904762%, #714897 100%);
  background-image:         linear-gradient(450deg, #4eaddd 0%, #005eea 32.61904761904762%, #714897 100%);
}
.pointer {
	cursor: pointer;
}
.css_table{ display: table; margin-top: 0.7em; }
.css_table > span{ display: table-cell; vertical-align: middle;  }
.general,.download{ overflow: hidden; }
.general #container, .download #container { margin: 0 auto; line-height: 1.6em; font-size: 1.2em; }
.general .mvframe{ position: absolute; width: 100%; height: calc(100% - 115px); top: 95px; left: 0px;  }
/*general*/
/*.general .row{ float: left; width: 100%; }*/
.general .map{ margin-top: 2em; }
.general .map img{ max-width:100%; height:auto; }
.general .highlight, .general .tip{ margin-bottom: 1em; color: #f5651f; font-size: 1.1em; background-color: #e7e7e7; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
.general .tip{ padding: 0.5em; }
.floatleft{ float: left; }
.general .highlight{ display: inline-block; padding: 0.5em; line-height: 1.6em; }
.general .txt01{ color: #8B0000; }
.general .title_1{ color: #1b66ec; width:100%; border-bottom:1px solid; border-bottom-color:#669ef1; font-size: 1.2em; padding-bottom: 0.3em; }
.general .title_2{ font-size: 1.1em; }
.general .title_3{ font-size: 1em; }
.general .icon01, .general .icon02, .general .icon03, .general .icon04, .general .icontime,.general .icon_o, .general .icon_r { /*vertical-align: middle;*/ margin-right: 0.5em; margin-bottom: 0.1em; }
.general .icon01 span{ content: ''; display: inline-block; background-color: #1b66ec; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; width:0.68em; height:0.7em;  }
.general .icon01 span:after { position: absolute; margin-top: 0.12em; margin-left: 0.05em; content: ''; background-color: #fff; width:0.32em; height:0.45em; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.general .icon01{ vertical-align: top; width:1.2em; }
.general .icon02{ display: inline-block; background-color: #ff9c00; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; width:0.8em; height:0.8em; }
.general .icon03{ display: inline-block; background-color: #EC6A00; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; width:0.54em; height:0.54em; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.general .icon04{ display: inline-block; background-color: #F46521; -webkit-border-radius:0.6em; -moz-border-radius:0.6em; border-radius:0.6em; width:0.6em; height:0.6em; }
.general .icontime{ display: inline-block; margin-bottom: 5px; width:40px; height: 40px; background: url('../images/icon_time.png'); background-repeat: no-repeat; }
.general .hamburger { display: inline-block;width:22px; height: 18px; background: url('../images/hamburger.png'); background-repeat: no-repeat; }

/*.general .indentspace { padding-left: 0.3em; }*/
.general .indent00 { margin-left: 0; }
.general .indent01 { margin-left: 1.8em; }
.general .indent02 { margin-left: 3.1em; }
.general .indent03 { margin-left: 4.1em; }
.general .indent04 { margin-left: 1.15em; }
.general .indent05 { margin-left: 3.1em; }
.general .i01 { margin-left: 0.8em; }
.general .introend  { margin-top: 1em; font-size: 1.1em; }
.general .introend .css_table { margin: auto; }
.general .titlespace { margin-bottom: 1em; }
.general .graybg { float: left; width: 100%; word-break: break-all; padding: 0.3em 1em; margin-bottom: -1px; background-color: #DEDEDE; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
.general #btnmenu { float: left; clear: both; margin: 1.2em 0; width: 100%;   display:flex; align-items:center; }
.general #btnmenu li{ display: inline-block; margin-left:17px; margin-bottom:10px; cursor: pointer; }
.general .btntitle { font-weight: bold; padding: 0.5em 1em 0.5em 0.5em; -webkit-transition: min-width .5s,font-size .5s; -moz-transition: min-width .5s,font-size .5s; -o-transition: min-width .5s,font-size .5s; transition: min-width .5s,font-size .5s; color:#2971dd; background-color:#bfd2ff; display:flex; justify-content:center; align-items:center; -webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topright: 50px;
-moz-border-radius-bottomright: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;}
/*.general .btntitle .btntxt:after { content: '老師教講';white-space: pre;  }*/
.arrow-right { border-right: 1px solid; border-bottom: 1px solid; width: 10px; height: 10px; transform: rotate(-45deg); }
.arrow-top { border-right: 5px solid; border-bottom: 5px solid; width: 10px; height: 10px;  transform: rotate(225deg); }
.general .imgframe {
  display: table;
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 5px;
  background-image: -webkit-linear-gradient(90deg, #2b72f0 45.95238095238095%, rgb(255, 255, 255) 45.95238095238095%, rgb(255, 255, 255) 53.095238095238095%, #8cbdff 53.333333333333336%);
  background-image:    -moz-linear-gradient(90deg, #2b72f0 45.95238095238095%, rgb(255, 255, 255) 45.95238095238095%, rgb(255, 255, 255) 53.095238095238095%, #8cbdff 53.333333333333336%);
  background-image:      -o-linear-gradient(90deg, #2b72f0 45.95238095238095%, rgb(255, 255, 255) 45.95238095238095%, rgb(255, 255, 255) 53.095238095238095%, #8cbdff 53.333333333333336%);
  background-image:     -ms-linear-gradient(90deg, #2b72f0 45.95238095238095%, rgb(255, 255, 255) 45.95238095238095%, rgb(255, 255, 255) 53.095238095238095%, #8cbdff 53.333333333333336%);
  background-image:         linear-gradient(360deg, #2b72f0 45.95238095238095%, rgb(255, 255, 255) 45.95238095238095%, rgb(255, 255, 255) 53.095238095238095%, #8cbdff 53.333333333333336%);
}
.general .imggroup {
	float: left;
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
}
.general .generalimg {
	float: left;
	position: relative;
	width: 100%;
}
.general .generalimg  .lazy{ 
  position: relative;
  float: left;
  z-index: 0;
  width: 100%;
  height: auto;
  overflow: hidden; 
  }

.general .zoombtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  /*
  border-radius: 3px;
  background: url('../images/icon_zoom.png') rgba(222, 222, 222, 0);
  background-repeat: no-repeat;
  background-size: autoz auto;
  background-position: center center;
  font-family: Helvetica;
  font-size: 0.8em;
  font-weight: 400;
  color: rgb(0, 0, 0);
  */
}
.general .zoombtn img{
	width: 12%;
	max-width: 58px;
	vertical-align: bottom;
}
.general .icon_o{ background-color: #FF6633; }
.general .icon_r{ background-color: #FF0000; }
.general .icon_o, .general .icon_r { display: inline-block; color: #fff; font-size: 0.7em; font-weight:bold; vertical-align: text-top; text-align: center; -webkit-border-radius:1.5em; -moz-border-radius:1.5em; border-radius:1.5em; width:1.5em; height:1.5em; line-height:1.5em; }
.general .sp{ /*width: 100%;*/ color: #a02c98; }

/*download*/
.download #dlmenu { width: 100%; }
.download #dlmenu .dllist{ border-bottom:1px solid; border-bottom-color:#669ef1; padding: 0.6em 0; }
.download #dlmenu nav{ margin-left: 6.6em; }
.download #dlmenu li { display: inline-block; vertical-align: bottom; vertical-align: middle; padding: 0.4em; }
.download #dlmenu .dltitle { float:left; display: inline-table; margin-top: 0.5em; color: rgb(27, 102, 236); font-size: 1.15em; padding: 0.2em 2em 0.2em 0.5em; border-radius: 7px; background: url('../images/icon_download.png'); background-repeat: no-repeat; background-size: auto auto; background-position: 4em 0.4em; }
.download #dlmenu .dlbtn { cursor: pointer; }
.download #info { float:left; margin: 1em 0; }
/*player*/
.player span{ cursor: pointer; }
.no-touch #ply_btn span:hover  { color: #1D9D74; }
.player #ply_btn span { color: #EA6C06; font-size: 1.1em; }

.player #controlbtn span { color: #EBEAE4;}
.no-touch #controlbtn span:hover { color: #EA6C06; }
/*內容*/
.player #container{ position: absolute; width:100%; height:100%; overflow: hidden; }
.player #container #main{ /*max-width: 1024px;*/ height:100%; background-color: #000; margin: 0 auto; }
/*影片*/
.player #mv{ position: absolute; width:100%; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; display: flex; }
.standard #mv  video{ width:100%; }
.player #mv video{ height:100%; margin: auto; }
.player #bigplay { position: absolute; top: 0; width:100%; height: calc(100% - 64px); text-align: center; }
.player #bigplay span{ font-size:54px; width:50px; height:50px; color:#ebeae4; padding:25px; margin: auto; background:rgba(0,0,0,0.5); border:7px solid #fff; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
/*撥放器*/
.standard #player{ width:100%; }
.player #player{position: fixed; bottom: 0; height:64px; overflow: hidden; background: rgba(0, 0, 0, 0.3); text-shadow: 0 0 2px rgba(0,0,0,.5); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000); }
.player .playerinner{ margin-top:14px; }
.player #playerbar{ position:relative; left: 30px; top: 0px; }
.player #timelabel { position: absolute; top: -20px; left: 0px; font-size: 12px; color:#FFF; }
.player #ply_bar { position: absolute; height: 5px; top: 6px; background-color: rgba(255,255,255,.5); }
.player #ply_showtime { float: left; font-size: 1.1em; color: #EBEAE4; }
.player #player #controlbtn{ position:relative; left: 30px; top: 22px; }
.player .playgroup{ position: absolute; top: 0px; font-size: 1.3em; }
.player #ply_pause { position: absolute; }
.player #ply_playg { position: absolute; z-index:99; }
.player #ply_play { position: absolute; }
.player #ply_stop { position: absolute; top: 0px; font-size: 1.3em;  }
.player #ply_screen{ float:right; margin-right: 80px; text-align: left; color:#FFF; }
.player #ply_size { position: absolute; font-size: 1.4em;  }
.player #ply_fit{ position: absolute; font-size: 1.3em; display: none; }
.player #ply_vol{ position: absolute; left: 264px; top: -4px; /*padding:10px;*/  width:120px;height:24px; font-size: 1.6em; }
.player #vol_take { width:5px; height:18px; background-color: #ebeae4; box-shadow: 0 0 2px rgba(0,0,0,.5); }
.player #vol_bar { position: absolute; height: 5px; width: 60px; left: 2px; top: 1px; background-color: rgba(255,255,255,.5); }
.player #volcontrol{ position: absolute; left: 50px; top: 10px; }
.player .ply_bar_color { background-color: #EA6C06; }