@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexhei.css);


<!--html{font-family: 'Noto Serif,PT Serif','source-han-serif-tc','Songti TC','serif';}-->


#multimedia { box-sizing: border-box;position: relative; width: 100%;}
#multimedia .hkej_navMenuWrap_2014 { margin-top: -3px}
#multimedia a:hover{color: #555}

#multimedia .width940{width:940px; margin: auto; overflow: hidden; position: relative}

#multimedia .topnav { padding: 25px 0; clear: both;}
#multimedia .topnav .videologo{ float: left; padding-top: 20px}
#multimedia .topnav .socialicon{ float: right; padding-left: 15px; text-align: center; font-size: 0.9em;}
#multimedia .topnav .socialicon img{  }

#multimedia .topnav .socialicon .icon_fb { float: right; width:105px; overflow: hidden; box-sizing: border-box; margin-left:30px}
#multimedia .topnav .socialicon .icon_fb iframe { margin-left: 10px;  }
#multimedia .topnav .socialicon .icon_yt { float: left; width: 120px}
#multimedia .topnav .socialicon iframe{ padding-top: 5px;}


#multimedia .topnav .topmenu { clear: both; overflow: hidden; text-align: center; padding-top: 20px}
#multimedia .topnav .topmenu li{ letter-spacing: 1px; margin:0 5px ; display: inline; }
#multimedia .topnav .topmenu li a{ display: inline-block;text-align: center; margin: 5px 0;
    padding: 8px 15px; line-height: 1em;font-size: 17px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    border: solid 1px #444444;
    cursor: pointer; color: #444444}


#multimedia .sub1{color: #2a9ab2; }
#multimedia .sub2{color: #f29060; }
#multimedia .sub3{color: #6daa8c; }
#multimedia .sub4{color: #6b61a7; }
#multimedia .sub5{color: #f78173; letter-spacing:2px;}
#multimedia .sub6{color: #87cad6; }
#multimedia .sub7{color: #a0da9b; }


#multimedia .sub1 a:hover{color: #2a9ab2; }
#multimedia .sub2 a:hover{color: #f29060; }
#multimedia .sub3 a:hover{color: #6daa8c; }
#multimedia .sub4 a:hover{color: #6b61a7; }
#multimedia .sub5 a:hover{color: #f78173; }
#multimedia .sub6 a:hover{color: #87cad6; }
#multimedia .sub7 a:hover{color: #a0da9b; }


#multimedia .topnav .topmenu li.sub1 a{border: solid 1px #2a9ab2; }
#multimedia .topnav .topmenu li.sub2 a{border: solid 1px #f29060; }
#multimedia .topnav .topmenu li.sub3 a{border: solid 1px #6daa8c; }
#multimedia .topnav .topmenu li.sub4 a{border: solid 1px #6b61a7;}
#multimedia .topnav .topmenu li.sub5 a{border: solid 1px #f78173; }
#multimedia .topnav .topmenu li.sub6 a{border: solid 1px #87cad6;}
#multimedia .topnav .topmenu li.sub7 a{border: solid 1px #a0da9b; }
#multimedia .topnav .topmenu li.sub1 a:hover{color:#2a9ab2; }
#multimedia .topnav .topmenu li.sub2 a:hover{color:#f29060; }
#multimedia .topnav .topmenu li.sub3 a:hover{color:#6daa8c; }
#multimedia .topnav .topmenu li.sub4 a:hover{color:#6b61a7; }
#multimedia .topnav .topmenu li.sub5 a:hover{color:#f78173; }
#multimedia .topnav .topmenu li.sub6 a:hover{color:#87cad6; }
#multimedia .topnav .topmenu li.sub7 a:hover{color:#a0da9b; }


#multimedia .fea_video .feature_window .swiper-container .text .sub1{
	color:white;
	background-color:#2a9ab2;
	padding:2px 5px;
}

#multimedia .fea_video .feature_window .swiper-container .text .sub2{
	color:white;
	background-color:#f29060;
	padding:2px 5px;
}

#multimedia .fea_video .feature_window .swiper-container .text .sub3{
	color:white;
	background-color:#6daa8c;
	padding:2px 5px;
}

#multimedia .fea_video .feature_window .swiper-container .text .sub4{
	color:white;
	background-color:#6b61a7;
	padding:2px 5px;
}

#multimedia .fea_video .feature_window .swiper-container .text .sub5{
	color:white;
	background-color:#f78173;
	padding:2px 5px;
}

#multimedia .fea_video .feature_window .swiper-container .text .sub6{
	color:white;
	background-color:#87cad6;
	padding:2px 5px;
}

#multimedia .fea_video .feature_window .swiper-container .text .sub7{
	color:white;
	background-color:#a0da9b;
	padding:2px 5px;
}

#multimedia .mobilesite .feature_window .swiper-container .text .subtext .sub1{ 
	color:white;
	background-color:#2a9ab2;
	vertical-align:bottom;
}

#multimedia .mobilesite .feature_window .swiper-container .text .subtext .sub2{ 
	color:white;
	background-color:#f29060;
		vertical-align:bottom;
}

#multimedia .mobilesite .feature_window .swiper-container .text .subtext .sub3{ 
	color:white;
	background-color:#6daa8c;
}

#multimedia .mobilesite .feature_window .swiper-container .text .subtext .sub4{ 
	color:white;
	background-color:#6b61a7;
}

