/*
	Index Page
	===================================================
 */
 .clearboth{ clear: both; }
 /* Main */
 #MainBlock { position: relative; overflow: hidden;
  /*background: url(../images/index_bg.png) no-repeat center top; */
  background-size: 100% 100%; 
 }
 
 /* Logo */
 #Logo { }
 #Logo a { }
 #Logo a img { max-width: 100%; width: 255px; height: auto; }
 
 /* Title */
 #Title { }
 #Title .Year { }
 #Title .Subject { }
 #Title .Range { }
 #Title img { width: 215px; }
 
 /* Graphic */
 #Graphic { }
 #Graphic img { max-width: 100%; height: auto; }
 
 /* Main Content */
 #MainContent { }
 #MainContent h2 { margin-top: 10px; color: #0b4665!important; font-size: 18px; font-weight: 700;}
 #MainContent ul li a { color: #fff; background-color: #1977a9; border-radius: 50px; padding: 6.5px 10px; font-family: Noto Sans HK; font-weight: 500; }
 #MainContent ul { list-style-type: none; margin: 0; }
 /* Link */
 #Link { font-size: 0.8em; }
 #Link ul { list-style: none; margin: 0; }
 #Link ul li { padding: 0; vertical-align: baseline;}
 #Link ul li.Section:before { content: ""; vertical-align: baseline; padding: 0 7px; }
 #Link a { vertical-align: baseline; font-size: 12px; 
	 /*text-decoration: underline; */
 }
 #Link a:hover { text-decoration: underline; }
 #Link span { vertical-align: baseline; }
 
 /* WCAGLogo */
 #WCAGLogo { }
 #WCAGLogo a { display: inline-block; }
 #WCAGLogo img { width: 89px; }
 
 
 /*
	 Colour
	 ===================================================
 */
 #Link ul li.Section:before { color: #333; }
 
 
 /*
	 Z-Index
	 ===================================================
 */
 #Logo { position: relative; z-index: 100; }
 #Title { position: relative; z-index: 100; }
 #Graphic { position: relative; z-index: 1; }
 #MainContent { position: relative; z-index: 100; }
 #Link { position: relative; z-index: 10; }
 #WCAGLogo { position: relative; z-index: 10; }
 
 
 /*
	 Responsive
	 ===================================================
	 Priority:	Size Max > Size Min > General
 */
 @media screen and (min-width:1025px) {
	 #Logo { position: absolute; left: 69px; top: 40px; }
 
	 #Title { position: absolute; left: 69px; top: 205px; }
 
	 #Graphic { position: absolute; top: 17px; left: 0px; }
	 #Graphic img { width: 617px; }
 
	 #MainContent { position: absolute; left: 69px; top: 292px; width: 220px; text-align: center; }
	 #MainContent h2 { margin-top: 10px; color: #0b4665!important; }
	 #MainContent ul { padding: 7px 0 12px 0; list-style-type: none;}
	 #MainContent ul li { padding: 5px 0 13px 0; color: #277BB0; }
 
	 #Link { position: absolute; left: 240px; bottom: 95px; }
	 #Link li { display: inline; }
	 #Link a { display: inline; }
 
	 #WCAGLogo { position: absolute; left: 70px; bottom: 95px; }
 }
 
 @media screen and (max-width:1024px) {
	 #Logo { position: absolute; left: 40px; top: 20px; }
 
	 #Title { float: left; padding: 180px 0 0 40px; }
 
	 #Graphic { position: absolute; top: 17px; left: 0px; margin-top: 2%; }
	 #Graphic img { width: 80%; }
 
	 #MainContent { clear: both; float: left; width: 30%; margin-top: 40px; text-align: center; margin-left: 22px; }
	 #MainContent h2 { margin-top: 8px; }
	 #MainContent ul { padding: 3px 0; }
	 #MainContent ul li { padding: 5px 0 5px 5px; }
 
	 #Link { clear: both; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }
	 #Link ul li { padding: 0; }
	 #Link ul li.Section:before { padding: 0; content: none; }
	 #Link a { text-align: center; padding-bottom: 8px; line-height: 2em; }
	 #Link span { display: none; }
 
	 #WCAGLogo { position: static; text-align: center; padding: 30px 0; clear: both;}
 }
 
 @media screen and (max-width:768px) {
	 #Logo { position: absolute; right: CALC((100% - 237px)/2); left: unset; }
 
	 #Title { float: none; padding: 130px 0 20px 0; text-align: center }
	 .desktop { display: none; }
	 .mobile { display: block!important; margin: auto; margin-top: 20px; }
	 #Title .date { display: block!important; margin-top: 5px; color: #626262; }
 
	 #Graphic { position: static; margin-left: 0; margin-top: 0; margin-bottom: 0; }
	 #Graphic img { width: 100%; }
 
	 #MainContent { position: static; float: none; width: auto; margin-top: 360px; margin-left: 0; }
	 #MainContent h2 { text-align: center; margin-top: 0px; padding: 18px 0 14px; border-top: 1px solid #ccc; font-size: 20px; }
	 #MainContent ul { padding: 0; padding-bottom: 10px; list-style: none; }
	 #MainContent ul li { padding: 0 20px; }
	 #MainContent ul li a { display: block; text-align: center; padding: 3.5px; line-height: 2em; max-width: 310px; margin: 0 auto 30px auto; font-size: 20px; font-weight: 700; }
 
	 #Link { padding: 30px 0; }
	 #Link ul li { padding: 0; }
 
 }
 
 @media screen and (max-width:480px) {
	 #Logo { position: absolute; right: CALC((100% - 237px)/2); top: 10px;}
 }
 
 @media screen and (max-width:320px) {
 }
 
 @media screen and (max-width:768px) {
	 #MainBlock { background: #ffffff; background-image: url('../images/mobile-bg.png')!important; background-position: top; background-size: contain; }
	 
	 #Link { width:100%!important; }
 }