:root {
    --blue: #000000;
    --lightBlue: #005399;
    --blueVersion: #00919e2d;
    --blueVersion1: #00919e00;
    --white: #ffffff;
    --whiteVersion: #ffffff31;
    --whiteVersion1: #ffffff00;
	--year: #7791CA;
}

@font-face {
    font-family: "brownStd";
    src: url("../fonts/BrownStd-Regular.otf");

}

@font-face {
    font-family: "ariallgt";
    src: url("../fonts/ARIALLGT.TTF");
  
}

@font-face {
    font-family: "notoSans";
    src: url("../fonts/NotoSansCJKtc-Medium.otf");
    
}

@font-face {
    font-family: "adobemingStd";
    src: url("../fonts/adobemingstd-light.otf");
}

@font-face {
    font-family: "MHeiHK-Medium";
    src: url("../fonts/MHeiHK-Medium.ttf");
}

/*@font-face {*/
/*    font-family: "MHeiHKS-Medium";*/
/*    src: url("../fonts/MHeiHKS-Medium.ttf");*/
/*}*/

@font-face {
    font-family: 'roboto';
    src: local('roboto'),
         url('../fonts/roboto-regular-webfont.woff2') format('woff'),
         url('../fonts/roboto-regular-webfont.woff') format('woff2');
}

@font-face {
    font-family: 'MHeiHKS-Medium';
    src: local('MHeiHKS-Medium'),
         url('../fonts/MHeiHKS-Medium.woff') format('woff'),
         url('../fonts/MHeiHKS-Medium.woff2') format('woff2');
}

/* HEADER */

/* Top Section */
.a1,
.a2,
.a3 {
    font-family: ariallgt;
    position: relative;
    cursor: pointer;
}

.a1,
.a2 {
    color: #939598;
}

.a1 {
    font-size: 20px;
    right: 1rem;
}

.a2 {
    font-size: 24px;
    right: 0.5rem;
}

.a3 {
    font-size: 28px;
}

/* End section */


header .second-col,
header .third-col {
    display: grid;
    place-items: center left;
}

header .second-col h1 {
    font-size: 92px;
    color: var(--lightBlue);
    font-family: "roboto";
    font-weight: 900;
    margin-left: -3rem;
}

header .third-col {
    color: var(--blue);
	
}
.year {
	font-size: 4.2rem;
	font-family: "roboto";
}
.legalHead {
    font-family: brownStd;
	color: #005945;
	font-size: 2.15rem;
  	padding-top: 10px;
}
.legalHead_a {
	font-size: 1.8rem;
}
.cHead {
	font-family: 'notoSans' !important;
	color: #005945;
	font-size: 3.2rem;
	margin-bottom: -10px;
}
.cHead_a {
	font-size: 2.2rem;
}
.big_year{
	color:#2363AA;
  font-size:7rem;
  margin-top: -1.5rem;
  margin-right: -2.5rem;
  
}
.lang {

  font-size: 2.2rem;
  line-height: 5rem;
  color: var(--blue);
}
.lang_tc, lang_sc {
	font-family: 'notoSans' !important;
}
.lang ul {
list-style: none; /* Remove default bullet points */
  display: flex; /* Display list items as flex items */
  justify-content: flex-start; /* Align items to the left */
  padding-top: 40px;
  margin-left: -40px;
}
.lang li {
flex: 1; /* Make each list item equally wide */
}
.lang ul li a{
	color: var(--blue);
}
.active {
    font-weight: bolder;
}
header,.content,footer{display:none;}
/* END HEADER */
.logo_container{
	display: flex;
}
.header_left{
	/*text-align:right;*/
	padding-right: 20px;
}
.header_bottom{
	padding-top:20px;
}
.text_size {
	padding-right: 1.5rem;
}
.text_size a{
	color: var(--blue);
}
/* CONTENT AREA */
.content {
    background: url('../images/bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 895px;
}
.stripes {
	
	width: 100%;
  	position: relative;
}
.stripes div{
	
	
 	right: 0;
	margin-top: 40px;
}
.stripes p {
    
    display: inline-block;
    color: var(--blue);
    font-size: 22px;
    font-family: 'roboto' !important;
	margin-bottom: 0.5rem;
}

.sc .stripes p,
.stripes .scStripes p {
    font-family: 'MHeiHKS-Medium' !important;
}

.stripes p a {
    color: var(--blue);
    text-decoration: none;
    font-family: 'roboto' !important;
}
.sc .stripes p a{
    font-family: 'MHeiHKS-Medium' !important;
}
.stripes p:hover {
    color: var(--lightBlue);
	text-decoration:underline;
}

.stripes p:hover a {
    color: var(--lightBlue);
	text-decoration:underline;
}

.scStripes,
.tcStripes {
    display: none;
}

/* END CONTENT AREA */

/* FOOTER */
.container_f{
	display: flex;
  justify-content: center;
  align-items: center;
}
footer p {
    color: #7A8191;
    font-size: 16px;
    font-family: "MHeiHK-Medium";
}
.scStripes .copyright{font-family:"MHeiHKS-Medium";}
a {
    text-decoration: none;
}
footer img{width:85px;}
/* END FOOTER */
/* LOADER STYLE */
.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.loader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    top: 3.5%;
    text-indent: -9999em;
    border-top: 1.1em solid var(--lightBlue);
    border-right: 1.1em solid var(--lightBlue);
    border-bottom: 1.1em solid var(--lightBlue);
    border-left: 1.1em solid var(--white);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    z-index: 999999;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#spinner {
    position: absolute;
    ;
    top: 0;
    left: 0;
    width: 100%;
    height: 1000vh;
    background-color: var(--white);
    z-index: 999999;
}
/* END STYLE */