#multimedia .mobilesite .feature_window .swiper-container .text .subtext .sub5{ 
	color:white;
	background-color:#f78173;
}

#multimedia .mobilesite .feature_window .swiper-container .text .subtext .sub6{ 
	color:white;
	background-color:#87cad6;
}

#multimedia .mobilesite .feature_window .swiper-container .text .subtext .sub7{ 
	color:white;
	background-color:#a0da9b;
}



#multimedia .fea_video{  width: 100%; min-width: 940px; background-color: #333333; position: relative;  margin-bottom: 50px }
#multimedia .fea_video .feature_window{ width:100%; max-width: 875px;margin: auto; position:relative;}

#multimedia .fea_video .feature_window .swiper-container {
    width:100%;  margin: auto;  position: static;
    }
#multimedia .fea_video .feature_window .swiper-container .swiper-slide a{ display: inline-block}

#multimedia .fea_video .feature_window .swiper-container .text { background:url('../images/bg_gradient.png') center bottom no-repeat; position: absolute; bottom: 0; color: #ffffff; width: 100%; height: 218px;}
#multimedia .fea_video .feature_window .swiper-container .text .title{width:100%; max-width:815px; background:url('../images/iconplay.png') left bottom no-repeat; 
 bottom: 0; position: absolute; min-height: 80px; margin:20px 30px; box-sizing: border-box; color: #ffffff;}
#multimedia .fea_video .feature_window .swiper-container .text h2 { font-size: 38px; font-weight: bold; line-height:1.2em; padding-left: 120px; color: #ffffff;}
#multimedia .fea_video .feature_window .swiper-container .text .subtext {  padding-left: 120px; padding-bottom: 5px}

#multimedia .fea_video .feature_window .swiper-container img{width: 100%}

#multimedia .fea_video .feature_window .swiper-pagination { bottom: -30px; z-index: 999}

.swiper-pagination-bullet { width: 9px; height:9px;}
.swiper-pagination-bullet-active {  background: #00cdfe;}



#multimedia #contentWrap{ width: 100%; min-width: 940px; padding: 10px 0; margin: auto; overflow: hidden}
#multimedia #contentWrap .videolist{ width: 48%; padding: 10px 0; overflow: hidden;}
#multimedia #contentWrap .videolist:nth-child(odd) { float: left}
#multimedia #contentWrap .videolist:nth-child(even)  { float: right}

#multimedia #contentWrap .videolist h3 { font-size:30px; letter-spacing: 2px; line-height:38px; color: #444444;}
#multimedia #contentWrap .videolist h3 a{font-weight: bold;}
#multimedia #contentWrap .videolist ul { width: 100%; float: left}
#multimedia #contentWrap .videolist ul li { width: 48%; float: left; padding: 10px 0; }
#multimedia #contentWrap .videolist ul li:nth-child(2) { clear: both}
#multimedia #contentWrap .videolist ul li:nth-child(3) { float: right;}
#multimedia #contentWrap .videolist a { display: inline-block}
#multimedia #contentWrap .videolist .new { width: 100%; float: left; overflow: hidden; }
#multimedia #contentWrap .videolist .pic img { width: 100%; }
#multimedia #contentWrap .videolist .pic { position: relative}
#multimedia #contentWrap .videolist h4{font-size: 17px;   line-height:23px;height: 48px; overflow: hidden;}
#multimedia #contentWrap .videolist .pic .date { font-size: 0.8em; line-height: 1em; position: absolute; left: 0; bottom:0px; padding: 5px 10px; color: #ffffff; 
	background-color: rgba(255, 0, 0, 0.9);}
#multimedia #contentWrap .videolist .new h4{font-size: 26px; line-height:34px; height: 70px; overflow: hidden}


#multimedia #contentWrap .videolist .subtext { font-size: 13px; line-height: 25px}



#multimedia #contentWrap .videolist .mobile_videolist{ width: 100%; float: left; }
#multimedia #contentWrap .videolist .mobile_videolist .item { width: 48%; float: left; padding: 10px 0; }
#multimedia #contentWrap .videolist .mobile_videolist .item:nth-child(2) { clear: both}
#multimedia #contentWrap .videolist .mobile_videolist .item:nth-child(3) { float: right;}
#multimedia #contentWrap .videolist .mobile_videolist .new { width: 100% ; float: left; overflow: hidden; }


#multimedia #contentWrap .videolist .pic .time{
    position: absolute; right: 4px; top: 4px; 
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.80);
    padding: 2px 4px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1.2em;}

#multimedia #contentWrap .videolist .sub1 .date{background-color: rgba(42, 154, 178, 0.9);}
#multimedia #contentWrap .videolist .sub2 .date{background-color: rgba(242, 144, 96, 0.9);}
#multimedia #contentWrap .videolist .sub3 .date{background-color: rgba(109, 170, 140, 0.9);}
#multimedia #contentWrap .videolist .sub4 .date{background-color: rgba(107, 97, 167, 0.9);}
#multimedia #contentWrap .videolist .sub5 .date{background-color: rgba(247, 129, 115, 0.9);}
#multimedia #contentWrap .videolist .sub6 .date{background-color: rgba(135, 202, 214, 0.9);}
#multimedia #contentWrap .videolist .sub7 .date{background-color: rgba(160, 218, 155, 0.9);}

