html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	text-decoration: none;
}
* {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
a {
	color: #395376;
	text-decoration: none;
	transition:all 0.2s;
	cursor:pointer;
}
a:hover,
a:focus {
	color: #2675fc;
  text-decoration: none;
}
.float_left{ float:left;}
.float_right{ float:right;}

html {
  scroll-behavior: smooth;
}
.browser_top{
	display: block;
	background-color: rgba(255,153,0,1);
	width: 100%;
	height: 103px;
	background-image: url(../images/top_bar.jpg);
}
body {
	-webkit-text-size-adjust: none;
	position: relative;
	background-color: #194F90;
	background-image: url(../images/bg.png?a=1);
	background-repeat: repeat-x;
	background-position: center top;
	font-family: "cssFontOpenSansHKRegular";
}

/* login start */
body.login {
	margin: 0px;
	padding: 0px;
	z-index: -20;
	color: #666;
	background-color: #194F90;
}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}
/* login end */
body.teach {
	margin: 0px;
	padding: 0px;
	color: #111111;
	background-color: #194F90;
}

/* Font size */
h1,.h1 {
	font-size: 48px;
}
h2,.h2 {
	font-size: 24px;
}
h3,.h3 {
	font-size: 18px;
}
h3a,.h3a {
	font-size: 20px;
}
h4a,.h4a {
	font-size: 16px;
}
h4,.h4 {
	font-size: 14px;
}
h5,.h5 {
	font-size: 12px;
}
h6,.h6 {
	font-size: 10px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0px;
    margin-bottom: 0px;
}
.bold {
	font-weight: 900;
}
.normal{
	font-weight:normal;
}
.light{
	font-weight: lighter;
}