@media(max-width:1410px) {
    .cHead {
        font-size: 3rem;
    }
	.cHead_a {
        font-size: 2rem;
    }
	.legalHead
	{
        font-size: 1.85rem;
    }
	.legalHead_a
	{
        font-size: 1.5rem;
    }
	.year {
	font-size: 3.2rem;
	}
}
@media(max-width:1200px) {
    .cHead {
        font-size: 2.5rem;
    }
	.cHead_a {
        font-size: 1.5rem;
    }
	.legalHead
	{
        font-size: 1.5rem;
    }
	.legalHead_a
	{
        font-size: 1.15rem;
    }
	.year {
	font-size: 2.7rem;
	}
}
@media(max-width:1025px) {
   

    .pdf-img {
        left: 66%;
    }
}

@media(max-width:991px) {
    header .second-col h1 {
        margin-left: 0;
        font-size: 72px;
    }

     .cHead {
        font-size: 1.9rem;
    }
	.cHead_a {
        font-size: 0.9rem;
    }
	.legalHead
	{
        font-size: 1.15rem;
    }
	.legalHead_a
	{
        font-size: 0.8rem;
    }
	.year {
	font-size: 2.2rem;
	}
	.lang {
	  
	  font-size: 1.8rem;
	  line-height: 4rem;

	}
	.big_year {
	  margin-top: -1.2rem;
	  margin-right: -2rem;
	  font-size: 5rem;
	}
    .pdf-img {
        left: 78%;
    }
}



@media(max-width:767px) {
	 .header_left {
  text-align: center;
	}
	 .big_year {
		 margin-top: -1.5rem;
		 margin-right: 0;
	 }
    .legalHead {
        margin-top: 0;
        text-align: center;
		font-size: 1rem;
    }
	.legalHead_a {
		font-size: 0.9rem;
    }
	.year {
	font-size: 2.2rem;
	}
	.cHead {
    font-size: 2rem;
  	}
	.cHead_a {
    font-size: 1rem;
  	}
	.lang ul {
  justify-content: space-around; /* Align items to the left */
  margin-left: 0px;
	font-size: 1.4rem;
	padding-top: 20px;
}
	/*.lang {
		position: absolute;
  top: 2.5rem;
    right: 3rem;
  line-height: 1.6rem;
  font-size: 1rem;
	}
	*/
	
    header .first-col,
    header .second-col,
    header .third-col {
        display: grid;
        place-items: center;
    }
	.stripes {
    margin-top: -1.5rem;
	}
	.stripes div {
	
	  margin-top: 0px;
	}
    .stripes p {
        display: block;
       
        text-align: center;
		margin-bottom: -1rem;
    }

    .pdf-img, footer p {
        padding-bottom: 1.5rem;
        text-align: center;
    }
	
	.content {
    background: url('../images/bg_s.jpg');
    height: 1157px;
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
}

@media(max-width:480px) {
    .stripes p {
        font-size: 18px;
    }
	.stripes div{
	width:100%;
	position: relative;
}
    .blue-bg ul li {
        font-size: 20px;
    }
	
	.logo_container {
  display: block;
}
}