#multimedia #contentWrap .videolist .sub1 .subtext a{color: #2a9ab2; }
#multimedia #contentWrap .videolist .sub2 .subtext a{color: #f29060; }
#multimedia #contentWrap .videolist .sub3 .subtext a{color: #6daa8c; }
#multimedia #contentWrap .videolist .sub4 .subtext a{color: #6b61a7; }
#multimedia #contentWrap .videolist .sub5 .subtext a{color: #f78173; }
#multimedia #contentWrap .videolist .sub6 .subtext a{color: #87cad6; }
#multimedia #contentWrap .videolist .sub7 .subtext a{color: #a0da9b; }


#multimedia .desktop_ad{ text-align: center; margin: 40px auto;}
#multimedia .mobile_ad{ text-align: center; margin: 15px auto }
#multimedia .desktop_ad iframe {   float: none !important;}



/********** Listingg page **************************************************/

#multimedia .listing .topnav h1{font-size: 30px;
    letter-spacing: 2px;
    line-height: 38px; font-weight: bold; text-align: center}

#multimedia .listing .topnav .backbtn {  font-size: 15px; margin: 0 0 5px 10px; position: absolute; left: 0;}


#multimedia .listing .topnav .backbtn a{  display: inline-block}
#multimedia .listing .topnav .backbtn a i{ margin-bottom: 0}




#multimedia .listing .sub1 a:hover{color: #2a9ab2; }
#multimedia .listing .sub1 a.active{color: #2a9ab2;border: solid 3px #2a9ab2; }

#multimedia .listing .sub2 a:hover{color: #f29060; }
#multimedia .listing .sub2 a.active{color: #f29060;border: solid 3px #f29060; }

#multimedia .listing .sub3 a:hover{color: #6daa8c; }
#multimedia .listing .sub3 a.active{color: #6daa8c;border: solid 3px #6daa8c; }

#multimedia .listing .sub4 a:hover{color: #6b61a7; }
#multimedia .listing .sub4 a.active{color: #6b61a7;border: solid 3px #6b61a7; }

#multimedia .listing .sub5 a:hover{color: #f78173; }
#multimedia .listing .sub5 a.active{color: #f78173;border: solid 3px #f78173; }

#multimedia .listing .sub6 a:hover{color: #87cad6; }
#multimedia .listing .sub6 a.active{color: #87cad6;border: solid 3px #87cad6; }

#multimedia .listing .sub7 a:hover{color: #a0da9b; }
#multimedia .listing .sub7 a.active{color: #a0da9b;border: solid 3px #a0da9b; }

#multimedia .listing #contentWrap .videolist { width: 100%; padding-top: 0}
#multimedia .listing #contentWrap .videolist .mobile_videolist .item { width: 25%; padding:0 1% 2% 1%; box-sizing: border-box; height: 220px}
#multimedia .listing #contentWrap .videolist .mobile_videolist .row { overflow: hidden}

#multimedia .listing #contentWrap .videolist .mobile_videolist .item:nth-child(2){ clear: none}
#multimedia .listing #contentWrap .videolist .mobile_videolist .item:nth-child(3){ float:left;}


#multimedia .listing .videolist .loadmore{ width: 100%; text-align: center}
#multimedia .listing .videolist .loadmore button{ width: 100%; background: none; border: solid 1px #898989; color: #777777; line-height: 40px; font-size: 20px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;}
#multimedia .listing #contentWrap .videolist .loadmore button:hover{ background-color: #eee}


/********** Listingg page end**************************************************/



/********** article page **************************************************/

#multimedia .article .feature_window{ max-width: none}
#multimedia .article .play_video{ text-align: center; max-width: 875px; width: 100%; margin: auto}
#multimedia .article .play_video video{  width: 100%;display: inherit;}

#multimedia .article .fea_video {background-color: #000000;}
#multimedia .article .fea_video .feature_window .swiper-container .text
 { position: relative; background: none; background-color: #e5e5e5;  height: auto; padding:20px 10px; box-sizing: border-box; overflow: hidden}
#multimedia .article .fea_video .feature_window .swiper-container .text .title{ position: relative;margin: auto;background: none; max-width: 875px;}
#multimedia .article .fea_video .feature_window .swiper-container .text h2{color: #333333; padding: 0; margin-bottom: 10px}
#multimedia .article .fea_video .feature_window .swiper-container .text .subtext{ padding: 0}
#multimedia .article .fea_video .feature_window .swiper-container .text .info { float: right;  width: 610px;border-left: solid 1px #959595; padding-left: 25px; color: #333 }
#multimedia .article .fea_video .feature_window .swiper-container .text .shareicons { float: left}

#multimedia .article .fea_video .feature_window .swiper-container .text .info span{ color: #666666; margin-right: 15px}


#multimedia .article .text .info .content_text{
    padding-top: 20px; font-size: 1.1em }

#multimedia .article .text .info .content_text p{
padding: 0; margin:5px 0 10px 0; line-height: 1.5em}

#multimedia .article .text .info .content_text a{
 color: #000; text-decoration: underline; }
#multimedia .article .text .info .content_text a:hover{
 color: #666}


#multimedia .article .text .tags{ font-size: 15px; padding-top: 15px}
#multimedia .article .text .tags .tag_btn{display: inline-block;
 color: #444444; line-height: 20px; padding:4px 10px; box-sizing: border-box; letter-spacing: 2px;
    margin: 6px 4px;
    border: solid 1px #898989;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px; 
}


