a.btn_transparent{
	color: rgba(255,255,255,1);
	padding-top: 8px;
    padding-right: 20px;
    padding-left: 50px;
    padding-bottom: 8px;
	opacity: 1;
	transition: all 0.2s;
	display: inline-block;
}
a.btn_black{
	color: #ffffff;
	background-color: #00C1DE;
	padding: 7px 32px;
	opacity: 1;
	transition: all 0.2s;
	border-radius: 50px;
	display: inline-block;
	font-family: 'cssFontOpenSansHKMedium';
	font-size: 19px;
}
a.btn_black:hover{
}

a.btn_white{
	background-color: #ffffff;
	color: #808080;
	padding: 6px 31px;
	opacity: 1;
	transition: all 0.2s;
	border-radius: 24px;
	border: 1px solid #808080;
	display: inline-block;
	font-family: 'cssFontOpenSansHKRegular';
	font-size: 18px;
}
a.btn_white:hover{
}

a.btn_white_2{
	background-color: #ffffff;
	color: #767676;
	padding: 7px 32px;
	opacity: 1;
	transition: all 0.2s;
	border-radius: 50px;
	display: inline-block;	
	font-family: 'cssFontOpenSansHKMedium';
	font-size: 19px;
}
a.btn_white_2:hover{
}

a.btn_yellow{
	background-color: #FFE800;
	color: #4D4D4D;
	padding: 6px 31px;
	opacity: 1;
	transition: all 0.2s;
	border-radius: 24px;
	display: inline-block;
	font-family: 'cssFontOpenSansHKRegular';
	font-size: 18px;
}
a.btn_yellow:hover{
}

a.btn_blue{
	background-color: #00C1DE;
	color: #FFFFFF;
	padding: 9px 20px;
	opacity: 1;
	transition: all 0.2s;
	border-radius: 30px;
	display: inline-block;
	font-family: 'cssFontOpenSansHKRegular';
	font-size: 18px;
}
a.btn_blue:hover{
}

a.btn_blue2{
	background-color: #194F90;
	color: #FFFFFF;
	padding: 9px 20px;
	opacity: 1;
	transition: all 0.2s;
	border-radius: 30px;
	display: inline-block;
	font-family: 'cssFontOpenSansHKRegular';
	font-size: 18px;
}
a.btn_blue2:hover{
}

a.btn_green{
	background-color: #93D500;
	color: #FFFFFF;
	padding: 9px 20px;
	opacity: 1;
	transition: all 0.2s;
	border-radius: 30px;
	display: inline-block;
	font-family: 'cssFontOpenSansHKRegular';
	font-size: 18px;
}
a.btn_green:hover{
}

a.btn_orange{
	color: #ffffff;
	background-color: #FF6B00;
	padding: 3px 17px;
	opacity: 1;
	transition: all 0.2s;
	border-radius: 30px;
	display: inline-block;
	font-family: 'cssFontOpenSansHKRegular';
	font-size: 18px;
}
a.btn_orange:hover{
}
a.btn_orange2{
	color: #ffffff;
	background-color: #FF6B00;
	padding: 6px 32px;
	opacity: 1;
	transition: all 0.2s;
	border-radius: 24px;
	display: inline-block;
	font-family: 'cssFontOpenSansHKBold';
	font-size: 23px;
}

a.no_icon{padding-left: 20px;}