.txt_c_01{color: #3b5375;}
.txt_c_02{color: #626262;}

.txt_c_03{color: #FF6B13;}
.txt_c_04{color: #13C1DF;}




/* input */
/* 20220406 start */
input {
    border: 1px solid #dfdfdf;
    box-sizing: border-box;
    border-radius: 5px;
	color:rgba(0,0,0,1);
	font-size:18px;
	font-family: "Microsoft JhengHei";
	display:inline-block;
	text-align:center;
	padding: 2px 20px;
}
.input_txt {
    border: 1px solid #dfdfdf;
    box-sizing: border-box;
    border-radius: 5px;
    color: rgba(0,0,0,1);
    font-size: 18px;
    font-family: "Microsoft JhengHei";
    display: inline-block;
    text-align: left;
    padding: 2px 20px;
}
.cal_input{ width:150px;}

.input-group {
    width: 175px;
	float:left;
}


/* 20220406 end */
/* input */

/* select */
select{
	border: 1px solid #dfdfdf;
    box-sizing: border-box;
    border-radius: 5px;
	color:rgba(0,0,0,1);
	font-size:18px;
	font-family: "Microsoft JhengHei";
	display:inline-block;
	text-align:center;
	padding: 2px 5px;
}
option{
	text-align:left;
}
input[type=radio], input[type=checkbox] {
    position: relative;
    transform: scale(1.5,1.5);
    margin: 0em 0.5em 0em 0.2em;
}
/* select */
.weekly_menu_pulldown select{
	border: 1px solid #dfdfdf;
    box-sizing: border-box;
    outline-color: #1abc9c;
    border-radius: 3px;
	width:100%;
	color:rgba(0,0,0,1);
	font-size:18px;
	font-family: "Microsoft JhengHei";
	display:inline-block;
	padding-left:5px;
}


/*top_menu start*/
.top_menu{
	display: inline-block;
    padding-left: 40px;
    position: relative;
    margin-bottom: 15px;
	height:55px;
	z-index:10;
	margin-top:8px;
}

.stud .top_menu{
	display: inline-block;
    padding-left: 180px;
    position: relative;
    margin-bottom: 0px;
	height:70px;
	margin-top:10px;
	z-index:10;
}


.top_menu_bg{position: relative;}
.bg_area{
	width: 100%;
	height: 30px;
	display: inline-block;
	position: absolute;
	left: 0px;
	top:50px;
	z-index:-10;
	border-radius: 50px 0px 0px 0px;
}

/* 20220504 start */
.bg_area.stud{
	background-color: inherit;
	width: 100%;
	height: 120px;
	display: inline-block;
	position: absolute;
	left: 0px;
	top: 10px;
	z-index: -10;
	border-radius: 0px 0px 0px 0px;
}
.stud_bg_area{
	background-image: url(../images/stud_top.png);
	background-repeat: no-repeat;
	background-position: left top;
	display:inline-block;
	height:120px;
	width:100%;
}


.bg_area_bottom{
	width: 100%;
	height: 20px;
	display: inline-block;
	border-radius: 0px 0px 50px 0px;
}

.bg_area_bottom.stud{
	width: 100%;
	height: 20px;
	display: inline-block;
	border-radius: 0px 0px 50px 0px;
}
/* 20220504 end */
.top_menu li{
	float: left;
	list-style-type: none;
	margin-right:40px;
	font-size:22px;
}
.top_menu li:last-child{
	margin-right:0px;
}
.top_menu li a{
	display:block;
	color:rgba(255,255,255,0.5);
	margin-top:10px;
	transition:all 0.2s;
}
.top_menu li a:hover{
	margin-top:0px;
}

.top_menu li span{
	display:block;
	padding: 11px 30px;
	font-family: "cssFontOpenSansHKBold";
	font-size: 20px;
}

.top_menu_01{
	background-color: #00C1DE;
	color: #FFFFFF;
	border: 3px solid #FFFFFF;
	border-radius: 11px;	
}
.top_menu_01:hover{
}
.top_menu_02{
	background-color: #93D500;
	color: #FFFFFF;
	border: 3px solid #FFFFFF;
	border-radius: 11px;	
}
.top_menu_02:hover{
}
.top_menu_03{
	background-color: #FF6B00;
	color: #FFFFFF;
	border: 3px solid #FFFFFF;
	border-radius: 11px;	
}
.top_menu_03:hover{
}
.top_menu_04{
	background-color: #FFE800;
	color: #4D4D4D;
	border: 3px solid #FFFFFF;
	border-radius: 11px;	
}
.top_menu_04:hover{
}

.top_menu_05 { 
	background-color: #FF6B00;
	color: #4D4D4D;
	border: 3px solid #FFFFFF;
	border-radius: 11px;	
}
.top_menu_05:hover { 
}	

.eng_page .top_menu li a { width: 350px; }
.teach_eng .top_menu li a {
    width: 280px;
    background-position: 100%;
}

select { max-width: 100%; }

.eng_teach .top_menu_02 {width: 270px !important; background-position: right top;}
.eng_teach .top_menu_02:hover{ background-position: right top;}
@media screen and (max-width:768px){
.list_item_title_4{
font-size:18px;
}
}

.rp_table tr{ border-bottom:#feffed 2px solid;}
.rp_table tr:nth-child(even) {background: #f5f4e8}
.rp_table tr:nth-child(odd) {background: #feffed}
.rp_table tr.non_fin{background: #d0ecef}
.rp_table tr.fin{background: #fcdfdb}
.rp_table_info{}



.tiles {display:block; margin:0 0 30px 0; overflow:hidden;}
.tiles .button {color:#fff; display:block; font-weight:bold; overflow:hidden; padding:20px 10px; text-align:center;}
.tiles .button.blue {background:#1f497d; border:2px solid #10253f;}
.tiles .button.orange {background:#f79646; border:2px solid #e46c0a;}
.tiles .button.green {background:#9bbb59; border:2px solid #4f6228;}
.panel {margin-bottom:20px; background-color: inherit; border:none; border-radius:0; -webkit-box-shadow:none; box-shadow:none;}
.panel-group .panel {margin-bottom:0; border-radius:0;}
.panel-group {margin-bottom: -5px;}
.panel-group .panel+.panel {margin-top:0;}
.panel-default {border:none;}
.panel-heading {border:none; border-radius:0; position:relative;}
.panel-default>.panel-heading {padding:0px 0px; background-color:inherit; }
.panel-default>.panel-heading+.panel-collapse>.panel-body {border:none; }

.panel-heading .accordion-toggle:after {background-image: url("../images/icon_min.svg"); 
	background-repeat: no-repeat; content:" "; color: rgba(255,255,255,0);
	background-position: 0px 0px; position:absolute; right:-25px; top:10px; width:22px; height:20px; display:block; transition:all 0.2s; }
.panel-heading .accordion-toggle:hover:after {background-image: url("../images/icon_min_ro.svg"); 
	background-repeat: no-repeat; content:" "; color: rgba(255,255,255,0);
	background-position: 0px 0px; position:absolute; right:-25px; top:10px; width:22px; height:20px; display:block;}
.panel-heading .accordion-toggle.collapsed:after {background-image: url("../images/icon_max.svg"); 
	background-repeat: no-repeat; content:" "; color: rgba(255,255,255,0);
	background-position: 0px 0px; position:absolute; right:-25px; top:10px; width:22px; height:20px; display:block; transition:all 0.2s;}
.panel-heading .accordion-toggle.collapsed:hover:after {background-image: url("../images/icon_max_ro.svg"); 
	background-repeat: no-repeat; content:" "; color: rgba(255,255,255,0);
	background-position: 0px 0px; position:absolute; right:-25px; top:10px; width:22px; height:20px; display:block;}
	
.panel-body {
    padding: 0px;
}

/*item_area start*/
/* 20220504 start */

.list_top{display: inline-block; width:100%; }

/* 20220504 end */
.item_left_side{ display:inline-block; vertical-align:bottom;}

.item_right_side{ float:right; display:inline-block; text-align:right;vertical-align:bottom;}
.item_right_side.stud{ width:100%;}
.search_area{display: inline-block;}

.search_area input[type=text]{
	padding: 5px 10px;
	padding-right: 35px;
	margin-top: 10px;
	background-color: #FFFFFF;
	border: none;
	font-size: 18px;
	color: rgba(156,155,147,1);
	vertical-align: bottom;
	width: 200px;
	border-radius:60px;
}
/* 20220504 start */
.stud .search_area input[type=text]{
	width:120px;margin-top: 0px;vertical-align:bottom;
}

.eng .stud .search_area input[type=text] {
    width: 200px;
    margin-top: 0px;
    vertical-align: bottom;
}


/* 20220504 end */
.search_area input[type=text]:focus {
  border: none;
}
.list_num{display: inline-block; margin-left:30px; margin-right:10px;vertical-align:bottom;color:#ffffff;font-family: "cssFontOpenSansHKBold"; font-size:20px;}
/* 20220504 start */
.stud .list_num{vertical-align: middle;}
/* 20220504 end */

a.btn_search{
	display: inline-block;
	background-color: rgba(255,255,255,1);
	color: rgba(0,163,170,1);
	box-shadow: rgba(0,0,0,.1) 0px 3px 8px;
	border-radius: 5px;
	padding-top: 3px;
	padding-right: 12px;
	padding-bottom: 3px;
	padding-left: 12px;
	transition:all 0.2s;
}
a.btn_search:hover{
	background-color: rgba(0,163,170,1);
	color: rgba(255,255,255,1);
}

.result_message{ 
	color: #ffffff;
}
.item_area{
	padding-bottom:10px;}
.list_item {
	background-color: #FFFFFF;
	padding: 16px 24px;
	margin: 10px 0px;
	border-radius: 10px;
	border: 1px solid #00C1DE;
	text-decoration: none;
	transition: all 0.2s;
	display: block;
	position:relative;
}
.list_item:hover {
	display: block;	
}
.list_item.bg_01{}
.list_item.bg_01:hover{}
.list_item.bg_02{}
.list_item.bg_02:hover{}
.list_item.bg_03{}
.list_item.bg_03:hover{}

.list_item_left{ display:inline-block; width:17%; vertical-align:top; position:relative;}
.list_item_right{ display:inline-block; width:82%; vertical-align:top;}
.list_item_btn_area{display:inline-block; height:40px; width:100%;}
.list_item_title{display:inline-block; width:100%;}
.list_item_info{color:rgba(98,98,98,1); display:inline-block; width:100%;}
.list_item_title a{
	color: #00C1DE;
	font-size:18px;
	font-weight:normal;
	transition: all 0.2s;
	display: inline-block;
	font-family: "cssFontOpenSansHKMedium";
	font-size: 16px;
}
.list_item_title a:hover{
}

.list_item_btn_area li{ float:right; list-style:none; margin-right:5px;}
.list_item_btn_area li:first-child {margin-right:0px;}
.list_item_btn_area li:last-child {margin-right: 5px;}
.list_item_btn_area_txt {
    display: inline-block;
	line-height:40px;
	margin-left:10px;
	font-size:18px;
}
.list_item_title_1{ width:50%}
.list_item_title_2{ width:25%}
.list_item_title_3{ width:25%}
.list_item_title:hover{color: rgba(48,149,253,1);}
.item_video{width:155px; height:116px; background-color:rgba(204,204,204,1); display:inline-block; position:relative; transition: all 0.2s;border-radius: 5px;}
.item_video img{border-radius: 5px;}
.item_video:hover{box-shadow:0px 3px 5px rgba(0,0,0,0.3);}
.item_video_time{ color:rgba(255,255,255,1); position:absolute; text-shadow:rgba(0,0,0,1) 0px 3px 3px; right: 5px; bottom:2px;}
/* 20220406 start */
.distribute .item_video_time {
    right: 75px; bottom:5px;
}
/* 20220406 end */
.item_video_icon{ 
	background-image: url("../images/icon_play.svg"); 
	background-blend-mode: screen;
	position:absolute; 
	width:155px; height:116px; 
	background-repeat: no-repeat;
	background-position: 40px 25px;
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.5));
	opacity:0.7;
	display:block;
	transition:all 0.2s;
}
.item_video_icon:hover{ 
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.7));
	opacity:1;
}

/*item_area end*/

/*content_area start*/
.content_area{ padding: 0px 20px;}
/* 20220504 start */
.stud .content_area{ padding: 20px 20px 0px 20px;}
/* 20220504 end */

.content_area_act_page{
	background-color: #ffffff; 
	padding: 0px 10px 0px 10px;
}
.bg_area_2{
	background-color: #ffffff;
	width: 100%;
	height: 25px;
	display: inline-block;
	position: absolute;
	left: 0px;
	top:58px;
	z-index:-10;
	border-radius: 24px 24px 0 0;
}
/* 20220406 start */
.bg_area_3{
	background-color: #ffffff;
	width: 100%;
	height: 12px;
	display: inline-block;
	position: absolute;
	left: 0px;
	z-index: -10;
	border-radius: 0 0 24px 24px;	
}
/* 20220406 end */
.top_menu_act{
	display: block;
	width: 100%;
	height: 65px;
	margin-bottom:15px;
}
.pic_title_edit{
	background-image: url("../images/pic_title_edit.png"); 
	background-repeat: no-repeat;
	background-position: center center;
	width: 135px;
	height: 60px;
	display:inline-block;
	vertical-align:bottom;
}
.pic_title_edit.distribute{
	margin-top:8px;
}

.top_title_01{
	background-image: url("../images/top_title_01.png"); 
	background-repeat: no-repeat;
	background-position: left top;
	width: 20px;
	height: 60px;
	display:inline-block;
	margin: 0px;
    padding: 0px;
	position:absolute;
	top:0px;
	right:-20px;
}
.btn_title_edit{
	background-image: url("../images/icon_edit.svg"); 
	background-repeat: no-repeat;
	background-position: 3px 5px;
	transition: all 0.2s;
	width: 30px;
	height: 30px;
	display: inline-block;
	background-color:rgba(255,255,255,0);
	margin-top:18px;
	margin-right:0;
	border-radius:5px;
	}
.btn_title_edit:hover{
	background-image: url("../images/icon_edit_ro.svg"); 
	background-repeat: no-repeat;
	background-position: 3px 5px;
	display: inline-block;
	background-color:rgba(255,255,255,1);
	box-shadow:rgba(0,0,0,0.3) 0px 2px 5px;
	}

a.btn_back{
	display: inline-block;
	border-radius: 10px;
	padding-top: 2px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 40px;
	transition: all 0.2s;
	margin-top: 15px;
	vertical-align: top;
	font-size:20px;
	color: #ffffff;
	margin-left:10px;
}
a.btn_back:hover{
}

.top_menu_right{ float:right;}
.video_title_edit_area{background-color:#ffffff; width:500px; height:70px; display:inline-block;border:1px solid #6A6A6A;border-radius:12px; position:relative; margin-right:20px;}
.edit_title_video{ padding:8px 8px; display:inline-block; float:left;}
.edit_title_txt{ display:inline-block; width:370px;}
.edit_title_txt.stud{ display:inline-block; width:100%; margin: 10px 20px; font-size:20px;}

.left_area{
	display:inline-block;
	width:49.5%;
	margin-right:10px;
	margin-left:10px;
	/*background-color:rgba(255,204,0,1);*/
}
/* 20220623 */
.right_area{
	display: inline-block;
	/*width: 48%;*/
	width: 47.5%;
	vertical-align:top;
	/*background-color:rgba(204,204,0,1);*/
	position:relative;
}
/* 20220623 */
.upload_file_area{
	border: 1px solid rgba(204,204,204,1); border-radius:10px;
	height:595px;
	background-color: rgba(255,255,255,1);
	transition:all 0.2s;
	position:relative;
}
.upload_file_area:hover{
	background-color:rgba(240,247,247,1);
}
.upload_file_icon{
	position:absolute;
	left:40%;
	top:40%;
	text-align:center;
	color:rgba(153,153,153,1)
}
.upload_file_icon:hover{
	color:#3095fd;
}
.upload_file_txt{display:block; padding-top:80px;}

.upload_file_icon_2{
	position:absolute;
	left:20%;
	top:50%;
	text-align:center;
	color:rgba(153,153,153,1)
}
.upload_file_icon_2:hover{
	color:#3095fd;
}
.upload_file_txt_2{
	display:block; 
	padding-top:0px;
    font-family: 'cssFontOpenSansHKBold';
    font-size: 21px;
    color: #000000;
}
.upload_title{ 
	padding-left:8px; 
	padding-top:5px;
	font-family: "cssFontOpenSansHKMedium";
    font-size: 23px;
    color: #01A09A;
}
.full_area{
	/*height:600px;
	max-height:600px;*/
	position:relative;
}
.full_area .video_edit_area {
    margin: 0px auto 0px auto;
	width: 100%;
}
.min_area{
	position: absolute;
	top: 0px;
	right: 0px;
}
/* 20220406 start */
.question_num_area{ margin-bottom:0px;border-bottom: 1px solid #A9A9A9;display:inline-block; width:100%;}
.question_num_area .left{display:inline-block; width:10%;}
.question_num_area .middle{display:inline-block; width:76%;}
.question_num_area .middle table{width:40%; margin: 0px auto;}
.question_num_area .right{display:inline-block; width:10%;}
.question_num_area .right .btn_forward{ float:right;}
.question_num{ font-size:30px; font-weight:bold; color:rgba(253,161,94,1); line-height:30px;}
/* 20220406 end */
.player_btn_area{ margin-bottom:10px; margin-top:10px; display: block;}
.player_btn_area a.icon_replay{background-position: 14px 10px;}
.player_btn_area a.icon_del{background-position: 14px 10px; margin-right:10px;}
.player_btn_area a.icon_edit{background-position: 14px 12px; margin-right:10px;}
.player_btn_area a.icon_add_2{background-position: 14px 10px;}

/* 20220406 start */
.player_btn_area_2{ margin-bottom:10px; margin-top:10px; display: block;}
.player_btn_area_2a{ margin-bottom:10px; margin-top:20px; display: block;}
.player_btn_area_2a a{ margin-left:20px;}
/* 20220406 end */
.player_btn_area_2 a.icon_replay{background-position: 9px 8px;}
.player_btn_area_2 a.icon_play_w{background-position: 14px 10px;}
.player_btn_area_2 .icon_back{ background-position: 10px 8px;}
.player_btn_area_2 .icon_back:hover{ background-position: 10px 8px;}
.player_btn_area_2 .icon_forward{ background-position: 15px 8px;}
.player_btn_area_2 .icon_forward:hover{ background-position: 15px 8px;}


/* 20220623 */
.question_area {
	position: relative;
	margin-bottom: 5px;
	margin-top: 5px;
	overflow: inherit;
	height: inherit;
}
/* 20220623 */
.question_image{
	display:block;
}
/* 20220406 start */
.question_stud_btn{display: block; width:100%; line-height:25px;}

.question_stud_btn a{ background-position: 14px 10px;}

.question_mark{ float:right; display: inline-block;}
/* 20220406 end */
/*content_area end*/

/*video_edit_area start*/
.video_edit_area{ margin:10px auto 10px auto; display:block;}
.video_area{display:block; margin: auto; position:relative;}
.video_area img{display:block; margin: auto;}




a.btn_player{
	display: inline-block;
	background-color: rgba(255,255,255,1);
	transition: all 0.2s;
	vertical-align: top;
	font-size:18px;
	color:rgba(98,98,98,1);
	width: 46px;
	height:46px;
}
a.btn_player:hover{
}
/* 20220222 Edit start */
a.btn_small{display: inline-block;
	background-color: #FF6B00;
	border-radius: 10px;
	transition: all 0.2s;
	vertical-align: top;
	color:#ffffff;
	width: 65px;
	height:30px;
	font-family: "cssFontOpenSansHKRegular";
	font-size:18px;
}
a.btn_small:hover{
}
a.btn_small.icon_edit{background-position: 2px 2px;}

a.btn_small.icon_save{background-position: 2px 2px;}

a.btn_small.icon_view{background-position: 5px 5px;font-size: 18px; height:inherit; padding-left:10px; padding-right:10px; display:inline-block; width:90px}

.playlist_area_table{ 
	line-height:30px;  
	border-left: 1px solid #A9A9A9;
    border-radius: 5px;
    border-right: 1px solid #A9A9A9;
    border-top: 1px solid #A9A9A9;
}
/* 20220222 Edit end */
.playlist_area{
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	color: rgba(153,153,153,1);
	height: inherit;
	list-style-type: none;
	overflow: inherit;
}
.playlist_area_table td{ padding: 5px 18px;}
.ignielHorizontal {
  border-left: 1px solid #A9A9A9;
  border-right: 1px solid #A9A9A9;
  border-bottom: 1px solid #A9A9A9;
}
.ignielHorizontal li{
	background-color: rgba(255,255,255,1);
	list-style-type: none;
	padding: 5px 0px;
	transition:all 0.2s;
	BORDER-TOP: 1PX DASHED #D5E1DE;
    BORDER-BOTTOM: 1PX DASHED #D5E1DE;
}
.ignielHorizontal li:hover{
}
	
.ignielHorizontal .active{
	background-color: #FFAB4D;
}
.question_list > .a{ display:inline-block; width:32%; text-align:center;}
.question_list > .b{ display:inline-block; width:33%; text-align:center;}
.question_list > .c{ display:inline-block; width:32%; text-align:center;}
/* 20220222 Edit start */
.ignielHorizontal.pic li{ position:relative;}
.question_list.pic > .a{ display:inline-block; width:49%; text-align:center;}
.question_list.pic > .c{ display:inline-block; width:49%; text-align:center;}
/* 20220222 Edit end */
.smaill_title{display: none;}
.pc-tab > input,
.pc-tab section > div {
  display: none;
}

input[id^=tab1]:checked ~ section .tab1,
input[id^=tab2]:checked ~ section .tab2,
input[id^=tab3]:checked ~ section .tab3,
input[id^=tab4]:checked ~ section .tab4,
input[id^=tab5]:checked ~ section .tab5,
input[id^=tab6]:checked ~ section .tab6 {
  display: block;
}

input[id^=tab1]:checked ~ nav .tab1,
input[id^=tab2]:checked ~ nav .tab2,
input[id^=tab3]:checked ~ nav .tab3,
input[id^=tab4]:checked ~ nav .tab4,
input[id^=tab5]:checked ~ nav .tab5,
input[id^=tab6]:checked ~ nav .tab6 {
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.pc-tab-nav{
	padding-left:0;
}
.pc-tab {
  width: 100%;
  max-width: 700px;
   margin-bottom:10px; margin-top:5px;
}
.pc-tab ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc-tab ul li label {
  float: left;
  padding: 5px 20px 5px 20px;
  border-bottom: 0;
  background: #c5dfde;
  color: #444;
  cursor:pointer;
  margin-right:5px;
  margin-top:10px;
  border-radius: 5px 5px 0px 0px;
  transition:all 0.2s;
}
.pc-tab ul li label:hover {
  background: #d9fff8;
  padding: 5px 20px 10px 20px;
  margin-top:5px;
}
.pc-tab ul li label:active {
  background: #ffffff;
}
.pc-tab ul li:not(:last-child) label {
  border-right-width: 0;
}
.pc-tab section {
  clear: both;
}
.pc-tab section div {
	padding: 15px;
	width: 100%;
	background: #ffffff;
	min-height: 100px;
	border: 1px solid #A9A9A9;
}
.pc-tab section div h2 {
  margin: 0;
  letter-spacing: 1px;
  color: #34495e;
}

input[id^=tab1]:checked ~ nav .tab1 label,
input[id^=tab2]:checked ~ nav .tab2 label,
input[id^=tab3]:checked ~ nav .tab3 label,
input[id^=tab4]:checked ~ nav .tab4 label,
input[id^=tab5]:checked ~ nav .tab5 label,
input[id^=tab6]:checked ~ nav .tab6 label {
  background: #ffffff;
  position: relative;
  padding: 6px 16px;
  margin-top: 0px;
  border-right: 1px solid #A9A9A9;
  border-left: 1px solid #A9A9A9;
  border-top: 1px solid #A9A9A9;  
  font-family: 'cssFontOpenSansHKMedium';
  font-size: 20px;
  color: #A9A9A9;
}
input[id^=tab1]:checked ~ nav .tab1 label:after,
input[id^=tab2]:checked ~ nav .tab2 label:after,
input[id^=tab3]:checked ~ nav .tab3 label:after,
input[id^=tab4]:checked ~ nav .tab4 label:after,
input[id^=tab5]:checked ~ nav .tab5 label:after,
input[id^=tab6]:checked ~ nav .tab6 label:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  bottom: -1px;
}


/*video_edit_area end*/

/*login_area start*/

.login_logo{
	background-image: url(../images/logo_index.png);
	background-repeat: no-repeat;
	background-position: center center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
	height: 83px;
	width: 458px;
	background-size:100%;
}
.login_area{
	width: 460px;
	margin-top: 170px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	position: relative;
	border-radius: 5px;
	font-size: 18px;
}
.login_area .logo_hkep {
	display: inline-block;
	width: 200px;
	height: 41px;
	padding: 0;
	background-image: url(../images/logo_hkep_login.png);
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	transition:all 0.2s;
	background-size: 100%;
	background-repeat: no-repeat;
    background-position: center center;
}
.login_are .logo_hkep:hover {
	opacity:70%;
}
.login_area_table_1{ width:46%; display: inline-block; margin-right:25px;}
.login_area_table_1a{ width:46%; display: inline-block;}
.login_area_table_2{ width:100%; display: inline-block;}
.errorMessage{
	color:rgba(238,83,91,1);
	display: inline-block;
	width:100%;
	padding-bottom:10px;
}
.login_area_tr{ height:80px;}
.login_area input{
	border: 1px solid #ccc;
	border-radius: 5px;
	padding-top: 2px;
	padding-right: 6px;
	padding-bottom: 2px;
	padding-left: 6px;
	height:40px;
	font-size: 18px;
	width:95%;
}
.login_btn a {
	color: #ffffff;
	background-color:rgba(255,103,102,1);
	transition: all .3s ease-in-out;
	background-position: 0%;
	color: #FFF;
	padding: 10px;
	text-align: center;
	display: block;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
	width: 190px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	border-radius: 5px;
}
.login_btn a:hover {
	box-shadow: 0 1px 3px rgba(0,0,0,.5);
	background-position: 100%;
	background-color:rgba(232,75,75,1);
}
.regist_area {
    color: rgba(0,0,0,1);
	float:right;
}
.stay_login{ float:left;}
.regist_area a {
    color: rgba(0,0,0,1);
    transition: all 0.2s;
}
.regist_area a:hover {
    color: rgba(255,255,255,1);
}
.stay_login input[type=checkbox]{ display:inline-block; height: 20px; width: 20px; padding: 0px; margin:0px;}
.stay_login label{ display:inline-block; padding: 0px; margin:0px; vertical-align: top;}
/*login_area end*/

/* Menu start */

/* Menu */
.nav-menu {
  cursor: pointer;
}
.nav-menu span {
  color: #fff;
}

/* Menu end */

/* Section */
section .inner {
	max-width: 1024px;
	margin: 0px auto 50px auto;
	
}
.col_left {
    width: 80px;
    margin-right: 15px;
	float:left;
}
.main{
	float:left;
	width: 90%;
}

.title_week{
	background-image: url(../images/bg_title_anim.gif);
	background-repeat: repeat-x;
	background-position: 0 bottom;
	margin: 0px;
	padding: 0px;
	height: 105px;
	display: block;
	border-radius: 5px;
	box-shadow: rgba(0,0,0,.2) 0px 10px 10px;
	position: relative;
}
.week_topic{
	position: absolute;
	left: 66px;
	top: 25px;
}
.week_num{
	font-size: 48px;
	text-decoration: none;
	background-color: rgba(251,176,51,1);
	display: inline-block;
	text-align: center;
	padding: 6px 8px;
	border-radius: 50px;
	font-family: Arial;
	font-weight: bold;
}
.week_txt{
	display: inline-block;
	font-size: 30px;
	font-weight: lighter;
}
.btn_report{
	display: none;
}
.quiz_btn_area li{
	height: 65px;
	margin-bottom: 15px;
	background-color: #FFFFFF;
	padding: 10px;
	list-style-type: none;
	transition:all 0.2s;
	border-radius:5px; 
	box-shadow: rgba(0,0,0,.1) 0px 10px 10px;
}
.quiz_t_1{
	background-image: url(../images/bg_truth_1.png);
	background-repeat: no-repeat;
	background-position: 80% center;
}
.quiz_t_1 .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(255,153,0,1);
}
.quiz_t_1.done .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(255,255,255,1);
}
.quiz_t_1.done{
	background-color:rgba(252,175,87,1); 
}
.quiz_t_1.done .c1_txt{color:rgba(0,0,0,1); }
.quiz_t_1.done .btn_quiz_btn a{
	background-color:rgba(255,255,255,1);
	color:rgba(252,175,87,1);
	box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0);
	transition:all 0.2s;
}
.quiz_t_1.done .btn_quiz_btn a:hover {box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.6);}

.quiz_t_2{
	background-image: url(../images/bg_truth_2.png);
	background-repeat: no-repeat;
	background-position: 80% center;
}
.quiz_t_2 .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(238,83,91,1);
}
.quiz_t_2.done .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(255,255,255,1);
}
.quiz_t_2.done{
	background-color:rgba(238,83,91,1); 
}
.quiz_t_2.done .c2_txt{color:rgba(0,0,0,1); }
.quiz_t_2.done .btn_quiz_btn a{
	background-color:rgba(255,255,255,1);
	color:rgba(238,83,91,1);
	box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0);
	transition:all 0.2s;
}
.quiz_t_2.done .btn_quiz_btn a:hover {box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.6);}

.quiz_t_3{
	background-image: url(../images/bg_truth_3.png);
	background-repeat: no-repeat;
	background-position: 80% center;
}
.quiz_t_3 .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(255,134,76,1);
}
.quiz_t_3.done .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(255,255,255,1);
}
.quiz_t_3.done{
	background-color:rgba(255,134,76,1); 
}
.quiz_t_3.done .c3_txt{color:rgba(0,0,0,1); }
.quiz_t_3.done .btn_quiz_btn a{
	background-color:rgba(255,255,255,1);
	color:rgba(255,134,76,1); 
	box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0);
	transition:all 0.2s;
}
.quiz_t_3.done .btn_quiz_btn a:hover {box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.6);}