#multimedia .article #contentWrap .videolist { width: 100%; padding-top: 0; float: none; padding-bottom: 15px;position: relative;}
#multimedia .article #contentWrap .videolist .mobile_videolist { width: 95%; margin: auto; float: none; overflow: hidden; padding-top:8px; max-height: 200px; display: none}
#multimedia .article #contentWrap .videolist  .slick-slider{ height: auto; max-height: none}

#multimedia .article #contentWrap .videolist .mobile_videolist .item { padding:0; box-sizing: border-box; width: auto; margin: 0;  width: 20%; }
#multimedia .article #contentWrap .videolist .mobile_videolist .item .text{ width: 100%;  box-sizing: border-box;  padding: 0  6px}

#multimedia .article #contentWrap .videolist .mobile_videolist .item:nth-child(1) { padding-left: 0;}
#multimedia .article #contentWrap .videolist .mobile_videolist .item:nth-child(2) { clear:none}
#multimedia .article #contentWrap .videolist .mobile_videolist .item:nth-child(3) { float:left;}

#multimedia .article #contentWrap .videolist .mobile_videolist .slick-prev,
#multimedia .article #contentWrap .videolist .mobile_videolist .slick-next
{ z-index: 999}
#multimedia .article #contentWrap .videolist .mobile_videolist .slick-prev{left: 0}
#multimedia .article #contentWrap .videolist .mobile_videolist .slick-next{right: 0}

#multimedia .article #contentWrap .videolist h3 { padding:10px 5px 5px 5px}
#multimedia .article #contentWrap .videolist h4 { height:71px}
#multimedia .article #contentWrap .videolist h4.swipe_header{ height: auto; padding-bottom: 5px;}


#multimedia .article #contentWrap .videolist .sub1_border { border-right: solid 1px #2a9ab2; }
#multimedia .article #contentWrap .videolist .sub2_border{border-right: solid 1px #f29060; }
#multimedia .article #contentWrap .videolist .sub3_border{border-right: solid 1px #6daa8c; }
#multimedia .article #contentWrap .videolist .sub4_border{border-right: solid 1px #6b61a7;}
#multimedia .article #contentWrap .videolist .sub5_border{border-right: solid 1px #f78173; }
#multimedia .article #contentWrap .videolist .sub6_border{border-right: solid 1px #87cad6;}
#multimedia .article #contentWrap .videolist .sub7_border{border-right: solid 1px #a0da9b; }

#multimedia .article #contentWrap .videolist .swiper-slide{ width: 18%; margin-right: 15px}
#multimedia .article #contentWrap .videolist .swiper-slide .text{display: none}
#multimedia .article #contentWrap .videolist .swiper-button-next {background-image:url(../images/arr_next.png);
    background-size: 30px 30px; width: 33px;
}
#multimedia .article #contentWrap .videolist .swiper-button-prev{background-image:url(../images/arr_prev.png);
    background-size: 30px 30px; width: 33px;
}
#multimedia .article #contentWrap .videolist .swiper-button-prev.swiper-button-disabled, 
#multimedia .article #contentWrap .videolist .swiper-button-next.swiper-button-disabled{ opacity: 0;}


#multimedia .article .topnav{ padding: 0 0 5px 0}
#multimedia .article .topnav .topmenu{ text-align: left}

/********** article page end**************************************************/













#footerWrap_icon_v2_2014 iframe{
           float:none;
}



<!--LREC Fixed-->
.fea_content_table .ad-300, .fea_content_table .ad-300-2, .fea_content_table .ad-300-3
{float:none; display:block}
<!--LREC Fixed-->
	
