@charset "utf-8";

#article .row {
	padding-bottom: 118px;
	padding-top: 105px;
	color: #232323;
}
#article .text {
	width: 80%;
}

#article h2 {
	text-align: center;
	font-weight: 900;
	font-size: 38px;
}
#article h3, #article .our-award .year {
	text-align: center;
	font-weight: 400;
	font-size: 26px;
}
#article h3 {
	font-weight: 300;
}

#article .keyvisual {
	position: relative;
	max-height: 800px;
	overflow: hidden;
	font-size: 0;
	background: #000;
	color: white;
}/*
#article .keyvisual:before {
	background-color: rgba(238, 75, 0, .8);
	position: absolute;
	content: ' ';
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}*/
#article .keyvisual .inner {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}
#article .keyvisual .holder {
	white-space: nowrap;
	text-align: center;
	max-width: 1100px;
	height: 100%;
}
#article .keyvisual .holder:before {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#article .keyvisual .bg {
	z-index: -1;
	width: 100%;
}
#article .keyvisual .intro {
	vertical-align: middle;
	display: inline-block;
	padding-bottom: 68px;
	white-space: normal;
	padding-top: 68px;
}
#article .keyvisual p {
	padding-bottom: 46px;
	line-height: 45px;
	font-weight: 700;
	font-size: 32px;
}
#article .keyvisual p + p {
	padding-bottom: 0;
}
#article .keyvisual .head {
	text-transform: uppercase;
	display: inline-block;
	margin-bottom: 40px;
	font-weight: 700;
	font-size: 16px;
}
#article .keyvisual .head:after {
	background-image: url('/images/dash_white.png');
	margin-top: 8px;
	display: block;
	content: ' ';
	height: 2px;
}

#article .our-services {
	text-align: center;
}
#article .our-services h2 {
	letter-spacing: -2px;
}
#article .our-services p {
	display: inline-block;
	line-height: 30px;
	font-weight: 300;
	max-width: 740px;
	font-size: 26px;
}
#article .our-services p.text {
	font-size: 20px;
}
#article .our-services .balls {
	margin-bottom: 60px;
	white-space: nowrap;
	margin-top: 70px;
	font-size: 0;
}
#article .our-services .balls>div {
	display: inline-block;
	position: relative;
	height: 333px;
	width: 333px;
}
#article .our-services .balls>div:before {
	position: absolute;
	border-radius: 50%;
	content: ' ';
	height: 100%;
	width: 100%;
	opacity: .8;
	left: 0;
	top: 0;
}
#article .our-services .balls>div:after {
	vertical-align: middle;
	display: inline-block;
	content: ' ';
	height: 100%;
}
#article .our-services .balls h3 {
	vertical-align: middle;
	display: inline-block;
	letter-spacing: -2px;
	white-space: normal;
	position: relative;
	line-height: 38px;
	font-weight: 900;
	padding: 0 20%;
	color: #000;
	width: 100%;
}
@media screen and (min-width: 769px) {
	#article .our-services .balls h3 {
		font-size: 38px;
	}
}
#article .our-services .green {
	right: -36px;
}
#article .our-services .green:before {
	background-color: #a0c431;
}
.ie-lt9 #article .our-services .green:before {
	background: url('/images/about/ball_green.png') no-repeat center center;
}
#article .our-services .orange {
	z-index: 10;
}
#article .our-services .orange:before {
	background-color: #ff9600;
}
.ie-lt9 #article .our-services .orange:before {
	background: url('/images/about/ball_orange.png') no-repeat center center;
}
#article .our-services .blue {
	left: -36px;
}
#article .our-services .blue:before {
	background-color: #55bcd2;
}
.ie-lt9 #article .our-services .blue:before {
	background: url('/images/about/ball_blue.png') no-repeat center center;
}
.csstransforms3d.page-loaded #article .our-services .balls>div {
	transition: transform .7s;
}
.csstransforms3d #article .our-services .green {
	transform: translate3d(297px, 0 , 0);
}
.csstransforms3d #article .our-services .blue {
	transform: translate3d(-297px, 0 , 0);
}
.csstransforms3d #article .our-services .balls.move>div {
	transform: translate3d(0, 0 , 0);
}