.btn_distribute_num{display: inline-block; background-color: #FFE800; border-radius: 10px; transition: all 0.2s; color:#4D4D4D; font-weight:bold; font-family: "cssFontOpenSansHKRegular"; font-size: 15px; padding:2px 10px;}
.btn_distribute_num:hover{
}
.btn_distribute_num2{font-weight:bold; font-family: "cssFontOpenSansHKRegular"; font-size: 15px;}

/* 20220406 start */
a.btn_sty02{
	padding: 5px 15px;
	}
/* 20220406 end */

/* btn */

/* icon */
.icon_add{
	background-image: url("../images/icon_add.svg"); 
	background-repeat: no-repeat;
	background-position: 15px 10px;
	transition: all 0.2s;
}
.icon_add:hover{
	 background-image: url("../images/icon_add_ro.svg"); 
}
/* 20220406 start */
.icon_add_big{
	background-image: url("../images/icon_add_big.png"); 
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 75px 75px;
	transition: all 0.2s;
	width:75px;
	height:75px;

}
.icon_add_big:hover{
}
/* 20220406 end */

.icon_finish{
}
.icon_finish:hover{
}

.icon_close{
}
.icon_close:hover{
}

.icon_add_2{
}
.icon_add_2:hover{
}
.icon_back{
}
.icon_back:hover{
}
.icon_back2{
	background-image: url("../images/icon_back_ro.svg"); 
	background-repeat: no-repeat;
	background-position: 10px 5px;
	transition: all 0.2s;
}
.icon_forward{
}
.icon_forward:hover{
}
.icon_distribute{
}
.icon_distribute:hover{
}
.icon_duplicate{
}
.icon_duplicate:hover{
}
.icon_del{
}
.icon_del:hover{
}
.icon_share{
}
.icon_share:hover{
}
.icon_edit{
}
.icon_edit:hover{
}
.icon_view{
}
.icon_view:hover{
}
a.btn_small.icon_view{}
.icon_save{
}
.icon_save:hover{
}

.icon_min{
	background-image: url("../images/icon_min.svg"); 
	background-repeat: no-repeat;
	background-position: 10px 5px;
	transition: all 0.2s;
}
.icon_min:hover{
	 background-image: url("../images/icon_min_ro.svg"); 
}
.icon_max{
	background-image: url("../images/icon_max.svg"); 
	background-repeat: no-repeat;
	background-position: 10px 5px;
	transition: all 0.2s;
}
.icon_min:hover{
	 background-image: url("../images/icon_max_ro.svg"); 
}

.icon_search{
	background-image: url("../images/icon_search.png"); 
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 22px 22px;
	transition: all 0.2s;
	width:22px; height:22px;
	display:inline-block;
	position: relative;
    left: -40px;	
}
.icon_search:hover{
	 background-image: url("../images/icon_search.png"); 
}
.icon_play_w{
}
.icon_play_w:hover{
}
.icon_play_b{
	background-image: url("../images/icon_play_b.png"); 
	background-repeat: no-repeat;
	background-position:0 0;
	background-size:42px 42px;
	transition: all 0.2s;
}
.icon_play_b:hover{
}

.icon_video_play{ 
	background-image: url("../images/icon_play.svg"); 
	position:absolute; 
	width:70px;
	height:70px; 
	background-repeat: no-repeat;
	background-position: 0px 0px;
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.5));
	opacity:0.7;
	display: inline-block;
	transition:all 0.2s;
	/*background-size: contain;*/
	cursor:pointer;

}
.icon_video_play:hover{ 
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.7));
	opacity:1;
}

.icon_video_play_big{ 
	background-image: url("../images/icon_play_big.svg"); 
	position:absolute; 
	width:145px;
	height:145px; 
	background-repeat: no-repeat;
	background-position: 0px 0px;
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.5));
	opacity:0.7;
	display: inline-block;
	transition:all 0.2s;
	/*background-size: contain;*/
	cursor:pointer;
	left:35%; top:35%;
}
.icon_video_play_big:hover{ 
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.7));
	opacity:1;
}
.full_area .icon_video_play_big{left:42%; top:42%;}
/* 20220406 start */
.distribute .icon_video_play{ left:42%; top:100px;}
/* 20220406 end */
.icon_pause_w{
	background-image: url("../images/icon_pause_w.svg"); 
	background-repeat: no-repeat;
	background-position:18px 12px;
	transition: all 0.2s;
}
.icon_pause_w:hover{
	background-image: url("../images/icon_pause_w_ro.svg"); 
}
.icon_pause_b{
	background-image: url("../images/icon_pause_b.svg"); 
	background-repeat: no-repeat;
	background-position:18px 12px;
	transition: all 0.2s;
}
.icon_pause_b:hover{
	background-image: url("../images/icon_pause_b_ro.svg"); 
}