.tk-source-han-serif-tc

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:400;src:local("Noto Serif"),local("NotoSerif"),url(https://fonts.gstatic.com/s/notoserif/v4/Q47Ro23nlKqZrOLipd3-SwsYbbCjybiHxArTLjt7FRU.woff2) format("woff2");unicode-range:u+0460-052f,u+20b4,u+2de0-2dff,u+a640-a69f}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:400;src:local("Noto Serif"),local("NotoSerif"),url(https://fonts.gstatic.com/s/notoserif/v4/qkE6YsKPRiYUugBb1_QwHAsYbbCjybiHxArTLjt7FRU.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:400;src:local("Noto Serif"),local("NotoSerif"),url(https://fonts.gstatic.com/s/notoserif/v4/N2U74xxQEyaTBF6QLZRr1AsYbbCjybiHxArTLjt7FRU.woff2) format("woff2");unicode-range:u+1f??}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:400;src:local("Noto Serif"),local("NotoSerif"),url(https://fonts.gstatic.com/s/notoserif/v4/1_daFS3X6gkNOcmGmHl7UgsYbbCjybiHxArTLjt7FRU.woff2) format("woff2");unicode-range:u+0370-03ff}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:400;src:local("Noto Serif"),local("NotoSerif"),url(https://fonts.gstatic.com/s/notoserif/v4/G-mm5mDezDSs-RvEL7XAEAsYbbCjybiHxArTLjt7FRU.woff2) format("woff2");unicode-range:u+0102-0103,u+1ea0-1ef9,u+20ab}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:400;src:local("Noto Serif"),local("NotoSerif"),url(https://fonts.gstatic.com/s/notoserif/v4/fVu1p3782bqS2z-CaJvp9gsYbbCjybiHxArTLjt7FRU.woff2) format("woff2");unicode-range:u+0100-024f,u+1e??,u+20a0-20ab,u+20ad-20cf,u+2c60-2c7f,u+a720-a7ff}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:400;src:local("Noto Serif"),local("NotoSerif"),url(https://fonts.gstatic.com/s/notoserif/v4/eCpfeMZI7q4jLksXVRWPQwzyDMXhdD8sAj6OAJTFsBI.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2212,u+2215}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:700;src:local("Noto Serif Bold"),local("NotoSerif-Bold"),url(https://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPbllaL-ufMOTUcv7jfgmuJg.woff2) format("woff2");unicode-range:u+0460-052f,u+20b4,u+2de0-2dff,u+a640-a69f}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:700;src:local("Noto Serif Bold"),local("NotoSerif-Bold"),url(https://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPZsnFT_2ovhuEig4Dh-CBQw.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:700;src:local("Noto Serif Bold"),local("NotoSerif-Bold"),url(https://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPRNdjSauc05SgiTkzms8YJM.woff2) format("woff2");unicode-range:u+1f??}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:700;src:local("Noto Serif Bold"),local("NotoSerif-Bold"),url(https://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPSUr6EwJsXdKEU-HN-7gTAs.woff2) format("woff2");unicode-range:u+0370-03ff}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:700;src:local("Noto Serif Bold"),local("NotoSerif-Bold"),url(https://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPXv4bDVR720piddN5sbmjzs.woff2) format("woff2");unicode-range:u+0102-0103,u+1ea0-1ef9,u+20ab}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:700;src:local("Noto Serif Bold"),local("NotoSerif-Bold"),url(https://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPTrEaqfC9P2pvLXik1Kbr9s.woff2) format("woff2");unicode-range:u+0100-024f,u+1e??,u+20a0-20ab,u+20ad-20cf,u+2c60-2c7f,u+a720-a7ff}

@font-face{font-family:Noto Serif;font-style:normal;font-display:swap;font-weight:700;src:local("Noto Serif Bold"),local("NotoSerif-Bold"),url(https://fonts.gstatic.com/s/notoserif/v4/lJAvZoKA5NttpPc9yc6lPWaVI6zN22yiurzcBKxPjFE.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2212,u+2215}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:400;src:local("Noto Serif Italic"),local("NotoSerif-Italic"),url(https://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNzw7aC6SjiAOpAWOKfJDfVRY.woff2) format("woff2");unicode-range:u+0460-052f,u+20b4,u+2de0-2dff,u+a640-a69f}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:400;src:local("Noto Serif Italic"),local("NotoSerif-Italic"),url(https://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNzxdwxCXfZpKo5kWAx_74bHs.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:400;src:local("Noto Serif Italic"),local("NotoSerif-Italic"),url(https://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNz56vnaPZw6nYDxM4SVEMFKg.woff2) format("woff2");unicode-range:u+1f??}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:400;src:local("Noto Serif Italic"),local("NotoSerif-Italic"),url(https://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNz_y1_HTwRwgtl1cPga3Fy3Y.woff2) format("woff2");unicode-range:u+0370-03ff}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:400;src:local("Noto Serif Italic"),local("NotoSerif-Italic"),url(https://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNz_grLsWo7Jk1KvZser0olKY.woff2) format("woff2");unicode-range:u+0102-0103,u+1ea0-1ef9,u+20ab}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:400;src:local("Noto Serif Italic"),local("NotoSerif-Italic"),url(https://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNz4joYw3YTyktCCer_ilOlhE.woff2) format("woff2");unicode-range:u+0100-024f,u+1e??,u+20a0-20ab,u+20ad-20cf,u+2c60-2c7f,u+a720-a7ff}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:400;src:local("Noto Serif Italic"),local("NotoSerif-Italic"),url(https://fonts.gstatic.com/s/notoserif/v4/HQXBIwLHsOJCNEQeX9kNzxampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2212,u+2215}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:700;src:local("Noto Serif Bold Italic"),local("NotoSerif-BoldItalic"),url(https://fonts.gstatic.com/s/notoserif/v4/Wreg0Be4tcFGM2t6VWytvFPfeBX0b_nUXzRxYCltCF0.woff2) format("woff2");unicode-range:u+0460-052f,u+20b4,u+2de0-2dff,u+a640-a69f}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:700;src:local("Noto Serif Bold Italic"),local("NotoSerif-BoldItalic"),url(https://fonts.gstatic.com/s/notoserif/v4/Wreg0Be4tcFGM2t6VWytvIS3435hDhFFCA6hA_HcfZQ.woff2) format("woff2");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:700;src:local("Noto Serif Bold Italic"),local("NotoSerif-BoldItalic"),url(https://fonts.gstatic.com/s/notoserif/v4/Wreg0Be4tcFGM2t6VWytvKpkxQ1nyBMhaPnv_ZMXNdQ.woff2) format("woff2");unicode-range:u+1f??}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:700;src:local("Noto Serif Bold Italic"),local("NotoSerif-BoldItalic"),url(https://fonts.gstatic.com/s/notoserif/v4/Wreg0Be4tcFGM2t6VWytvOrw_3d4vbmST0Hz9sysxkQ.woff2) format("woff2");unicode-range:u+0370-03ff}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:700;src:local("Noto Serif Bold Italic"),local("NotoSerif-BoldItalic"),url(https://fonts.gstatic.com/s/notoserif/v4/Wreg0Be4tcFGM2t6VWytvBWzg2zaPmhUBtv9M77358I.woff2) format("woff2");unicode-range:u+0102-0103,u+1ea0-1ef9,u+20ab}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:700;src:local("Noto Serif Bold Italic"),local("NotoSerif-BoldItalic"),url(https://fonts.gstatic.com/s/notoserif/v4/Wreg0Be4tcFGM2t6VWytvEqWMeizceScn2Xpn1ZpsKI.woff2) format("woff2");unicode-range:u+0100-024f,u+1e??,u+20a0-20ab,u+20ad-20cf,u+2c60-2c7f,u+a720-a7ff}

@font-face{font-family:Noto Serif;font-style:italic;font-display:swap;font-weight:700;src:local("Noto Serif Bold Italic"),local("NotoSerif-BoldItalic"),url(https://fonts.gstatic.com/s/notoserif/v4/Wreg0Be4tcFGM2t6VWytvMhHwsiXhsDb0smKjAA7Bek.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2212,u+2215}




/********** mobile VIEW **************************************************/

#m-hkej-multimedia {width: 100%; line-height: normal; margin: auto; font-size: 22.00px; position: relative}

#multimedia .mobilesite { position: relative;overflow: hidden; }
#multimedia .mobilesite .logo{ 
    height: 44px;  top:0;
    position: fixed; width: 100%;
    border-bottom: 1px solid #3b9366; 
    z-index: 99;
    /*background:url('../images/bg_mobile_menu.jpg') 0 0 repeat ;*/
	
}


#multimedia .mobilesite .btn_login {
    z-index: 1;
    width: 50px;
    height: 28px;
    float: right;
    padding-top: 13px;
    cursor: pointer;
    position: relative; text-align: center; }

#multimedia .mobilesite .btn_login a{ display: inline-block}



#multimedia .mobilesite input.listing-box[type=checkbox]:checked + label.feature-mobile-menu{ background-image: url(../images/menu_btn.png);}

#multimedia .mobilesite label.feature-mobile-menu { height:44px; background-color: transparent;}

#multimedia .mobilesite .mobile_menu{
position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    display: none;
     background-color: #0caa60;
}

#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list{ 
    background-color: #ffffff;
    z-index: 5;
    width: 100%;
    margin: 0;
    padding:10px 10px 5px 20px; margin-bottom: 0;
    list-style: none;
    box-sizing: border-box;
    border: solid 20px #ffffff;
	border-bottom: 0px;
    -webkit-border-top-left-radius: 34px;
    -moz-border-top-left-radius: 34px;
    border-top-left-radius: 34px; 
     -webkit-border-top-right-radius: 34px;
    -moz-border-top-right-radius: 34px;
    border-top-right-radius: 34px; 
    
    }

#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list li{ font-weight: bold; font-size: 26px; width: 100%; border-bottom: 1px solid #c9c9c9;}
#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list li a {display: inline-block;
background:url('../images/mobile_menuarr.png') right center no-repeat ; width: 100%; background-size: 20px 20px;
 color: #3e3e54; padding-top:12px}
#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list li a.active {display: inline-block;
background:url('../images/mobile_menuarr2.png') right center no-repeat ;  background-size: 20px 20px; color: #0caa60;
}

