#nav-wrap {display: block;}

.slicknav_menu {display:none;}
.slicknav_btn { position: relative; display: block; vertical-align: middle; cursor: pointer; }
.slicknav_menu  .slicknav_menutxt { display: block; line-height: 21px; float: left; }
.slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; display:none }
.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_nav { clear: both }
.slicknav_nav ul,.slicknav_nav li { display: block }
.slicknav_nav span { float:right; height:auto; padding:0px 10px 0px 0px; margin:0px; }
.slicknav_nav .slicknav_item { cursor: pointer; }
.slicknav_nav .slicknav_row { display: block;  }
.slicknav_nav a { display: block }

.slicknav_nav .slicknav_item a,.slicknav_nav .slicknav_parent-link a { display: inline }
.slicknav_menu:before,.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }
/* IE6/7 support */
.slicknav_menu { *zoom: 1 }
.slicknav_menu {font-size:15px;}
/* Button */
.slicknav_btn { margin:0px; width: 100%; height: 12px; background-position:15px 50%;padding: 15px 15px;cursor: pointer;display: block; margin-top: 10px; margin-bottom: 10px;}
.slicknav_btn.slicknav_collapsed {background: #241571  url(http://www.ccpass.edu.hk/mobilepage/images/mobile/menu-icon_white.png) no-repeat; background-position:10px 50%;}
.slicknav_btn.slicknav_open {background: #ffa200 url(http://www.ccpass.edu.hk/mobilepage/images/mobile/menu-icon_white.png) no-repeat; background-position:10px 50%;}
li.slicknav_collapsed {	background: none; background-position:15px 50%;	}
li.slicknav_open {	background: none; background-position:15px 50%;	}

/* Button Text */
.slicknav_menu  .slicknav_menutxt{padding-left:36px; font-size:20px; color:#fff; line-height:12px; text-transform: uppercase}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {background-color: #f5f5f5;}
.slicknav_menu {  padding:0;}

.slicknav_nav { color:#fff; margin:0 10px; padding:0;font-size:15px; box-shadow:0 0 3px rgba(0,0,0,.2)}
.slicknav_nav ul { margin:0; list-style: none; background:#fff; overflow:hidden; padding:0px;}
.slicknav_nav li { border-bottom:1px solid rgba(0,0,0,.2);}
.slicknav_nav a{padding:10px 10px;margin:0px;text-decoration:none;color:#333;}
.slicknav_nav li ul li { border-bottom:0px solid #ddd;}


.slicknav_nav li ul li a { padding:7px 20px; font-size:16px;}
.slicknav_nav li ul li ul li a { padding:7px 35px; font-size:13px;}
.slicknav_nav li ul li ul li ul li a { padding:7px 50px; }

.slicknav_nav .slicknav_item a{ padding:0; margin:0}
.slicknav_nav .slicknav_parent-link a { padding:0; margin:0}
.slicknav_nav .slicknav_parent-link:hover a , .slicknav_nav .slicknav_item:hover a {}
.slicknav_nav .slicknav_open ul li a { color:#333;}
.slicknav_nav .slicknav_open ul li a:hover {}
.slicknav_nav .slicknav_open ul li a.current:hover { color:#333}

@media screen and (max-width: 800px) {
html,body { font-size:15px; line-height:21px; }
#nav-wrap {display:none;}
.js .slicknav_menu {display:block;}
.screen{ min-width:300px; max-width:780px; padding:0px 0px;}
.cd-top { bottom: 5px;  right: 5px; } 
.container { margin-top: 0;
padding-bottom: 0px;
height: auto; padding:0;
width: 100%;
min-height: 100%;
max-width: 100%;
position: relative;
box-shadow: none;
background: #fff;
min-width: 100%;
overflow:hidden}

.header { text-align:center; }
.header .logo .logo_img { width:100%; text-align: center }
.header .logo .logo_img img{ height:65px;}

.header .logo .logo_txt { float:left; color: #fff; margin:5px 0 0 0px; width:100%; text-align: center }

.upper_footer .footer_logo{ float:left  ; width:100%;}

.upper_footer .footer_info { margin: 0; width: 100%; float:right; }
/* Header */
#home .container{ padding:0px 0; margin:0px !important;}
.content { position:relative; float:left; width:99% !important; }

#jssor{  min-width:680px; margin:0px auto; text-align: center;}

#home .banner_area { margin:0	;}
.sentense .area{margin: 5px ; padding:5px; }
.sentense .title{ display:none;}


#training .viewport{width: 80%;height: 300px; display:flex !important}
#training .overview li { width:252px; margin:0 15px; float: left}
	
#training .overview li .cover{width: auto;}
#training .overview li p{font-size: 14px;padding: 0 15px 15px;}
#training .prev, #training .next{top: 120px;}
#training .next { right:0px}
#training .prev { left:-10px}

.latest_events_area .content { font-size:18px; line-height:19px;}
#jssor_1 img { min-height: 180px !important;}

.latest_new { width:100%; margin:0; }
.latest_award{ width:100%; margin:0px 0 20px 0}
.latest_award_area ul li { position:relative; float:left; width:100%; }
.latest_award_area ul li .icon_star { position:relative; float:left; width:5%; margin-top:10px; margin-right:5px; }
.latest_award_area ul li .icon_bullet { position:relative; float:left; width:5%; margin-top:10px; margin-right:5px;  }
.latest_award_area ul li .text_info { position:relative; float:left; width:80%; }

.latest_media{ width:100%; margin:0px 0 20px 0}
.latest_media_area ul li { position:relative; float:left; width:100%; }
.latest_media_area ul li .icon_star { position:relative; float:left; width:5%; margin-top:10px; margin-right:5px; }
.latest_media_area ul li .icon_bullet { position:relative; float:left; width:5%; margin-top:10px; margin-right:5px;  }
.latest_media_area ul li .text_info { position:relative; float:left; width:80%; }

.latest_video{ width:100%; margin:0; }
.latest_video_area ul li { position:relative; float:left; width:50%; }
.latest_video_area ul li .icon_star { position:relative; float:left; width:5%; margin-top:10px; margin-right:5px; }
.latest_video_area ul li .icon_bullet { position:relative; float:left; width:5%; margin-top:10px; margin-right:5px;  }
.latest_video_area ul li .text_info { position:relative; float:left; width:80%; }

.latest_events { width: 100%; margin: 50px 0; }
.latest_events_area {}
.latest_events_area ul{position:relative; float:left; margin:20px 0px 0px 0px; !important;}
.latest_events_area ul li { float: left; width:100%; margin:0;}
.latest_events_area ul li a {margin-top: 20px; margin-bottom:0px; margin-left:-10px !important;}
.latest_events_area ul li:nth-child(2n+1){ clear:both;}

.Userful_link_inside{ position:relative; float:left; padding-top:0; margin-top:10px;}
.footer_info_top { height:31px}

.latest_events .more_area a{ background-position: 0px 0px !important;}
.latest_events .more_area a:hover { background-position: 0px 0px !important;}
.upper_footer .footer_info ul li { width:100%}
	
.left_area{margin: 11px 0 0 0;}
.latest_award .title span{ left:7px}

.footer_info_right ul li + li{ width:100%}
.footer_info_right ul li + li+li{ width:100%}

.footer_info_right  { width:100%}
.school{ display:none}
.footer_info_txt { padding:18px 0}

/* Banner */

.latest_new ul{ height:300px; }
.latest_events ul{ height:300px; }

.banner_area, .right_area, .left_area, .inner_content, .left_menu { width:100%; margin-top:-35px; }
.Userful_link_inside ul{ margin:0 0 0 -2.3; padding:0}
.Userful_link_inside ul li{ float: left; width:48%; margin:0 0 10px 2%}
.footer .copyright, .footer .power{ width:100%; text-align: center;}
.site-map ul li{ width:47%; margin:0 0 10px 2%}


/* Page */
.inner_banner{ padding:70px 0 30px 0; margin-bottom:20px;}
.inner_banner h1{ font-size:23px; line-height:26px; padding:10px 5px; }

.inside_banner{  padding:25px 0; margin-bottom:20px; }
.inside_banner h1{ font-size:23px; line-height:26px; }

.inner_content .main_content{ padding:5px 10px 5px 10px; min-height:500px; overflow:auto }
.nevigation{ padding:5px 0;}

#Inner_Type_A ul{ margin:20px 0 0 0%;  }
#Inner_Type_A li{ float:left; width:100%; margin:0 0 15px 0%; }
#Inner_Type_C li .title_des{ width:100%; }
#Inner_Type_C li .right_desc{ width:100%;}

.download_area ul{ margin:0px 0 0 0%; padding:0px;}
.download_area ul li{ width: auto; float:none; margin:0 0 15px 20px }
.inner_content_full .main_content{ padding:5px 10px 20px 10px; min-height:200px; }
.year_box{ right:0 ;top:0; position: relative;}
.year_box select{ width:100%}

.youtube_video{ width:100%; box-shadow:0 5px 10px rgba(0,0,0,.5); background:#000; padding:0px; border:0px solid #fff; margin-top:30px;}
.youtube_video iframe{ width:100%; height:320px;}
.youtube_video video{ width:100%; height:320px;}

#Information_detail #Inner_Type_A li{ width:100%; margin:0 0 15px 0%; }
#Information_detail #Inner_Type_A li img{ max-width:100%; max-height:255px;}
.wrap .dropdown { margin-bottom:20px; }

/* Page Content */
.contactus .info, .contactus .location{ width:100%;}


.video_box { width:100%; margin-left:0px; }
.video_box ul li iframe { min-height:360px}

.video_area_box { position:relative; float:left; width: 100%; margin-left:-10px; }
.video_area_box .video { position:relative; float:left; width:100%; margin-bottom:20px; }
.video_area_box .video iframe { width:100%; min-height:360px}

.video_english_box {float: left; width: 50%; position: relative; margin-top:20px; }
.video_english_box  ul{ list-style:none; margin:0; padding:0; }
.video_english_box  ul li { width:100%; margin-bottom:10px; }
.video_english_box  ul li iframe{ border:2px solid #ffe300; border-top: 5px solid #ffe300;}
.video_english_box  ul li+li iframe{border:2px solid #ed6d2a; border-top: 5px solid #ed6d2a; margin-bottom: 20px; }

.navbar { position: relative; float: left; color:#666; font-size:12px; width:100%; text-align:left; margin-left:10px; }
.navbar a { text-decoration: none; color: #666; }
.navbar a:hover { text-decoration: underline; color: #FFA500; }
}