.quiz_t_4{
	background-image: url(../images/bg_truth_4.png);
	background-repeat: no-repeat;
	background-position: 80% center;
}
.quiz_t_4 .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(102,173,98,1);
}
.quiz_t_4.done .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(255,255,255,1);
}
.quiz_t_4.done{
	background-color:rgba(102,173,98,1); 
}
.quiz_t_4.done .c4_txt{color:rgba(0,0,0,1); }
.quiz_t_4.done .btn_quiz_btn a{
	background-color:rgba(255,255,255,1);
	color:rgba(102,173,98,1);
	box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0);
	transition:all 0.2s;
}
.quiz_t_4.done .btn_quiz_btn a:hover {box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.6);}

.quiz_t_5{
	background-image: url(../images/bg_truth_5.png);
	background-repeat: no-repeat;
	background-position: 80% center;
}
.quiz_t_5 .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(97,154,207,1);
}
.quiz_t_5.done .btn_quiz_result{
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: rgba(255,255,255,1);
}
.quiz_t_5.done{
	background-color:rgba(97,154,207,1); 
}
.quiz_t_5.done .c5_txt{color:rgba(0,0,0,1); }
.quiz_t_5.done .btn_quiz_btn a{
	background-color:rgba(255,255,255,1);
	color:rgba(97,154,207,1);
	box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0);
	transition:all 0.2s;
}
.quiz_t_5.done .btn_quiz_btn a:hover {box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.6);}