#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list li a:hover{opacity:1}

#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list li li{ font-weight:normal;font-size: 21px; list-style: none; float: left; width: 49%; padding: 5px; box-sizing: border-box;border: 0 }

#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list li ul{ clear: both; overflow: hidden; padding: 5px 0 20px 30px; display: none}
#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list li li a{  color:#666666;background: none; padding-top: 0; }
#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list li li a:hover,
#multimedia .mobilesite .mobile_menu ul.feature-mobile-menu-list li li a.active{  color:#0caa60;background: none }




#multimedia .mobilesite .mobile_menu .menuclose { position: relative; float: right;}
#multimedia .mobilesite .mobile_menu .menuclose input.listing-box2{ display: none}

#multimedia .mobilesite label.feature-mobile-menuclose{ 
    background-image: url(../images/menu_btn_cross.jpg);
    right: 0;width: 44px; height: 44px; z-index: 99;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    top: 0;}
#multimedia .mobilesite .mobile_menu .mobile_logo { text-align: center}
#multimedia .mobilesite .mobile_menu .mobile_logo img{ width:55px; padding: 10px;}

#multimedia .mobilesite .mobile_menu .mobile_user { clear: both; overflow: hidden; padding: 10px; box-sizing: border-box}
#multimedia .mobilesite .mobile_menu .username { padding-top: 6px;}
#multimedia .mobilesite .mobile_menu .username a{
    background: url('../images/btn_login.png') center 0 no-repeat ; padding-top: 25px; background-size:  20px 20px; color: #ffffff; font-size: 16px; display: inline-block}

#multimedia .mobilesite .mobile_menu .usernamelogin { margin: 0 10px;}
#multimedia .mobilesite .mobile_menu .usernamelogin a{
    background: url('../images/btn_login.png') center 50% no-repeat ; background-size:  20px 20px; display:inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius:50%;
    border-radius: 50%;
    width: 50px; height: 50px; display: inline-block; border: 1px solid #fff;}

 
#multimedia .mobilesite .mobile_menu .userbtn { float: right;}
#multimedia .mobilesite .mobile_menu .userbtn span {
    background-color: #3b5284; 
    display:inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius:50%;
    border-radius: 50%;
    width: 50px; height: 50px; text-align: center; padding: 2px;  overflow: hidden; margin-left: 10px;
}