.icon_video_pause{ 
	background-image: url("../images/icon_pause.svg"); 
	position:absolute; 
	width:250px;
	height:100px; 
	background-repeat: no-repeat;
	background-position: 40px 25px;
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.5));
	opacity:0.7;
	display: inline-block;
	transition:all 0.2s;
	background-size: contain;
}
.icon_video_pause:hover{ 
	filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.7));
	opacity:1;
}

.icon_replay{
}
.icon_replay:hover{
}
.icon_max_size{
	background-image: url("../images/icon_max_size.png"); 
	background-repeat: no-repeat;
	background-position:0 0;
	background-size:42px 42px;
	transition: all 0.2s;
}
.icon_max_size:hover{
}
.icon_min_size{
	background-image: url("../images/icon_min_size.svg"); 
	background-repeat: no-repeat;
	background-position:16px 12px;
	transition: all 0.2s;
}
.icon_min_size:hover{
	background-image: url("../images/icon_min_size_ro.svg"); 
}
.icon_user_setting{
	background-image: url("../images/icon_user_setting.svg"); 
	background-repeat: no-repeat;
	background-position: 10px 7px;
	transition: all 0.2s;
	width:60px;
	height:60px;
}
.icon_user_setting:hover{
	 background-image: url("../images/icon_user_setting_ro.svg"); 
}
.icon_note{
	background-image: url("../images/icon_note.svg"); 
	background-repeat: no-repeat;
	background-position: 10px 5px;
	transition: all 0.2s;
}
.icon_note:hover{
	 background-image: url("../images/icon_note_ro.svg"); 
}
.icon_bookmark{
	background-image: url("../images/icon_bookmark.svg"); 
	background-repeat: no-repeat;
	background-position: 10px 5px;
	transition: all 0.2s;
}
.icon_bookmark:hover{
	 background-image: url("../images/icon_bookmark_ro.svg"); 
}
.icon_hint{
	background-image: url("../images/icon_hint.svg"); 
	background-repeat: no-repeat;
	background-position: 0px 0px;
	transition: all 0.2s;
	width:16px;
	height:16px;
	display:inline-block;
	margin-left:5px;
}
.active .icon_hint{
	background-image: url("../images/icon_hint.svg"); 
	background-repeat: no-repeat;
	background-position: 0px 0px;
	transition: all 0.2s;
	width:16px;
	height:16px;
	display:inline-block;
}

a.btn_backward{
	background-image: url("../images/icon_back.svg"); 
	background-repeat: no-repeat;
	background-position: 6px 4px;
	transition: all 0.2s;
	display: inline-block;
	padding: 5px;
	transition: all 0.2s;
	height:30px;
	width: 30px;
}
a.btn_backward:hover{
	 background-image: url("../images/icon_back_w_ro.svg");
	 background-position: 2px 4px;
}

a.btn_forward{
	background-image: url("../images/icon_forward.svg"); 
	background-repeat: no-repeat;
	background-position: 6px 4px;
	transition: all 0.2s;
	display: inline-block;
	padding: 5px;
	transition: all 0.2s;
	height:30px;
	width: 30px;
}
a.btn_forward:hover{
	 background-image: url("../images/icon_forward_w_ro.svg");
	 background-position: 10px 4px;
}

/* icon end */
.btn_set2 .icon_share:hover{
}
.btn_set2 .icon_distribute:hover{
}
.btn_set2 .icon_duplicate:hover{
}
.btn_set2 .icon_del:hover{
}
.btn_set2 .icon_edit:hover{
}