#article .clients {
	background-color: #876D64; /* #b8ab9f;*/
	position: relative;
	font-size: 0;
	color: white;
}
/*#article .clients:before {
	position: absolute;
	content: ' ';
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}*/
#article .clients .item {
	display: inline-block;
	margin: 0 3% 50px;
}
#article .clients h2 {
	padding-top: 95px;
}
#article .clients .list {
	padding-bottom: 68px;
	text-align: center;
	margin-top: 58px;
	margin-left: 2.5%;
	font-size: 0;
	width: 95%;
}

#article .logo {
	background: no-repeat left top;
	margin-bottom: 14px;
}
#article .communicator {
	background-image: url('/images/about/awards/communicator.png');
	height: 32px;
	width: 135px;
}
#article .awwwards {
	background-image: url('/images/about/awards/awwwards.png');
	height: 32px;
	width: 135px;
}
#article .davey {
	background-image: url('/images/about/awards/davey.png');
	height: 31px;
	width: 86px;
}
#article .hkda {
	background-image: url('/images/about/awards/hkda.png');
	height: 75px;
	width: 49px;
}
#article .hkda_gda_2021 {
	background-image: url('/images/about/awards/hkda_gda_2021.png?v=2');
	height: 70px;
	width: 169px;
}
#article .hkda_gda_2025 {
	background-image: url('/images/about/awards/hkda_gda_2025.png?v=2');
	height: 70px;
	width: 142px;
}
#article .web-accesibility-award-2024-2025 {
	background-image: url('/images/about/awards/web-accesibility-award-2024-2025.png?v=2');
	height: 52px;
	width: 75px;
}
#article .horizon {
	background-image: url('/images/about/awards/horizon.png');
	height: 31px;
	width: 104px;
}
#article .inova {
	background-image: url('/images/about/awards/inova.png');
	height: 41px;
	width: 68px;
}
#article .ima {
	background-image: url('/images/about/awards/ima.png');
	height: 36px;
	width: 94px;
}
#article .iac {
	background-image: url('/images/about/awards/iac.png');
	height: 50px;
	width: 68px;
}
#article .w3 {
	background-image: url('/images/about/awards/w3.png');
	height: 43px;
	width: 43px;
}
#article .web {
	background-image: url('/images/about/awards/web.png');
	height: 43px;
	width: 53px;
}
#article .wac {
	background-image: url('/images/about/awards/web-accesibility-hk.svg');
	height: 60px;
	width: 90px;
}
#article .hkasd-isda {
    width: 180px;
    aspect-ratio: 427 / 102;
    background: url(/images/about/awards/hkasd-isda-award-logo.png) center / contain no-repeat;
}
#article .our-award h2 {
	text-align: center;
	margin-top: 80px;
}
#article .our-award h3 {
	text-align: center;
	font-size: 26px;
}
#article .our-award .list {
	margin-top: 44px;
    	font-size: 0;
}
#article .our-award .group {
	display: inline-block;
	vertical-align: top;
	padding-left: 6%;
	width: 33%;
}
#article .our-award .item {
	margin-bottom: 55px;
}
#article .our-award .name {
	line-height: 16px;
	font-weight: 900;
	font-size: 16px;
	margin-bottom: 3px;
}
#article .our-award .detail {
	font-weight: 400;
	font-size: 14px;
}
#article .our-award .detail a{
	font-weight: 400;
}
#article .our-award .year {
	margin-bottom: 22px;
	text-align: left;
}
#article .our-award .year.hidden {
	visibility: hidden;
}