#multimedia .mobilesite .mobile_menu .userbtn a{
    color: #ffffff; font-size: 15px; line-height: 18px; display:table-cell; width:30px; height: 50px;vertical-align: middle;   padding: 0 10px;}


#multimedia .mobilesite .mobile_menu .hkejinfo{background-color: #ffffff;width: 100%; padding:10px 30px 15px 40px; font-size: 20px; font-weight:bold; overflow: hidden;} 
#multimedia .mobilesite .mobile_menu .hkejinfo .hkejlogos { padding-top: 40px;}
#multimedia .mobilesite .mobile_menu .hkejinfo .hkejlogos img{ height: 25px; width: auto; margin:10px 20px 10px 0;}
#multimedia .mobilesite .mobile_menu .hkejinfo a{ color: #555}

#multimedia .mobilesite .mobile_menu .menufooter{background-color: #f6f6f6;width: 100%;
    height: 100%;; text-align: center; padding: 15px 0}
#multimedia .mobilesite .mobile_menu .menufooter img{width:40px;margin: 10px}

#multimedia .mobilesite .cat-wrap .widget-wrap{ padding: 0; top: -10px;}

#multimedia .mobilesite .logo a.icon-logo {
    height: 44px;
    background-image: url(../images/logo_video_m.png);
    background-size: 4.444em;
    background-repeat: no-repeat;
    background-position: center 10px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;}






#multimedia .mobilesite .wrapper_content{ width: 100%;  margin: auto; padding: 10px 5px 10px 5px; box-sizing: border-box;position: relative; }


#multimedia .mobilesite .feature_window{ width:100%;margin: auto;  z-index: 1;position:relative; overflow: hidden; padding-top: 44px;}

#multimedia .mobilesite .feature_window .swiper-container {
    width:100%;  margin: auto;  position:relative; overflow:inherit;
    }

#multimedia .mobilesite .feature_window .swiper-container .swiper-wrapper { height: auto}
#multimedia .mobilesite .feature_window .swiper-container .swiper-slide a{ display: inline-block}
#multimedia .mobilesite .feature_window .swiper-container .swiper-slide  img{width: 100% }
#multimedia .mobilesite .feature_window .swiper-container .swiper-slide { height: auto}

#multimedia .mobilesite .feature_window .swiper-container .text { background:url('../images/bg_gradient_mobile.png') center bottom repeat-x; position: absolute; bottom: 0; color: #ffffff; width: 100%; min-height: 150px;}


#multimedia .mobilesite .feature_window .swiper-container .text table{width:100%; 
 bottom: 0;  position: absolute;  padding:15px 15px 4px 15px; box-sizing: border-box; color: #ffffff;}
#multimedia .mobilesite .feature_window .swiper-container .text table td{ vertical-align:middle}

#multimedia .mobilesite .feature_window .swiper-container .text table td:nth-child(1){ width: 15%; text-align: left}
#multimedia .mobilesite .feature_window .swiper-container .text table td:nth-child(2){ width: 85%; padding-left: 10px;}
#multimedia .mobilesite .feature_window .swiper-container .text table td:nth-child(1) img { width: 100%}

#multimedia .mobilesite .feature_window .swiper-container .text h2 { margin-bottom: 0; margin-top:4px; }
#multimedia .mobilesite .feature_window .swiper-container .text h2 a{ font-size:24px; font-weight: bold; line-height:1.2em;color: #ffffff; margin-bottom: 5px;}

#multimedia .mobilesite .feature_window .swiper-container .text .subtext a{ font-size: 12px; height:auto; vertical-align:bottom;}

#multimedia .mobilesite .feature_window .swiper-container .text .subtext span{ font-size: 12px; height:auto; vertical-align:bottom;padding: 2px 5px;}

#multimedia .mobilesite .feature_window .swiper-container .swiper-pagination{ position: relative; bottom: auto; padding: 15px 0 5px 0}

#multimedia .mobilesite .feature_window .swiper-container .swiper-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    margin: 0 15px;
}



#multimedia .mobilesite .socialicon{ margin: 15px auto 0 auto; text-align: center; display: table; font-size: 14px}
#multimedia .mobilesite .socialicon a { margin: 0 15px}
#multimedia .mobilesite .socialicon span { float: left;}

#multimedia .mobilesite .videolist .mobile_videolist{max-height: 200px;  overflow: hidden; position: relative; margin-bottom: 10px}
#multimedia .mobilesite .videolist  .slick-slider{ height: auto; max-height: none}

#multimedia .mobilesite .videolist h3 { padding: 10px 0; margin: 0; font-size:24px; letter-spacing: 2px; line-height: 30px; margin-bottom: 0; color: #444444; font-weight: normal}
#multimedia .mobilesite .videolist h3 a {font-weight:bold}
#multimedia .mobilesite .videolist .pic {  position: relative;}
#multimedia .mobilesite .videolist .mobile_videolist .item { width: 28%; padding:0; box-sizing: border-box; float: left;}

#multimedia .mobilesite .videolist .mobile_videolist .item  img{ width: 100%;}
#multimedia .mobilesite .videolist .mobile_videolist .item .text {   box-sizing: border-box; padding-right: 10px;}
#multimedia .mobilesite .videolist h4 {  font-size: 18px;  line-height: 23px; margin: 5px 0; overflow: hidden;}
#multimedia .mobilesite .videolist .pic .date {
    font-size: 12px;
    line-height: 1em;
    position: absolute;
    left: 0;
    bottom: 0px;
    padding: 5px 10px;
    color: #ffffff; z-index: 2;    background-color: rgba(255, 0, 0, 0.9);}