.quiz_btn_area li:last-child{ margin-bottom:0px;}

.btn_quiz_topic{ width:25%; float:left;	display:inline-block;}
.btn_quiz_topic .t1{display:block;}
.btn_quiz_topic .t2{display:block;}
.btn_quiz_result{
	width: 51%;
	float: left;
	line-height: 14px;
	display: inline-block;
	padding-left: 10px;
	font-size: 14px;
}
.btn_quiz_result .result{ font-size:24px;}
.btn_quiz_btn{
	float: left;
	display:inline-block;
}
.btn_quiz_btn a {text-decoration: none; line-height:24px; display:block; text-align:center; padding: 10px 20px; margin-top:20px; border-radius:5px; color:rgba(255,255,255,1); transition:all 0.2s;}
.btn_quiz_btn a:hover {background-color:rgba(255,255,255,1); box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.2);}

.col_right_1{
	display: inline-block;
	padding: 0px;
	margin-top: 0px;
	margin-right: 15px;
	margin-bottom: 0px;
	margin-left: 0px;
	z-index: 10;
	vertical-align: top;
	width:49.1%;
	float:left;
}
.col_right_2{
	display: inline-block;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    z-index: 10;
	vertical-align: top;
	width:49.1%;
	float:right;
	box-shadow: rgba(0,0,0,.1) 0px 10px 10px;
	
}
.all_result_detail{
	height: 120px;
	display: block;
	background-color: #d5f0eb;
	background-image: url(../images/bg_result_detail.jpg);
	background-repeat: repeat-x;
	background-position: 0px bottom;
	border-radius: 5px 5px 0px 0px;
	padding: 10px 30px;
	font-size: 18px;
	position: relative;
	overflow: inherit;
}
.img_result_1{
	background-image: url(../images/img_result_1.png);
	height: 101px;
	width: 101px;
	position: absolute;
	right: -7px;
	top: 10px;
}
.img_result_2{
	background-image: url(../images/img_result_2.png);
	height: 57px;
	width: 420px;
	position: absolute;
	right: -10px;
	bottom:-30px;
}
.all_result_chart .topic{
	text-align: center;
	display: block;
	padding-top: 10px;
	line-height:20px;
}
.all_result_chart{
	height:450px;
	display:block;
	background-color:#fef5ec;
	border-radius: 0px 0px 5px 5px;
	font-size:18px;
	font-weight:lighter;
	line-height:28px;
}
.chart_type_num{
	font-size:36px;
	font-weight:bold;
}
.chart_type_num_s {
    font-size: 24px;
    font-weight: bold;
}
.chart_num{
	line-height:18px;
}
/* 20220406 start */
.distribute li{
	list-style-type: none;
	line-height:30px;
}
.blue_hightlight{
	color: #1A4F90;
	font-family: 'cssFontOpenSansHKBold';
	font-size: 19px;
}
.right_area.distribute{
	margin-bottom:10px;
}