@media (max-width: 1280px) {
	#article .keyvisual .bg {
		position: relative;
		margin-left: 50%;
		max-width: none;
		width: 1260px;
		left: -630px;
	}
	#article .profile .text .break {
		display: none;
	}
	#article .our-award .group {
		padding-right: 2%;
		padding-left: 6%;
	}
}
@media (max-width: 1024px) {
	#article .our-services .balls {
		zoom: .8;
	}
}
@media (max-width: 980px) {
	#article .keyvisual p {
		padding-bottom: 24px;
		line-height: 28px;
		font-size: 24px;
	}
}
@media (max-width: 840px) {
	#article .our-services .balls {
		zoom: .6;
	}
}
@media (max-width: 768px) {
	#article h3, #article .our-services p, #article .our-award h3 {
		font-size: 22px;
	}
}
@media (device-width: 768px) and (orientation:portrait) {
	#article .our-services .balls span {
		font-size: 24px;
		line-height: 36px;
	}
}
@media (max-width: 640px) {
	#article .keyvisual p {
		padding-bottom: 24px;
		line-height: 24px;
		font-size: 18px;
	}
	#article h3, #article .our-award .year {
		font-size: 16px;
	}
	#article .our-services .balls {
		zoom: .4;
	}
	#article .top-text .sp-line {
		width: 90%;
	}
	#article .keyvisual .bg {
		width: 1050px;
		left: -480px;
	}
	#article .text {
		font-size: 18px;
		width: 100%;
	}
	#article .our-award .group {
		width: 50%;
	}
	#article h2 {
		font-size: 30px;
	}
	#article .our-services p {
		line-height: 16px;
		font-size: 16px;
	}
	#article .our-services p.text {
		font-size: 14px;
		line-height: 1.5;
	}
	#article .our-services .text {
		line-height: 17px;
		font-size: 14px;
	}
	#article .our-award h3 {
		font-size: 16px;
	}
	#article .row, #article .clients h2 {
		padding-top: 60px;
	}
	#article .our-award h2 {
		margin-top: 60px;
	}
	#article .our-award .list {
		margin-bottom: -55px;
	}
	#article .our-award .year.hidden {
		display: none;
	}
}
@media
(-webkit-min-device-pixel-ratio: 1.25) and (max-width: 640px) and (orientation:portrait),
(min--moz-device-pixel-ratio: 1.25) and (max-width: 640px) and (orientation:portrait),
(-o-min-device-pixel-ratio: 1.25/1) and (max-width: 640px) and (orientation:portrait),
(min-device-pixel-ratio: 1.25) and (max-width: 640px) and (orientation:portrait),
(min-resolution: 200dpi) and (max-width: 640px) and (orientation:portrait),
(min-resolution: 1.25dppx) and (max-width: 640px) and (orientation:portrait) {
	#article .clients .item>img {
		zoom: .6;
	}
	#article .our-award .group {
		padding-right: 10px;
		text-align: center;
		padding-left: 0;
		width: 100%;
	}
	#article .our-award .year {
		text-align: center;
	}
	#article .logo {
		margin-right: auto;
		margin-left: auto;
	}
	#article .keyvisual .bg {
		width: 1130px;
	}
}
@media
(-webkit-min-device-pixel-ratio: 1.25) and (max-width: 640px),
(min--moz-device-pixel-ratio: 1.25) and (max-width: 640px),
(-o-min-device-pixel-ratio: 1.25/1) and (max-width: 640px),
(min-device-pixel-ratio: 1.25) and (max-width: 640px),
(min-resolution: 200dpi) and (max-width: 640px),
(min-resolution: 1.25dppx) and (max-width: 640px) {
	#article .row {
		padding-bottom: 98px;
		padding-top: 85px;
	}
	#article .our-services .balls span {
		font-size: 13.81px;
		line-height: 36px;
	}
	#article .top-text h1 .mobile {
		display: inline;
	}
	#article .clients .item {
		zoom: .75;
	}
}
@media (max-width: 480px),
(-webkit-min-device-pixel-ratio: 1.25) and (max-width: 640px),
(min--moz-device-pixel-ratio: 1.25) and (max-width: 640px),
(-o-min-device-pixel-ratio: 1.25/1) and (max-width: 640px),
(min-device-pixel-ratio: 1.25) and (max-width: 640px),
(min-resolution: 200dpi) and (max-width: 640px),
(min-resolution: 1.25dppx) and (max-width: 640px) {
	#article .our-services .balls {
		margin-left: -6%;
		width: 112%;
		zoom: .36;
	}
	#article .keyvisual {
		max-height: none;
	}
}