#multimedia .mobilesite .videolist .subtext {
    font-size: 13px;
    line-height: 25px;
}



#multimedia .mobilesite .videolist .pic .time{
    position: absolute; right: 4px; top: 4px; 
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.80);
    padding: 2px 4px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2em;}

#multimedia .mobilesite .videolist .sub1 .date{background-color: rgba(42, 154, 178, 0.9);}
#multimedia .mobilesite .videolist .sub2 .date{background-color: rgba(242, 144, 96, 0.9);}
#multimedia .mobilesite .videolist .sub3 .date{background-color: rgba(109, 170, 140, 0.9);}
#multimedia .mobilesite .videolist .sub4 .date{background-color: rgba(107, 97, 167, 0.9);}
#multimedia .mobilesite .videolist .sub5 .date{background-color: rgba(247, 129, 115, 0.9);}
#multimedia .mobilesite .videolist .sub6 .date{background-color: rgba(135, 202, 214, 0.9);}
#multimedia .mobilesite .videolist .sub7 .date{background-color: rgba(160, 218, 155, 0.9);}

#multimedia .mobilesite .videolist .sub1 .subtext a{color: #2a9ab2; }
#multimedia .mobilesite .videolist .sub2 .subtext a{color: #f29060; }
#multimedia .mobilesite .videolist .sub3 .subtext a{color: #6daa8c; }
#multimedia .mobilesite .videolist .sub4 .subtext a{color: #6b61a7; }
#multimedia .mobilesite .videolist .sub5 .subtext a{color: #f78173; }
#multimedia .mobilesite .videolist .sub6 .subtext a{color: #87cad6; }
#multimedia .mobilesite .videolist .sub7 .subtext a{color: #a0da9b; }


#multimedia .mobilesite .article  { margin-top:44px}
#multimedia .mobilesite .article .videoplayer { padding-bottom:20px;}
#multimedia .mobilesite .article .videoplayer video{width: 100%;    margin: auto;}
#multimedia .mobilesite .article .sub_nav { padding: 5px 0 5px 10px; font-size: 15px; }
#multimedia .mobilesite .article .videoplayer .text { padding:0 10px; box-sizing: border-box;}
#multimedia .mobilesite .article .videoplayer .text h2{ color: #333;font-size:26px; line-height: 35px; margin-bottom: 0; margin-top: 8px;}
#multimedia .mobilesite .article .videoplayer .text span{font-size: 13px; margin-right:10px;}
#multimedia .mobilesite .article .videoplayer .shareicons{margin:10px 0;}


#multimedia .mobilesite .listing .topnav .backbtn {  font-size: 15px; margin: 0 0 5px 10px; position: absolute; left: 0; line-height: normal;}

#multimedia .mobilesite .listing .topnav .backbtn a{  display: inline-block}
#multimedia .mobilesite .listing .topnav .backbtn a i{ margin-bottom: 0}


#multimedia .mobilesite .listing .topnav { padding:0 0 10px 0;}
#multimedia .mobilesite .listing .topnav h1{ padding-top: 0; margin-top:0px; margin-bottom: 0px; font-size: 24px;}
#multimedia .mobilesite .listing .topnav .topmenu { padding-top: 5px}
#multimedia .mobilesite .listing .topnav .topmenu ul{  padding: 0; margin-bottom: 0; margin-top: 10px;}
#multimedia .mobilesite .listing .topnav .topmenu li a {font-size: 15px}

#multimedia .mobilesite .listing .mobile_videolist{ max-height: none; width: 100%}
#multimedia .mobilesite .listing .mobile_videolist .row { overflow: hidden; margin-bottom: 15px;}
#multimedia .mobilesite .listing .mobile_videolist .item{ width: 50%; }
#multimedia .mobilesite .listing .mobile_videolist .item .text { padding: 0 8px}

#multimedia .mobilesite .videolist { width: 100%; padding: 10px; box-sizing: border-box;overflow: hidden; position: relative}
#multimedia .mobilesite .videolist .swiper-wrapper{ height: auto; }
#multimedia .mobilesite .videolist .swiper-wrapper .swiper-slide {width: 40%; margin-right: 15px;height: auto}
#multimedia .mobilesite .videolist .swiper-wrapper .swiper-slide .text{ display: none}
#multimedia .mobilesite .videolist .item_swiper .pic img{ width: 100%;}

#multimedia .mobilesite .top44{ margin-top: 44px}




#multimedia .mobilesite .article .text .info .content_text{
font-size: 1em}

#multimedia .mobilesite .article .text .info .content_text p{
    
 padding-top: 5px}

.jw-slider-time .jw-cue { background-color:rgba(33,33,33,0) !important; }

@media screen and  (max-width: 414px) {
    #multimedia .mobilesite .feature_window .swiper-container .text {    min-height: 105px;}
    #multimedia .mobilesite .feature_window .swiper-container .text h2 { font-size: 1.3em; line-height: 1.3em}
}

@media screen and  (max-width: 375px) {
 #multimedia .mobilesite .listing .mobile_videolist h4,
  #multimedia .mobilesite .videolist h4 { font-weight: normal}
}