@keyframes bannerchange{
	0% {
		opacity: 0;
		background: url(../source/img/banner/pic1.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	2% {
		opacity: 100%;
		background: url(../source/img/banner/pic1.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	6.3% {
		opacity: 100%;
		background: url(../source/img/banner/pic1.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	8.3% {
		opacity: 0%;
		background: url(../source/img/banner/pic1.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	8.4% {
		opacity: 0%;
		background: url(../source/img/banner/pic2.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	10.4% {
		opacity: 100%;
		background: url(../source/img/banner/pic2.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	14.6% {
		opacity: 100%;
		background: url(../source/img/banner/pic2.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	16.6% {
		opacity: 0%;
		background: url(../source/img/banner/pic2.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	16.7% {
		opacity: 0%;
		background: url(../source/img/banner/pic3.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	18.7% {
		opacity: 100%;
		background: url(../source/img/banner/pic3.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	22.9% {
		opacity: 100%;
		background: url(../source/img/banner/pic3.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	24.9% {
		opacity: 0%;
		background: url(../source/img/banner/pic3.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	25% {
		opacity: 0%;
		background: url(../source/img/banner/pic4.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	27% {
		opacity: 100%;
		background: url(../source/img/banner/pic4.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	31.2% {
		opacity: 100%;
		background: url(../source/img/banner/pic4.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	33.2% {
		opacity: 0%;
		background: url(../source/img/banner/pic4.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	33.3% {
		opacity: 0%;
		background: url(../source/img/banner/pic5.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	35.3% {
		opacity: 100%;
		background: url(../source/img/banner/pic5.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	39.5% {
		opacity: 100%;
		background: url(../source/img/banner/pic5.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	41.5% {
		opacity: 0%;
		background: url(../source/img/banner/pic5.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	41.6% {
		opacity: 0%;
		background: url(../source/img/banner/pic6.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	43.6% {
		opacity: 100%;
		background: url(../source/img/banner/pic6.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	47.8% {
		opacity: 100%;
		background: url(../source/img/banner/pic6.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	49.8% {
		opacity: 0%;
		background: url(../source/img/banner/pic6.jpg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}

	49.9% {
		opacity: 0;
		background: url(../source/img/banner/pic7.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	51.9% {
		opacity: 100%;
		background: url(../source/img/banner/pic7.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	56.1% {
		opacity: 100%;
		background: url(../source/img/banner/pic7.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	58.1% {
		opacity: 0%;
		background: url(../source/img/banner/pic7.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	58.2% {
		opacity: 0%;
		background: url(../source/img/banner/pic8.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	60.2% {
		opacity: 100%;
		background: url(../source/img/banner/pic8.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	64.4% {
		opacity: 100%;
		background: url(../source/img/banner/pic8.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	66.4% {
		opacity: 0%;
		background: url(../source/img/banner/pic8.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	66.5% {
		opacity: 0%;
		background: url(../source/img/banner/pic9.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	68.5% {
		opacity: 100%;
		background: url(../source/img/banner/pic9.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	72.7% {
		opacity: 100%;
		background: url(../source/img/banner/pic9.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	74.7% {
		opacity: 0%;
		background: url(../source/img/banner/pic9.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	74.8% {
		opacity: 0%;
		background: url(../source/img/banner/pic10.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	76.8% {
		opacity: 100%;
		background: url(../source/img/banner/pic10.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	81% {
		opacity: 100%;
		background: url(../source/img/banner/pic10.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	83% {
		opacity: 0%;
		background: url(../source/img/banner/pic10.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	83.1% {
		opacity: 0%;
		background: url(../source/img/banner/pic11.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	85.1% {
		opacity: 100%;
		background: url(../source/img/banner/pic11.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	89.3% {
		opacity: 100%;
		background: url(../source/img/banner/pic11.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	91.3% {
		opacity: 0%;
		background: url(../source/img/banner/pic11.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}


	91.4% {
		opacity: 0%;
		background: url(../source/img/banner/pic12.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	93.4% {
		opacity: 100%;
		background: url(../source/img/banner/pic12.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	98% {
		opacity: 100%;
		background: url(../source/img/banner/pic12.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
	100% {
		opacity: 0%;
		background: url(../source/img/banner/pic12.jpeg);
		background-size: cover;
		background-position: center;
	    background-position: top;
	}
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}

.top {
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgb(22, 154, 187);
	position: sticky;
	top: 0;
	z-index: 3;
}

.top .container {
	display: flex;
	align-items: center;
}

.container .icon {
	width: 100px;
	height: 100px;
	margin: 15px 15px 15px 15px;
}

.container .title {
	font-size: clamp(3.6em, 4.5vw, 5em);
}

.top .pages {
	font-size: clamp(0.5em, 1.5vw, 2em);
}

.top a {
	text-decoration: none;
	color: white;
}

.pages .buttons {
	margin: 0 5px;
	padding: 10px;
	border-radius: 20px;
/* 	transition: 0.5s linear; */
/* 	border: 1px red solid; */
}

/* @media (max-width: 1200px){
	.pages .buttons {
		margin: 0 1px;
		padding: 8px;
	}
} */

.pages .cur {
	background: darkblue;
}

.pages .cur:hover {
	text-decoration: underline;
	border: 2px black solid;
}

.pages .not_cur:hover {
	text-decoration: underline;
	background: rgb(119, 119, 119);

}

.menu_btn {
	position: fixed;
	top: -500%;
	color: white;
	font-size: clamp(2em, 10vw, 3em);
	z-index:3;
	margin: 5px 15px 0 0;
}

@media (max-width: 1050px){
	.top .menu_btn {
		position: relative;
	}

	.top .pages {
		position: fixed;
		top: -500%;
	}
}


@media (max-width: 1050px){
	.top .icon {
		width: 12vw;
		height: 12vw;
		margin: 10px 10px;
	}
	.top .title {
		font-size: max(10vw, 1.5em);
	}
}

.sidebar {
	height: 100vh;
	z-index: 2;
	background:rgb(22, 154, 187);
	width: 50vw;
	position: fixed;
	right: -200%;
	top: 0;
	transition: 0.6s ease;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	font-size: 2em;
}

.sidebar_in {
	right: 0;
}

.sidebar .space {
	min-height: 140px;
}

.sidebar a{
	text-decoration: none;
	color: rgb(255, 255, 255);
}

.sidebar .items {
	margin: 15px 0;
}

.sidebar .cur {
	background:rgb(41, 41, 90);
	padding: 10px;
	border-radius: 20px;
}

/* ............................................ */

.banner {
	/* background: url("../source/video/banner2.gif"); */
	height: clamp(40vh, 50vw, 80vh);
	width: 100%;
	background-size: cover;
	background-position: center;
	background-position: top;
	animation: bannerchange 30s linear infinite;
}

@media (max-width: 1050px){
	.banner {
		height: 40vh;
	}
	
}

/* ............................................ */

.coop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
/* 	border: 5px black solid; */
	min-height: 50vh;
	padding-bottom: 80px;
	background:rgb(226, 226, 226)
}

.coop .title {
	margin: clamp(20px, 5vw, 50px);
	font-size: clamp(60px, 10vw, 100px);
}


.coop .icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
/* 	border: 2px blue solid; */
}

.icons .container {
	display: flex;
	flex-direction: column;
	align-items: center;
/* 	border: 1px orange solid; */
	margin-bottom: 20px;
}
.icons .icon_one {
	height: clamp(120px, 15vw, 180px);
	margin: 10px;
}

.icons .icon_two {
	height: clamp(120px, 15vw, 180px);
	margin: 10px;
}

.icons .icon_three {
	height: clamp(80px, 13vw, 160px);
	margin: 10px;
}

.icons .icon_four {
	height: clamp(80px, 13vw, 160px);
	margin: 10px;
}

.icons .icon_one {
	position: relative;
	opacity: 10%;
	transform: translateX(-20vw);
	transition: all 2s ease 0s;
	
}

.icons .icon_two {
	position: relative;
	opacity: 10%;
	transform: translateX(-50vw);
	transition: all 2s ease 0.1s;
}

.icons .icon_three {
	position: relative;
	opacity: 10%;
	transform: translateX(-80vw);
	transition: all 3s ease 0.3s;
}

.icons .icon_four {
	position: relative;
	opacity: 10%;
	transform: translateX(-80vw);
	transition: all 3s ease 0.4s;
}

.icons .show {
	opacity: 100%;
	transform: translateX(0);
}

.icons .words {
	font-size: 25px;
	font-family: 'Noto Sans HK', sans-serif;
	color: black;
}

.icons a {
	text-decoration: none;
}

/* ............................................ */
/* 
.sin {
	display: flex;
	flex-direction: column;
	min-height: 50vh;
	background: orange;
	padding: 50px 0 30px 0;
}

.sin .title {
	font-size: clamp(40px, 8vw, 75px);
	font-weight: 600;
}

.sin .intro {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.intro_word .name {
	font-family: 'Noto Sans HK', sans-serif;
	font-size: clamp(25px, 4vw, 65px);
}

.intro_word .words {
	font-size: clamp(15px, 2vw, 35px);
}

.sin .sin_img {
	height: clamp(260px, 35vw, 400px);
	opacity: 10%;
	position: relative;
	transform: translateX(-20vw);
	transition: all 1.5s ease 0s;
}

.sin .show {
	opacity: 100%;
	transform: translateX(0);
	
}
.certs .word {
	font-size: clamp(20px, 2.5vw, 35px);
	font-weight: 900;
}

.certs li{
	margin-left: min(50px, 8vw);
}

.sin .quote {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	margin-left: 10px;
}

.quote .qu_one {
	display: flex;
	justify-content: flex-start;
}

.qu_one img {
	height: clamp(130px, 30vw, 320px);
}

.quote .qu_two {
	display: flex;
	justify-content: flex-start;
}

.qu_two img {
	height: clamp(50px, 6vw, 80px);
} */

/* ............................................ */

.con_us {
	min-height: 40vh;
	background: rgb(41, 41, 90);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding-top: 20px;
}

.con_us .block_one {
/* 	border: pink 2px solid; */
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 5px;
	min-width: 250px;
}

.block_one .chin_name {
	color: white;
	padding: 5px;
}

.block_one .eng_name {
	color: rgb(180, 180, 180);
	padding: 5px;
}

.con_us .block_two {
/* 	border: pink 2px solid; */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 5px;
	min-width: 250px;
}

.con_us .title {
	color: black;
	font-size: 30px;
	font-weight: 900;
}

.con_us .line {
	height: 2px;
	width: 100%;
	background: white;
	margin: 10px 0;
}

.con_us .container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	color: white;
}

.con_us .bx {
	margin: 10px;
}

.block_two .bx {
	color: white;
	font-size: 35px;
}

.block_two a {
	text-decoration: none;
}
.block_two .small_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: white;
	margin: 0 5px;

}

.con_us .block_three {
	min-width: 250px;
/* 	border: 2px pink solid; */
	margin: 5px 5px 100px 5px;
}

.block_three .address {
	color: white;
}

.block_three a {
	text-decoration: none;
}

.con_us .blocks {
	padding: 15px;
}

@media (max-width: 1000px){
	.blocks {
		width: 80vw;
	}

}

/* ................... */

/* .con_us {
	border: 2px solid red;
}

.con_us .blocks {
	border: 2px solid lightgreen;
}

.blocks .small_container {
	border: 2px pink solid;
}

.block_two .container {
	border: 2px lightblue solid;
} */