.page_sort_w{
	color: #FFFFFF;
	text-decoration: none;
	transition: all 0.2s;
	height: 15px;
	width: 20px;
	display: inline-block;
	background-image: url(../images/btn_sort_w_down.png);
	background-repeat: no-repeat;
	background-position: center center;
	cursor:pointer;
	opacity: .6;
}
.page_sort_w.down{
	background-image: url(../images/btn_sort_w_down.png);
}
.page_sort_w.up{
	background-image: url(../images/btn_sort_w_up.png);
}
.page_sort_w:hover{
	opacity: 1;
}

.icon_new{
	background-color:rgba(204,51,102,1);
	border-radius:20px;
	color:rgba(255,255,255,1);
	font-size:16px;
	font-weight:bold;
	display: inline-block;
	padding: 3px 6px;
	box-shadow: rgba(0,0,0,.3) 0px 3px 5px;
	position:absolute;
	top:-10px;
	right: -10px;
	z-index:5;
}
.icon_txt{ display:inline-block;}

.icon_move{
	width: 32px;
	margin: 0px;
	padding: 2px 6px;

	border-radius:3px;
	display:inline-block;
	position:absolute;
	left:0px;
	top:0px;
}
.icon_move:hover{
}
.icon_up{
	background-image: url(../images/arrow_up.png);
	display: block;
	height: 14px;
	width: 18px;
	cursor: pointer;
	opacity:0.5;
	transition: all 0.2s;

}
.icon_down{
	background-image: url(../images/arrow_down.png);
	display: block;
	height: 14px;
	width: 18px;
	cursor:pointer;
	opacity:0.5;
	transition: all 0.2s;
}
.icon_down:hover, .icon_up:hover{
	opacity:1;
}
.disabled {
  opacity: 0.1;
  cursor: not-allowed;
}

ul#left_qus_bar li.active { 
	color: #fff; 
	font-weight: bold; 
}

/* 20221025 edit */
@media only screen and (max-width: 820px) and (orientation: portrait) { 
.icon_video_play_big {
	left: 40%;
	top: 40%;
}
}
/* 20221025 edit */
	
@media only screen and (max-width: 736px) and (orientation: landscape) { 
.icon_new {
    top: -10px;
    right: inherit;
    left: -10px;
	}
}


@media only screen and (max-width: 667px) and (orientation: landscape) { 
a.btn_white {
    padding-top: 8px;
    padding-right: 10px;
    padding-left: 37px;
    padding-bottom: 8px;
}
.list_item_title {
	padding: 10px 0px;
}
}


@media only screen and (max-width: 414px) and (orientation: portrait) { 
.icon_txt{ display: none;}
.list_item_btn_area .icon_share{
    background-position: 18px 5px;
}
.list_item_btn_area .icon_distribute{
    background-position: 18px 5px;
}
.list_item_btn_area .icon_duplicate {
    background-position: 18px 5px;
}
.list_item_btn_area .icon_del{
    background-position: 18px 5px;
}
.list_item_btn_area .icon_edit{
    background-position: 18px 5px;
}
.icon_new {
    top:-10px;
    right: inherit;
	left:-10px;
}

}
@media only screen and (max-width: 390px) and (orientation: portrait) { 
.icon_txt{ display: none;}
.list_item_btn_area li a {
    min-height: 40px;
    padding-right: 10px;
    padding-left: 51px;
}
.list_item_btn_area .icon_share{
    background-position: 15px 5px;
}
.list_item_btn_area .icon_distribute{
    background-position: 15px 5px;
}
.list_item_btn_area .icon_duplicate {
    background-position: 15px 5px;
}
.list_item_btn_area .icon_del{
    background-position: 15px 5px;
}
.list_item_btn_area .icon_edit{
    background-position: 15px 5px;
}
.icon_new {
    top:-10px;
    right: inherit;
	left:-10px;
}


}