.item_topic2{ font-family: "cssFontOpenSansHKMedium";font-size:18px;color:#767676; }
.item_content2{ font-family: "cssFontOpenSansHKMedium";font-size:18px;color:#767676 }
.item_content2 label { font-family: "cssFontOpenSansHKBold";font-size:18px;width: 12%; }


.distribute .video_area{ position:relative;}
.distribute .video_area img{
	width:75%;
	height:75%;
}
/* 20220406 end */
.distribute .sub_menu{
	background-color:#FFE1CC;
	padding: 20px 20px;
    margin-bottom: 0px;
    background-image: none;
	border-radius: 10px;
}
.distribute .item_topic {
    width: inherit;
    display: inline-block;
	font-family: "cssFontOpenSansHKMedium";
	font-size:18px;
	color:#767676;
	padding-right:10px;
}
.distribute .item_content {
    display: inline-block;
	font-family: "cssFontOpenSansHKMedium";
	font-size:18px;
	color:#767676;
	padding-right:10px;
}
.distribute .item_menu {
    padding: 5px 0px;
}
.distribute .item_menu_2 {
	width: inherit;
	display: inline-block;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 0px;
}

.distribute .item_menu_3 {
    width: inherit;
	padding: 5px 0px;
    display: inline-block;
}
.file_select_area{
	background-color:rgba(204,204,204,1);
	border-radius:10px;
	width:300px;
	height:220px;
	margin-top:10px;
	margin-bottom:10px;
	display: block;
}
.upload_file_type{
	margin-right: 20px;
	margin-left: 20px;
	display:block;
	height:400px;
}

.upload_file_type li{
	list-style-type: none;
	min-height:50px;
}
.file_select{
	display:inline-block;
	width:350px;
	height:280px;
}

/* eng ver start */
.eng .stud .item_topic {
    width: 10%;
    display: inline-block;
    font-size: 18px;
    vertical-align: inherit;
}
.eng .stud .item_menu_2 {
    width: 41%;
    padding: 5px 0px;
    display: inline-block;
}
.eng .item_menu_2 .item_content {
    width: 70%;
    display: inline-block;
    font-size: 18px;
}
.eng .stud .item_topic_2 {
    width: 15%;
	display: inline-block;
	font-size:18px;
}
.eng .stud .item_content_2 {
    width: 82%;
	display: inline-block;
}
.eng .stud .item_content_2 label {
    padding-right: 30px;
    min-width: 100px;
	font-size:18px;	
}
.eng .stud .item_menu_4 {
    width: 45%;
    padding: 5px 0px;
    display: inline-block;
}
.eng .stud .item_menu_4 .item_topic {
    width: 33%;
	display: inline-block;
}
.eng .stud .item_menu_4 .item_content {
    width: 60%;
	display: inline-block;
}
.eng .stud .item_menu_4 .item_content .select_area {
    width: 100%;
	display: inline-block;
}

.eng .top_menu li.top_menu_05_li a{
	width:280px;
}
.eng .top_menu_04{
}
.eng .top_menu_04:hover{
}

.hightlight_face{
}
.hightlight_light{
}
.eng .top_menu_04.hightlight{
}
.eng .top_menu_04 .hightlight_face_2{
}


.eng .top_menu_05{
}
.eng .top_menu_05:hover{
}
.eng .top_menu_05.hightlight{
}
.eng .top_menu_05 .hightlight_face_2{
}

.search_type_bg{
	background-color: #fff9dc;
	border-radius:10px;
	padding:5px;
}

/* 20220623 */
.drawing_btn_area{
	position:absolute;
	top:100px;
	right:-12px;
	z-index:5;
}
a.btn_opendrawboard{
	display: inline-block;
	background-color: rgba(255,255,255,1);
	box-shadow: rgba(0,0,0,0) 0px 5px 5px;
	border-radius: 10px 0px 0px 10px;
	transition: all 0.2s;
	vertical-align: top;
	font-size: 18px;
	color: rgba(98,98,98,1);
	width: 30px;
	height: 80px;
	box-shadow: rgba(0,0,0,.1) 0px 5px 10px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: rgba(192,213,230,1);
	border-right-color: rgba(255,255,255,1);
	border-bottom-color: rgba(192,213,230,1);
	border-left-color: rgba(192,213,230,1);
}
a.btn_opendrawboard:hover{
	color:rgba(48,149,253,1);
	box-shadow: rgba(0,0,0,.2) 0px 5px 2px;
	width: 38px;
}
.btn_opendrawboard.icon_edit {
    background-image: url(../images/icon_edit.svg);
    background-repeat: no-repeat;
    transition: all 0.2s;
    background-position: 2px 25px;
}
a.btn_drawboard_btn{
	display: inline-block;
	background-color: rgba(255,255,255,1);
	box-shadow: rgba(0,0,0,0) 0px 5px 5px;
	border-radius: 10px 0px 0px 10px;
	transition: all 0.2s;
	vertical-align: top;
	font-size: 18px;
	color: rgba(98,98,98,1);
	width: 30px;
	height: 40px;
	box-shadow: rgba(0,0,0,.1) 0px 5px 10px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: rgba(192,213,230,1);
	border-right-color: rgba(255,255,255,1);
	border-bottom-color: rgba(192,213,230,1);
	border-left-color: rgba(192,213,230,1);
	float:right
}
a.btn_drawboard_btn:hover{
	color:rgba(48,149,253,1);
	box-shadow: rgba(0,0,0,.2) 0px 5px 2px;
	width: 38px;
}
a.btn_drawboard_btn.icon_close {
    background-image: url(../images/icon_close_s.svg);
    background-repeat: no-repeat;
    background-position: 6px 10px;
    transition: all 0.2s;
}
a.btn_drawboard_btn.icon_save {
    background-image: url(../images/icon_save.svg);
    background-repeat: no-repeat;
    transition: all 0.2s;
    background-position: 6px 10px;
}


/* 20220623 */

td.table_info_top a{
	color:#fff;
	font-weight:bold;
}
.pop_up_txt tr td{
	border:2px solid #888;
}
	
/* eng ver end */


@media only screen and (max-width: 1180px) and (orientation: landscape) { 
	section .inner {
	margin: 0px auto 0px auto;
	}
	.playlist_area {
    display: block;
    margin: 0px auto 0px auto;
    width: 100%;
    color: rgba(153,153,153,1);
    height: 150px;
    list-style-type: none;
    overflow: auto;
	}
/* 20220623 */
.question_area {
    position: relative;
    margin-bottom: 5px;
    margin-top: 5px;
    /* overflow: auto; */
    height: inherit;
	}
/* 20220623 */
	.player_btn_area {
    margin-bottom: 0px;
    margin-top: 0px;
	}
	.video_edit_area {
    margin: 0px auto 0px auto;
    display: block;
	}
}

@media only screen and (max-width: 1024px) and (orientation: landscape) { 
	section .inner {
	margin: 0px auto 0px auto;
	}
/*
	.playlist_area {
    display: block;
    margin: 0px auto 0px auto;
    width:100%;
    color: rgba(153,153,153,1);
    height: 100px;
    list-style-type: none;
    overflow: auto;
	}
*/
/* 20220623 */
.question_area {
    position: relative;
    margin-bottom: 5px;
    margin-top: 0px;
    /* overflow: auto; */
	}
/* 20220623 */
	.stud .question_area {
	}
	.player_btn_area {
    margin-bottom: 0px;
    margin-top: 0px;
	}
	.video_edit_area {
    margin: 0px auto 0px auto;
	}
	.pic .video_area{ height: 405px;}
	.pic .playlist_area{ height: 200px;}
}

@media only screen and (max-width: 1024px) and (orientation: portrait) { 
	.full_area .video_area {
    display: block;
    padding-top: 60px;
	}
	.video_area img {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    display: block;
	}

/* 20221025 edit */
.main{
	float:left;
	width: 86%;
}
.left_area {
    display: inline-block;
    width: 100%;
    margin-right: 0px;
    margin-left: 0px;
}
.right_area {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.list_item_left {
    width: 24%;
}
.list_item_right {
    width: 75%;
}
.video_edit_area, .playlist_area {
    width: 100% !important;
}

/* 20221025 edit */
		
}
@media only screen and (max-width: 896px) and (orientation: landscape) { 
	.left_area {
		width: 100%;
	}
	.video_edit_area {
		margin: 0px auto 0px auto;
		display: inline-block;
	}
	.playlist_area {
		vertical-align: top;
		display: inline-block;
		margin: 10px 0px 0px 10px;
		width: 41%;
		color: rgba(153,153,153,1);
		height: 480px;
		list-style-type: none;
		overflow: auto;
	}
	.right_area {
		display: inline-block;
		width: 100%;
		vertical-align: top;
		/* background-color: rgba(204,204,0,1); */
	}
	
	.eng .stud .item_topic_2 {
		vertical-align:top;
		
	}
	
	
}
@media only screen and (max-width: 844px) and (orientation: landscape) { 
	.list_item_left {
		width: 20%;
	}
	.list_item_right {
		width: 78%;
	}
	.list_item_title {
		padding: 10px 0px;
	}
	.left_area {
		display: inline-block;
		width: 100%;
		margin-right: 0px;
		margin-left: 0px;
	}
	.right_area {
		display: inline-block;
		width: 100%;
		vertical-align: top;
	}
	.video_edit_area {
		margin: 0px auto 0px auto;
		width: 62%;
		display: inline-block;
	}
	.playlist_area {
		vertical-align:top;
		display:inline-block;
		margin: 10px 00px 0px 10px;
		width: 36%;
		color: rgba(153,153,153,1);
		height: 480px;
		list-style-type: none;
		overflow: auto;
	}
	.full_area .video_area {
		display: block;
		padding-top: 60px;
		height: inherit;
	}
	.video_area img {
		width: 100%;
		height: 100%;
		margin: 0px auto;
		display: block;
	}
}
@media only screen and (max-width: 820px) and (orientation: portrait) { 
	section .inner {
	margin: 0px auto 0px auto;
	}
	.video_title_edit_area {
    background-color: rgba(254,227,155,1);
    width: 520px;
    height: 70px;
    display: inline-block;
    border-radius: 10px;
    position: relative;
    margin-right: 20px;
	}
	.edit_title_txt {
    display: inline-block;
    width: 290px;
	}
	.edit_title_txt.stud {
    display: inline-block;
    width: 93%;
    margin: 10px 20px;
	line-height:24px;
	}
	.left_area {
    display: inline-block;
    width: 100%;
	margin-right: 0px;
    margin-left: 0px;
	}
	.right_area {
    display: inline-block;
    width: 100%;
    vertical-align: top;
	}
	.video_edit_area {
    margin: 0px auto 0px auto;
	display:inline-block;
	}
/* 20221025 edit */
.playlist_area {
	vertical-align:top;
    display:inline-block;
    margin: 10px 0px 10px 10px;
    width: 35%;
    color: rgba(153,153,153,1);
	height: 445px;
    list-style-type: none;
    overflow: auto;
	}
/* 20221025 edit */
}
.pic_title_edit {
    display: none;
}
.top_title_01 {
    display: none;
}
.video_area {
    display: block;
}
.video_area img {
	width:100%;
	height:100%;
	margin: 0px auto;
	display:block;
}
/* 20220623 */
.question_area {
	position: relative;
	margin-bottom: 5px;
	margin-top: 5px;
	height: inherit;
	/* overflow: auto; */
}
/* 20220623 */
.pc-tab {
    width: 100%;
    max-width: 800px;
    margin-bottom: 10px;
    margin-top: 5px;
}
/* 20220406 start */
section .inner {
	/* max-width: 100%; */
	width: 100%;
	margin: 0 auto;
	padding-bottom: 0px;
}
/* 20220406 end */
.main{
	float:left;
	width: 86%;
}
.upload_file_area{
	height:595px;
	margin-bottom:10px;
}
.upload_file_icon{
	left:43%;
	top:35%;
}
.upload_file_icon_2{
	left:20%;
	top:50%;
}
.question_list > .a {
    display: inline-block;
    width: 31%;
    text-align: center;
}
.eng .bg_area.stud {
    height: 100px;
}
.eng .stud_bg_area {
    height: 100px;
    background-size: 180%;
}
.eng .stud .top_menu {
    padding-left: 110px;
}
.eng .stud .item_menu_2 {
    width: 48%;
    padding: 5px 0px;
    display: inline-block;
}
.eng .stud .item_topic_2 {
    display: inline-block;
    vertical-align: top;
}

/* 20221025 edit */
.main{
	float:left;
	width: 86%;
}
.list_item_left {
    width: 24%;
}
.list_item_right {
    width: 75%;
}
.video_edit_area, .playlist_area {
    width: 100% !important;
}

/* 20221025 edit */
}

@media only screen and (max-width: 812px) and (orientation: landscape) { 
	section .inner {
	margin: 0px auto 0px auto;
	}
	.video_title_edit_area {
    background-color: rgba(254,227,155,1);
    width: 420px;
    height: 70px;
    display: inline-block;
    border-radius: 10px;
    position: relative;
    margin-right: 20px;
	}
	.edit_title_txt {
    display: inline-block;
    width: 290px;
	}
	.left_area {
    display: inline-block;
    width: 100%;
	margin-right: 0px;
    margin-left: 0px;
	}
	.right_area {
    display: inline-block;
    width: 100%;
    vertical-align: top;
	margin-top:20px;
	}
	.video_edit_area {
    margin: 0px auto 0px auto;
    width: 62%;
    display: inline-block;
	}
	.playlist_area {
	vertical-align:top;
    display:inline-block;
    margin: 10px 00px 0px 10px;
    width: 35%;
    color: rgba(153,153,153,1);
	height: 460px;
    list-style-type: none;
    overflow: auto;
}
.question_list > .a{ display:inline-block; width:32%; text-align:center;}
.question_list > .b{ display:inline-block; width:32%; text-align:center;}
.question_list > .c{ display:inline-block; width:32%; text-align:center;}
.pic_title_edit {
    display: none;
}
.top_title_01 {
    display: none;
}
.video_area {
    display: block;
}
.video_area img {
	width:100%;
	height:100%;
	margin: 0px auto;
	display:block;
}
/* 20220623 */
.question_area {
	position: relative;
	margin-bottom: 5px;
	margin-top: 5px;
	height: inherit;
	/* overflow: auto; */
}
/* 20220623 */
.player_btn_area {
    margin-bottom: 0px;
    margin-top: 0px;
}
.pc-tab {
    width: 100%;
    max-width: 800px;
    margin-bottom: 10px;
    margin-top: 5px;
}
/* 20220406 start */
section .inner {
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 0px;
}
/* 20220406 end */
	.main{
	float:left;
	width: 86%;
}
.list_item_left {
    width: 21%;
}
.list_item_right {
    width: 77%;
}
.list_item_title {
    padding: 10px 0px;
}
.list_item_title_1{width: 40%;}
.list_item_title_2{width: 30%;}
.list_item_title_3{width: 30%;}
.list_item_title_txt{display: inline-block; width:100%;	color:#808080;font-family:"cssFontOpenSansHKRegular";font-size:13px;}
.list_item_title_txt2{display: inline-block; width:100%; color:#808080;font-family:"cssFontOpenSansHKRegular";font-size:13px;}

.panel-heading .accordion-toggle:after {
	background-image: url("../images/icon_min.svg");
	background-repeat: no-repeat;
	content: " ";
	color: rgba(255,255,255,0);
	background-position: 0px 0px;
	position: absolute;
	right: 0px;
	top: 15px;
	width: 22px;
	height: 20px;
	display: block;
	transition: all 0.2s;
}
.panel-heading .accordion-toggle:hover:after {
	background-image: url("../images/icon_min_ro.svg");
	background-repeat: no-repeat;
	content: " ";
	color: rgba(255,255,255,0);
	background-position: 0px 0px;
	position: absolute;
	right: 0px;
	top: 15px;
	width: 22px;
	height: 20px;
	display: block;
}
.panel-heading .accordion-toggle.collapsed:after {
	background-image: url("../images/icon_max.svg");
	background-repeat: no-repeat;
	content: " ";
	color: rgba(255,255,255,0);
	background-position: 0px 0px;
	position: absolute;
	right: 0px;
	top: 15px;
	width: 22px;
	height: 20px;
	display: block;
	transition: all 0.2s;
}
.panel-heading .accordion-toggle.collapsed:hover:after {
	background-image: url("../images/icon_max_ro.svg");
	background-repeat: no-repeat;
	content: " ";
	color: rgba(255,255,255,0);
	background-position: 0px 0px;
	position: absolute;
	right: 0px;
	top: 15px;
	width: 22px;
	height: 20px;
	display: block;
}
.edit_title_txt.stud {
    display: inline-block;
    width: 92%;
    margin: 10px 20px;
}
.full_area .video_area {
    display: block;
    padding-top: 60px;
	height: inherit;
	}
	.video_area img {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    display: block;
	}
	
	.upload_file_area{
	height:180px;
	margin-bottom:10px;
}
.upload_file_icon{
	left:39%;
	top:35%;
}
.upload_file_icon_2{
	left:20%;
	top:50%;
}

.bg_area.stud {
    height: 120px;
	top: 0px;
}
.stud_bg_area {
    height: 120px;
	
}
.stud .top_menu {
    padding-left: 120px;
}
.top_menu li a {
    font-size: 22px;
}
.stud .top_menu {
    padding-left: 120px;
	height:80px;
}
.eng .stud .item_menu_2 {
    width: 48%;
    padding: 5px 0px;
    display: inline-block;
}
.eng .stud .item_topic_2 {
    width: 15%;
	vertical-align:top;
}


		
}

@media only screen and (max-width: 768px) and (orientation: portrait) { 
	section .inner {
	margin: 0px auto 0px auto;
	}
	.video_title_edit_area {
    background-color: rgba(254,227,155,1);
    width: 450px;
    height: 70px;
    display: inline-block;
    border-radius: 10px;
    position: relative;
    margin-right: 20px;
	}
	.edit_title_txt {
    display: inline-block;
    width: 290px;
	}
	.left_area {
    display: inline-block;
    width: 100%;
	margin-right: 0px;
    margin-left: 0px;
	}
	.right_area {
    display: inline-block;
    width: 100%;
    vertical-align: top;
	}
	.video_edit_area {
    margin: 0px auto 0px auto;
	display:inline-block;
	}
	
	.question_list > .a {
		width: 30%;
	}
	.question_list > .b {
		width: 36%;
	}
	.question_list > .c {
		width: 30%;
	}
	.playlist_area {
	vertical-align:top;
    display:inline-block;
    margin: 0px 0px 0px 0px;
    width: 33%;
    color: rgba(153,153,153,1);
	height: 455 px;
    list-style-type: none;
    overflow: auto;
	}
	
	.video_edit_area, .playlist_area { 
		width: 100% !important; 
	}
		
.pic_title_edit {
    display: none;
}
.top_title_01 {
    display: none;
}

.full_area .video_area {
    display: block;
	padding-top:60px;
}
.video_area {
    display: block;
}
.video_area img {
	width:100%;
	height:100%;
	margin: 0px auto;
	display:block;
}
/* 20220623 */
.question_area {
	position: relative;
	margin-bottom: 5px;
	margin-top: 5px;
	height: inherit;
	/* overflow: auto; */
}
/* 20220623 */
.player_btn_area {
    margin-bottom: 0px;
    margin-top: 0px;
}
.pc-tab {
    width: 100%;
    max-width: 800px;
    margin-bottom: 10px;
    margin-top: 5px;
}
/* 20220406 start */
section .inner {
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 0px;
}
/* 20220406 end */
.main{
	float:left;
	width: 86%;
}
.list_item_left {
    width: 24%;
}
.list_item_right {
    width: 75%;
}
.upload_file_area{
	height:400px;
	margin-bottom:10px;
}
.upload_file_icon{
	left:43%;
	top:35%;
}
.upload_file_icon_2{
	left:20%;
	top:50%;
}

/* eng */
.eng .bg_area.stud {
    height: 80px;
}
.eng .stud_bg_area {
    height: 80px;
	background-size:180%;
}
.eng .stud .top_menu {
    padding-left: 100px;
}
.top_menu li {
    margin-right: 20px;
}
.eng .top_menu li span {
    padding-top: 20px;
}
.eng .top_menu li a{
	font-size:18px;
}
.eng .top_menu li a{
	width: inherit;
}
.eng .top_menu li.top_menu_05_li a {
    width: 280px;
}

.eng .stud .item_topic_2 {
    width: 18%;
    display: inline-block;
	vertical-align:top;
}
.eng .stud .item_content_2 {
    width: 80%;
	display: inline-block;
}
.eng .stud .item_menu_2 {
    width: 48%;
    padding: 5px 0px;
    display: inline-block;
}
.eng .item_menu_2 .item_content {
    width: 70%;
    display: inline-block;
    font-size: 18px;
}
.eng .stud .item_menu_4 {
    width: 45%;
}
.eng .stud .item_menu_4 .item_topic {
    width: 40%;
    display: inline-block;
}
.eng .stud .item_menu_4 .item_content {
    width: 58%;
    display: inline-block;
}
.eng .stud .item_content label input {
	display: inline-block;
}
.eng .stud .item_content label span {
	display: inline-block;
}
/* eng */
}

@media only screen and (max-width: 736px) and (orientation: landscape) { 
	.top_menu {
		padding-left: 20px;
		position: relative;
		margin-bottom: 15px;
		height: 55px;
	}
	.top_menu li {
	margin-right: 10px;font-size: 18px;
	}
	
	section .inner {
	margin: 0px auto 0px auto;
	}
	.video_title_edit_area {
    background-color: rgba(254,227,155,1);
    width: 420px;
    height: 70px;
    display: inline-block;
    border-radius: 10px;
    position: relative;
    margin-right: 20px;
	}
	.edit_title_txt {
    display: inline-block;
    width: 290px;
	}
	.edit_title_txt.stud {
    display: inline-block;
    width: 95%;
    margin: 10px 20px;
	}
	.left_area {
    display: inline-block;
    width: 100%;
	margin-right: 0px;
    margin-left: 0px;
	}
	.right_area {
    display: inline-block;
    width: 100%;
    vertical-align: top;
	}
	.video_edit_area {
    margin: 0px auto 0px auto;
    width: 62%;
	display:inline-block;
	}
	.playlist_area {
	vertical-align:top;
    display:inline-block;
    margin: 10px 00px 0px 10px;
    width: 35%;
    color: rgba(153,153,153,1);
	height: 390px;
    list-style-type: none;
    overflow: auto;
	}
	.question_list > .a{ display:inline-block; width:32%; text-align:center;}
	.question_list > .b{ display:inline-block; width:32%; text-align:center;}
	.question_list > .c{ display:inline-block; width:32%; text-align:center;}
	.pic_title_edit {
		display: none;
	}
	.top_title_01 {
	display: none;
	}
	.video_area {
		display: block;
		height: 267px;
	}
	.video_area img {
		width:100%;
		height:100%;
		margin: 0px auto;
		display:block;
	}
/* 20220623 */
	.question_area {
		position: relative;
		margin-bottom: 5px;
		margin-top: 5px;
		height: inherit;
		/* overflow: auto; */
	}
/* 20220623 */
	.pc-tab {
		width: 100%;
		max-width: 800px;
		margin-bottom: 10px;
		margin-top: 5px;
	}
/* 20220406 start */
	section .inner {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding-bottom: 0px;
	}
/* 20220406 end */
	.main{
		float:left;
		width: 86%;
	}
.list_item_left {
    width: 26%;
}
.list_item_right {
    width: 73%;
}
.list_item_title {
    padding: 10px 0px;
}
.list_item_title_1{width: 40%;}
.list_item_title_2{width: 30%;}
.list_item_title_3{width: 30%;}
.list_item_title_txt{display: inline-block; width:100%;	font-size:14px; color: rgba(153,153,153,1);}
.list_item_title_txt2{display: inline-block; width:100%; font-size:16px;}
.panel-heading .accordion-toggle:after {
	background-image: url("../images/icon_min.svg");
	background-repeat: no-repeat;
	content: " ";
	color: rgba(255,255,255,0);
	background-position: 0px 0px;
	position: absolute;
	right: 0px;
	top: 15px;
	width: 22px;
	height: 20px;
	display: block;
	transition: all 0.2s;
}
.panel-heading .accordion-toggle:hover:after {
	background-image: url("../images/icon_min_ro.svg");
	background-repeat: no-repeat;
	content: " ";
	color: rgba(255,255,255,0);
	background-position: 0px 0px;
	position: absolute;
	right: 0px;
	top: 15px;
	width: 22px;
	height: 20px;
	display: block;
}
.panel-heading .accordion-toggle.collapsed:after {
	background-image: url("../images/icon_max.svg");
	background-repeat: no-repeat;
	content: " ";
	color: rgba(255,255,255,0);
	background-position: 0px 0px;
	position: absolute;
	right: 0px;
	top: 15px;
	width: 22px;
	height: 20px;
	display: block;
	transition: all 0.2s;
}
.panel-heading .accordion-toggle.collapsed:hover:after {
	background-image: url("../images/icon_max_ro.svg");
	background-repeat: no-repeat;
	content: " ";
	color: rgba(255,255,255,0);
	background-position: 0px 0px;
	position: absolute;
	right: 0px;
	top: 15px;
	width: 22px;
	height: 20px;
	display: block;
}
.full_area .video_area {
    display: block;
    padding-top: 60px;
	height: inherit;
	}
	.video_area img {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    display: block;
	}
/* eng */	
	.eng .top_menu li a {
		width: inherit;
	}
/* eng */
	.top_menu li a {
		font-size: 18px;
	}
		
		
}

@media only screen and (max-width: 667px) and (orientation: landscape) { 
		/*top_menu start*/
.top_menu{
	display: inline-block;
    padding-left: 20px;
    position: relative;
    margin-bottom: -8px;
	height:80px;	
}
.top_menu_bg{position: relative;}

.top_menu li{
	float: left;
	list-style-type: none;
	margin-right:10px;
	margin-left:0px;
	font-size:20px;
}
.top_menu li:last-child{
	margin-right:0px;
}

.top_menu li span{
	padding-top: 25px;
    padding-left: 10px;
	display:block;
}

.top_menu li span.top_menu_02a {
    padding-top: 25px;
    padding-left: 10px;
    display: block;
}

.stud .top_menu {
    padding-left: 100px;
}

.top_menu li a.top_menu_01 {
    width: inherit;
}
.top_menu li a.top_menu_02 {
    width: inherit;
}
.top_menu li a.top_menu_03 {
    width: inherit;
}
.list_item_left {
    width: 26%;
}
.list_item_right {
    width: 73%;
}
.list_item_btn_area li {
    margin-right: 2px;
}
.list_item_title_1{width: 40%;}
.list_item_title_2{width: 30%;}
.list_item_title_3{width: 30%;}
.list_item_title_txt{display: inline-block; width:100%;	font-size:14px; color: rgba(153,153,153,1);}
.list_item_title_txt2{display: inline-block; width:100%; font-size:16px;}
/*top_menu end*/
	
	section .inner {
	margin: 0px auto 0px auto;
	}
	.video_title_edit_area {
    background-color: rgba(254,227,155,1);
    width: 420px;
    height: 70px;
    display: inline-block;
    border-radius: 10px;
    position: relative;
    margin-right: 20px;
	}
	.edit_title_txt {
    display: inline-block;
    width: 290px;
	}
	.left_area {
    display: inline-block;
    width: 100%;
	margin-right: 0px;
    margin-left: 0px;
	}
	.right_area {
    display: inline-block;
    width: 100%;
    vertical-align: top;
	}
	.video_edit_area {
    margin: 0px auto 0px auto;
    width: 62%;
	display:inline-block;
	}
	.playlist_area {
	vertical-align:top;
    display:inline-block;
    margin: 10px 00px 0px 10px;
    width: 35%;
    color: rgba(153,153,153,1);
	height: 350px;
    list-style-type: none;
    overflow: auto;
}
.question_list > .a{ display:inline-block; width:32%; text-align:center;}
.question_list > .b{ display:inline-block; width:32%; text-align:center;}
.question_list > .c{ display:inline-block; width:32%; text-align:center;}
.pic_title_edit {
    display: none;
}
.top_title_01 {
    display: none;
}
.video_area {
    display: block;
    height: 267px;
}
.video_area img {
	width:100%;
	height:100%;
	margin: 0px auto;
	display:block;
}
/* 20220623 */
.question_area {
	position: relative;
	margin-bottom: 5px;
	margin-top: 5px;
	height: inherit;
	/* overflow: auto; */
}
/* 20220623 */
.pc-tab {
    width: 100%;
    max-width: 800px;
    margin-bottom: 10px;
    margin-top: 5px;
}
/* 20220406 start */
	section .inner {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding-bottom: 0px;
	}
/* 20220406 end */
	.main{
		float:left;
		width: 86%;
	}
	.full_area .video_area {
    display: block;
    padding-top: 60px;
	height: inherit;
	}
	.video_area img {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    display: block;
	}
}

@media only screen and (max-width: 414px) and (orientation: portrait) { 
/*top_menu start*/
.content_area {
    padding: 0px 10px;
}
.top_menu {
    display: inline-block;
    padding-left: 0px;
    position: relative;
    margin-bottom: -8px;
    height: 80px;
	margin-left:10px;
}
.top_menu_bg{position: relative;}

.top_menu li{
	float: left;
	list-style-type: none;
	margin-right:10px;
	margin-left:0px;
	font-size:20px;
}
.top_menu li:last-child{
	margin-right:0px;
}

.top_menu li span {
    padding-top: 25px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
}

.top_menu li span.top_menu_02a {
    padding-top: 25px;
    padding-left: 10px;
    display: block;
}
.top_menu li a.top_menu_01 {
    width: 100px;
	min-width: 100px;
}
.top_menu li a.top_menu_02 {
    width: 145px;
	min-width: 145px;
}
.top_menu li a.top_menu_03 {
    width: 100px;
	min-width: 100px;
}
.list_num {
    margin-left: 10px;
    margin-right: 10px;
	padding: 10px 10px;
}
.search_area input[type=text]{
	width:120px;
}
.list_item_left {
	width: 100%;
}
.list_item_right {
    width: 100%;
	padding: 10px 0px 0px 0px;
}
.list_item {
    padding: 10px 0px 10px 10px;
}

.list_item_title {
	padding: 10px 0px 10px 0px;
}
.list_item_btn_area li {
    float: left;
}
.list_item_btn_area li a {
	min-height:40px;
	padding-right:15px;
	padding-left:51px;
}
.list_item_btn_area li:first-child {
    margin-right: 5px;
}
.list_item_btn_area li:last-child {
    margin-right: 0px;
}

.list_item_info {
    color: rgba(98,98,98,1);
    display: inline-block;
    width: 100%;
    position: inherit;
	bottom: auto;
    right: auto;
	padding-right:10px;
	padding-top:10px;
}
.list_item_title_1{width: 40%;}
.list_item_title_2{width: 30%;}
.list_item_title_3{width: 30%;}
.list_item_title_txt{display: inline-block; width:100%;	font-size:14px; color: rgba(153,153,153,1);}
.list_item_title_txt2{display: inline-block; width:100%; font-size:16px;}
/*top_menu end*/	
	
	.user_area {
    margin-top: 12px;
	}
	.logo_hkep {
	margin-top: 5px;
    margin-left: 10px;
	width: 36px;
	height: 36px;
	background-image: url(../images/logo_hkep_min_disclaimer.png);
	}
/* 20220406 start */
	section .inner {
	max-width: 100%;
	width: 100%;
	margin: 0px auto 0px auto;
	padding-bottom: 0px;
	}
/* 20220406 end */
	.left_area {
    display: inline-block;
    width: 100%;
	}
	.right_area {
    display: inline-block;
    width: 100%;
    vertical-align: top;
	}
	.video_area {
    display: block;
	}
	.video_area img {
    width: 100%;
    margin: 0px auto;
    display: block;
	}
	.video_edit_area {
    margin: 0px auto 0px auto;
    width: 100%;
    display: inline-block;
	}
	.playlist_area {
    width: 100%;
	height: 95px;
	margin: 10px auto 0px auto;
	padding-left: 0px;
    padding-right: 0px;
	}
	.playlist_area_table{ display:none;}
	

	.question_image img {
	width: 100%;
	}
	.question_list > .a{ display:block; width:100%; text-align: left; float:left; padding-left:5px;}
	.question_list > .b{ display:block; width:100%; text-align: left; float:left; padding-left:5px;}
	.question_list > .c{ display:block; width:100%; text-align: left; float:left; padding-left:5px;}
	.smaill_title{ font-size:14px; color:rgba(153,153,153,1); display:inline-block;}
	.pic_title_edit {
    display: none;
	}
	.top_title_01 {
    display: none;
	}
	.video_title_edit_area {
    width:100%;
    margin-right: 0px;
	height: 70px;
	}
	.edit_title_txt {
    width:90%;
	padding-left:10px;
	}
	.question_num_area .left{display:inline-block; width:10%;}
	.question_num_area .middle{display:inline-block; width:77%;}
	.question_num_area .middle table{width:50%; margin: 0px auto;}
	.question_num_area .right{display:inline-block; width:10%;}
/* 20220623 */
	.question_area {
    position: relative;
    margin-bottom: 5px;
    margin-top: 5px;
    height: inherit;
    overflow: inherit;
	}
/* 20220623 */
	a.btn_back {
    display: inline-block;
    border-radius: 10px;
    padding-top: 2px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 40px;
    transition: all 0.2s;
    margin-top: 0px;
    margin-left: 10px;
	}
	.edit_title_video {
    display: none;
	}
	.top_menu_right {
    float: none;
	padding: 0px 10px;
	}
	.content_area_act_page {
    padding: 35px 10px 0px 10px;
	}
.panel-heading .accordion-toggle:after {
	right: 5px;
	top: 20px;
}
.panel-heading .accordion-toggle:hover:after {
	right: 5px;
	top: 20px;
}
.panel-heading .accordion-toggle.collapsed:after {
	right: 5px;
	top: 20px;
}
.panel-heading .accordion-toggle.collapsed:hover:after {
	right: 5px;
	top: 20px;
}

/* ignielHorizontal */
.ignielHorizontal ul {
  max-width: 100%;
  overflow-x: auto;
}
.ignielHorizontal {
  overflow: hidden;
}
.ignielHorizontal a {
  display: block;
}
.ignielHorizontal a:hover {
  text-decoration: none;
}
.ignielHorizontal ul, .ignielHorizontal li {
  list-style: none;
  display: inline-block;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
}

.ignielHorizontal li{
	background-color: rgba(255,255,255,1);
	border: solid rgba(229,229,229,1) 2px;
	border-radius: 5px;
	list-style-type: none;
	box-shadow: rgba(0,0,0,.2) 0px 5px 5px;
	padding: 5px 0px;
	margin-bottom:10px;
	transition:all 0.2s;
	width:30%;
}
.ignielHorizontal li:hover{
	background-color: rgba(255,243,195,1);
	border: solid rgba(239,217,170,1) 2px;
	box-shadow: rgba(0,0,0,.2) 0px 0px 10px;
	color:#999 !important
}
.ignielHorizontal .active{
	background-color: rgba(253,161,94,1);
	border: solid rgba(253,161,94,1) 2px;
	box-shadow: rgba(0,0,0,.2) 0px 5px 5px;
}

/* ignielHorizontal */

	.upload_file_area{
	height:240px;
	margin-bottom:10px;
}
.upload_file_icon{
	left:39%;
	top:35%;
}
.upload_file_icon_2{
	left:20%;
	top:50%;
}


/* eng */
.eng .content_area {
    padding: 95px 10px 0px 10px;
}
.eng .top_menu li {
	padding-right:10px;
	margin-top:15px;
}
.eng .top_menu li.top_menu_05_li a {
    width: 100%;
}
.eng .bg_area.stud {
    height: 100px;
}
.eng .stud_bg_area {
    height: 150px;
    background-size: 420%;
}
.eng .stud .top_menu {
    padding-left: 100px;
}
.eng .stud .item_menu_2 {
    width: 48%;
    padding: 5px 0px;
    display: inline-block;
	vertical-align:top;
}
.eng .stud .item_topic_2 {
    width: 100%;
    display: inline-block;
    vertical-align: inherit;
	margin-bottom:10px;
}
.eng .stud .item_content_2 {
    width: 100%;
    display: inline-block;
}
.eng .stud .item_content_2 label {
    padding-right: 10px;
    min-width: 110px;
	padding-bottom:10px;
}
.eng .stud .item_content_2 select {
    width: 100%;
    display: inline-block;
}
.eng .stud .item_content {
    width: 100%;
    display: inline-block;
}
.eng .stud .item_content select {
    width: 100%;
    display: inline-block;
}
.eng .stud .item_menu_4 {
    width: 48%;
}
.eng .stud .item_menu_4 .item_topic {
    width: 100%;
    display: inline-block;
	padding-bottom:10px;
}
.eng .stud .item_menu_4 .item_content {
    width: 100%;
    display: inline-block;
}

.eng .top_menu .top_menu_05_li {
    width: 100%;
	padding-right:10px;
	padding-top:10px;
}
.eng .bg_area.stud {
    height: 150px;
}
.eng .stud_bg_area {
    height: 150px;
    background-size: 420%;
    background: none;
    background: #fef4c2;
    border-radius: 20px 0px 0px 0px;
    margin-top: 0px;
}
.eng .stud .top_menu {
    padding-left: 10px;
	height:130px;
}
.eng .top_menu_04.hightlight {
    width: 100%;
}
.eng .top_menu_05.hightlight {
    width: 100%;
}

.top_menu li a.top_menu_01 {
    width: inherit;
	min-width: 100px;
}
.top_menu li a.top_menu_02 {
    width: inherit;
	min-width: 145px;
}
.top_menu li a.top_menu_03 {
    width: inherit;
	min-width: 100px;
}
/* eng */
}

@media only screen and (max-width: 390px) and (orientation: portrait) { 

.item_right_side {
    width: 230px;
}
.search_area input[type=text] {
    width: 80px;
}
.item_content label {
    padding-right: 30px;
	padding-bottom: 10px;
}
.edit_title_txt {
    width: 88%;
    padding-left: 10px;
}
.btn_title_edit {
    background-image: url(../images/icon_edit.svg);
    background-repeat: no-repeat;
    background-position: 3px 5px;
    margin-top: 18px;
    margin-right:0;
    border-radius: 5px;
}
.top_menu li span {
    padding-top: 25px;
    padding-left: 10px;
    padding-right: 30px;
    display: block;
}
/* eng */
.eng .top_menu li a{

}
.eng .top_menu li.top_menu_05_li a{
	width:100%;
}
.eng .top_menu li span {
    padding-top: 20px;
}
.eng .stud .top_menu {
    padding-left: 80px;
}
.eng .bg_area.stud {
    height: 150px;
}
.eng .stud_bg_area {
    height: 150px;
    background-size: 420%;
}
.eng .stud .top_menu {
    padding-left: 10px;
	height:130px;
}
/* eng */
}

@media only screen and (max-width: 375px) and (orientation: portrait) { 
	.edit_title_txt.stud {
    display: inline-block;
    width: 92%;
    margin: 10px 20px;
    line-height: 24px;
	}
/*top_menu start*/
.sub_menu {
    background-image: none;
    padding: 20px 20px;
}
.top_menu{
	display: inline-block;
    padding-left: 0px;
    position: relative;
    margin-bottom: -8px;
	height: 80px;
}
.top_menu_bg{position: relative;}

.top_menu li{
	float: left;
	list-style-type: none;
	margin-right:10px;
	margin-left:0px;
	font-size:20px;
}
.eng .top_menu li {
    float: left;
    list-style-type: none;
    /* margin-right: 10px; */
    margin-left: 0px;
    font-size: 18px;
}
.top_menu li:last-child{
	margin-right:0px;
}

.top_menu li span{
	padding-top: 25px;
    padding-left: 10px;
	padding-right:10px;
	display:block;
}

.top_menu li span.top_menu_02a {
    padding-top: 25px;
    padding-left: 10px;
    display: block;
}

.top_menu li a.top_menu_01 {
    width: 100px;
}
.top_menu li a.top_menu_02 {
    width: 145px;
}
.top_menu li a.top_menu_03 {
    width: 100px;
}	
/*top_menu end*/	
	
	.user_area {
    margin-top: 12px;
	}
	
	.logo_hkep {
	margin-top: 5px;
    margin-left: 10px;
	width: 36px;
	height: 36px;
	background-image: url(../images/logo_hkep_min_disclaimer.png);
	}

	.content_area {
		padding: 0px 10px;
	}
	.sub_menu {
    padding: 10px 20px;
    margin-bottom: 5px;
	}

	.panel-heading .accordion-toggle:after {
	right: 5px;
    top: 20px;
	}
	.panel-heading .accordion-toggle:hover:after {
	right: 5px;
    top: 20px;
	}
	.panel-heading .accordion-toggle.collapsed:after { 
	right: 5px;
    top: 20px;
	}
	.panel-heading .accordion-toggle.collapsed:hover:after {
	right: 5px;
    top: 20px;
	}
	.item_menu_2 .item_topic {
	width: 35%;
	padding-top:5px;
	}
	.item_menu_2 .item_content {
    width: 25%;
	}
	.select_area {
    padding: 2px 10px;
	}
	.item_topic {
    width: 20%;
	}
/* 20220406 start */
	section .inner {
	max-width: 100%;
	width: 100%;
	margin: 0px auto 0px auto;
	padding-bottom: 0px;
	}
/* 20220406 end */
	.left_area {
    display: inline-block;
    width: 100%;
	}
	.right_area {
    display: inline-block;
    width: 100%;
    vertical-align: top;
	}
	.video_area {
    display: block;
	}
	.video_area img {
    width: 100%;
    margin: 0px auto;
    display: block;
	}
	.video_edit_area {
    margin: 0px auto 0px auto;
    width: 100%;
    display: inline-block;
	}
	.question_image img {
	width: 100%;
	}
	.playlist_area {
    width: 100%;
	}
	.playlist_area_table{ display:none;}
	
	.question_list > .a{ display:block; width:100%; text-align: left; float:left; padding-left:5px;}
	.question_list > .b{ display:block; width:100%; text-align: left; float:left; padding-left:5px;}
	.question_list > .c{ display:block; width:100%; text-align: left; float:left; padding-left:5px;}
	.smaill_title{ font-size:14px; color:rgba(153,153,153,1); display:inline-block;}
	.pic_title_edit {
    display: none;
	}
	.top_title_01 {
    display: none;
	}
	.video_title_edit_area {
    width:100%;
    margin-right: 0px;
	padding:5px;
	height: 75px;
	}
	.edit_title_txt {
    width:88%;
	}
	.content_area_act_page {
    padding: 40px 10px 0px 10px;
	}
	
	.question_num_area .left{display:inline-block; width:10%;}
	.question_num_area .middle{display:inline-block; width:77%;}
	.question_num_area .middle table{width:50%; margin: 0px auto;}
	.question_num_area .right{display:inline-block; width:10%;}
/* 20220623 */
	.question_area {
    position: relative;
    margin-bottom: 5px;
    margin-top: 5px;
    height: inherit;
    overflow: inherit;
	}
/* 20220623 */	
	.item_left_side {
    width: 140px;
	}
	.item_left_side a{
		font-size:18px;
	}
	.item_right_side {
    width: 230px;
	}
	.list_num {
    display: inline-block;
    margin-left: 5px;
    margin-right: 0px;
    vertical-align: bottom;
	}
	.search_area input[type=text] {
	width:100px;
	}
	.list_item_left {
    width: 100%;
	}
	.list_item_right {
    width: 100%;
	}
	.list_item_btn_area {
    display: inline-block;
    width: 100%;
	height:auto;
	margin-bottom: 10px;
	}

	.list_item_btn_area li {
    float: left;
    list-style: none;
	}

	.list_item_info {
    display: inline-block;
	}
	.list_item_btn_area a.btn_white {
    padding-top: 5px;
    padding-right: 12px;
    padding-bottom: 5px;
    padding-left: 50px;
    margin-top: 5px;
    margin-left: 0px;
	margin-right: 0px;
	}
	.list_item_info table{ font-size:12px;}
	.list_item_title_1{ width:35%; vertical-align:text-top;}
	.list_item_title_2{ width:30%; vertical-align:text-top;}
	.list_item_title_3{ width:35%; vertical-align:text-top;}
	
	.item_content label {width:108px; display:inline-block;}
	
	.upload_file_area{
	height:280px;
	margin-bottom:10px;
}
.upload_file_icon{
	left:39%;
	top:35%;
}
.upload_file_icon_2{
	left:20%;
	top:50%;
}
.upload_file_area{
	height:275px;
	margin-bottom:10px;
}
.upload_file_icon{
	left:39%;
	top:35%;
}
.upload_file_icon_2{
	left:20%;
	top:50%;
}

/* eng */
.eng .content_area {
    padding: 95px 10px 0px 10px;
}
.eng .stud_bg_area {
	
    height: 150px;
	background-size: 420%;
	background:none;
	background:#fef4c2;
	border-radius: 20px 0px 0px 0px;
	margin-top:0px;
}
.eng .stud .top_menu {
    padding-left: 10px;
	height: 120px;
}
.eng .top_menu li span {
    padding-top: 28px;
    padding-left: 15px;
    padding-right: 15px;
    display: block;
}

.eng .stud .item_topic_2 {
    width: 100%;
    display: inline-block;
    vertical-align: top;
	margin-bottom:10px;
}
.eng .stud .item_content_2 {
    width: 100%;
    display: inline-block;
}
.eng .stud .item_content_2 label {
    padding-right: 20px;
    min-width: 78px;
	margin-bottom:10px;
}

.eng .top_menu_05.hightlight {
    width: 100%;
}

.eng .top_menu li {
	padding-right:0px;
	margin-top:15px;
}
.eng .top_menu li a.top_menu_01 {
    width: inherit;
}
.eng .top_menu li a.top_menu_02 {
    width: inherit;
}
.eng .top_menu li a.top_menu_03 {
    width: inherit;
}

/* eng */
}


.footer {
	text-align: center;
	position:fixed;
	bottom:10px;
	margin-left:auto;
	margin-right:auto;
	width: calc(100% - 10px);
	margin: 0 auto;
	color: #ffffff;	
}
.footer a {
	color: #ffffff;
	transition:all 0.3s;
	opacity:1;
}
.footer a:hover {
	opacity:0.6;
}
.footer_copyright{display: inline-block;}