/*
Optimized CSS for uitg_co - Only includes actually used styles
Based on analysis of index.html and index_zh.html
*/

/* Reset & Base */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
}
ul, ol {
	margin: 0;
}
p {
	margin: 0;
}

html, body {
	font-family: 'Roboto', sans-serif;
	font-size: 100%;
	background: #fff;
}

body a {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
}

/* Header */
.header {
	background: url(../images/6.webp) no-repeat center top;
	-webkit-background-size: cover;
	height: 400px;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.header-top {
	padding-top: 2em;
}

.menu {
	float: right;
}

.menu img {
	display: block;
}

.logo {
	float: left;
	margin-top: 10px;
}

/* Box Menu */
.box {
	position: absolute;
	top: -1200px;
	width: 100%;
	color: #7F7F7F;
	margin: auto;
	padding: 0;
	z-index: 999999;
	text-align: center;
	left: 0;
}

a.boxclose {
	cursor: pointer;
	text-align: center;
	display: block;
	position: absolute;
	top: 1.9em;
	right: 15em;
}

.box_content_center {
	background: rgba(5, 206, 170, 0.61);
}

.menu_box_list {
	display: inline-block;
	padding: 6% 0;
}

.menu_box_list ul li {
	display: block;
}

.menu_box_list li a {
	color: #FFF;
	font-size: 1.5em;
	display: block;
	margin: 0.3em;
	text-transform: uppercase;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	letter-spacing: 0.1em;
}

.menu_box_list li a:hover {
	color: #000000;
}

.menu_box_list li a > i > img {
	vertical-align: middle;
	padding-right: 10px;
}

/* Services */
.services {
	padding: 5em 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.service_top {
	text-align: center;
}

.service_top h3 {
	text-transform: uppercase;
	color: #555;
	font-size: 1.7em;
}

.service_top p {
	color: #666;
	font-size: 1.2em;
	border-bottom: 1px solid #B9B9B9;
	margin-bottom: 7em;
	padding-bottom: 3em;
	line-height: 1.9;
}

ul.service_grid {
	padding: 0;
	list-style: none;
	margin-bottom: 3em;
}

.service_grid {
	margin-bottom: 2em;
	text-align: center;
}

/* Post Blocks */
.post_block {
	background: #062D4C;
	padding: 3em 2em;
}

.post_block1 {
	background: #087483;
	padding: 3em 2em;
}

.post_block2 {
	background: #23286b;
	padding: 3em 2em;
}

.post_block3 {
	background: #1a4d3e;
	padding: 3em 2em;
	min-height: 200px;
}

h5.m_1 {
	font-size: 1em;
	padding: 2em 0 1em;
}

h5.m_1 a {
	color: #fff;
}

h5.m_1 a:hover {
	color: #04AC8E;
	text-decoration: none;
}

p.m_2 {
	color: #fff;
	font-size: 0.8125em;
	line-height: 1.8em;
}

/* Icons */
i.one {
	width: 224px;
	height: 50px;
	background: url(../images/img-sprite.webp) no-repeat -320px -103px;
	display: inline-block;
	margin: 0 auto;
}

i.two {
	width: 224px;
	height: 50px;
	background: url(../images/img-sprite.webp) no-repeat -48px -101px;
	display: inline-block;
	margin: 0 auto;
}

i.three {
	width: 224px;
	height: 50px;
	background: url(../images/img-sprite.webp) no-repeat -546px -105px;
	display: inline-block;
	margin: 0 auto;
}

i.four {
	width: 224px;
	height: 50px;
	background: url(../images/webtechlogo.webp) no-repeat center center;
	background-size: 224px 70px;
	display: inline-block;
	margin: 0 auto;
}

.post_block:hover i.one,
.post_block1:hover i.two,
.post_block2:hover i.three,
.post_block3:hover i.four {
	transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	transition: 0.8s;
}

/* Access */
.access {
	padding: 5em 0;
	background: url(../images/access_background.webp) no-repeat center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

/* 左侧图片 - 保持原始尺寸和透明度 */
.access-left span {
	width: 370px;
	height: 500px;
	display: block;
	background: url(../images/people_01.webp) no-repeat center;
}

.access-left span2 {
	width: 393px;
	height: 376px;
	display: block;
	background: url(../images/translation.webp) no-repeat center;
}

.access-left span3 {
	width: 300px;
	height: 376px;
	display: block;
	background: url(../images/training.webp) no-repeat;
}

.access-left span4 {
	width: 400px;
	height: 400px;
	display: block;
	background: url(../images/webtech.webp) no-repeat -30px center;
	background-size: contain;
}

.access-right h3 {
	color: #000;
	font-size: 2em;
	font-weight: 100;
	margin-bottom: 1em;
}

span.thick {
	font-weight: 100;
}

.access-right {
	margin-top: 7em;
}

.webtech-logo-large {
	text-align: center;
	margin-bottom: 2em;
}

.webtech-logo-large img {
	max-width: 400px;
	width: 100%;
	height: auto;
}

.access-right p {
	color: #000;
	font-size: 1em;
	font-weight: 100;
	margin-bottom: 2em;
}

/* Social Media Icons */
a i.weichat {
	position: relative;
}

.weichat img.qrcode {
	position: absolute;
	z-index: 99;
	top: 30px;
	right: -250px;
	width: 8rem;
	max-width: none;
	height: 8rem;
	transform: scale(0);
	transform-origin: top right;
	opacity: 0;
	border: .3125rem solid #0085ba;
	border-radius: .25rem;
	-webkit-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.weichat:hover img.qrcode {
	transform: scale(1);
	opacity: 1;
}

a i.weibo {
	position: relative;
}

.weibo img.weiboqrcode {
	position: absolute;
	z-index: 99;
	top: 30px;
	right: -250px;
	width: 8rem;
	max-width: none;
	height: 8rem;
	transform: scale(0);
	transform-origin: top right;
	opacity: 0;
	border: .3125rem solid #0085ba;
	border-radius: .25rem;
	-webkit-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.weibo:hover img.weiboqrcode {
	transform: scale(1);
	opacity: 1;
}

a i.xcx {
	position: relative;
}

.xcx img.xcxicon {
	position: absolute;
	z-index: 99;
	top: 30px;
	right: -250px;
	width: 8rem;
	max-width: none;
	height: 8rem;
	transform: scale(0);
	transform-origin: top right;
	opacity: 0;
	border: .3125rem solid #0085ba;
	border-radius: .25rem;
	-webkit-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.xcx:hover img.xcxicon {
	transform: scale(1);
	opacity: 1;
}

/* Footer */
.footer {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	padding: 5em 0 0;
}

ul.f_social {
	padding: 0;
	margin: 2em 0;
	list-style: none;
	text-align: center;
}

ul.f_social li:first-child {
	margin-left: 0;
}

ul.f_social li {
	display: inline-block;
	margin-right: 5px;
}

ul.f_social li a i {
	width: 30px;
	height: 30px;
	display: block;
	background: url(../images/img-sprite.webp) no-repeat;
}

ul.f_social li a i.tw1 {
	background-position: -394px -380px;
}

ul.f_social li a i.fb1 {
	background-position: -441px -380px;
}

ul.f_social li a i.rss {
	background-position: -492px -387px;
}

ul.f_social li a i.weibo {
	background-position: -531px -386px;
}

ul.f_social li a i.weichat {
	background-position: -576px -387px;
}

ul.f_social li a i.xcx {
	background-position: -615px -385px;
}

ul.f_social li a i:hover {
	opacity: 0.5;
}

.copy {
	background: #062D4C;
	padding: 2em 0;
	text-align: center;
}

.copy p {
	color: #cfe8f6;
	font-size: 0.85em;
	text-transform: uppercase;
}

.copy p a {
	color: #fff;
}

.copy p a:hover {
	color: #05ceaa;
	text-decoration: none;
}

/* Merged from footer.css */
.footer-links {
	margin-bottom: 15px;
	text-align: center;
}

.footer-links p {
	color: #cfe8f6;
	margin-bottom: 10px;
	font-weight: 600;
	letter-spacing: .02em;
}

.footer-links a {
	color: #ffffff;
	margin: 0 10px;
	text-decoration: none;
}
.footer-links a:hover {
	color: #05ceaa;
}

.footer-blogs {
	margin-bottom: 15px;
	text-align: center;
}

.blog-toggle {
    cursor: pointer;
    color: #cfe8f6;
    font-weight: 600;
    margin-bottom: 10px;
}

.blog-toggle span {
	margin-left: 5px;
}

#blog-links {
	display: block;
	margin-top: 10px;
}

#blog-links a {
    color: #ffffff;
    margin: 0 8px;
    display: inline-block;
    margin-bottom: 5px;
    text-decoration: none;
}
#blog-links a:hover {
    color: #05ceaa;
}

/* Back to Top */
#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	overflow: hidden;
	width: 48px;
	height: 48px;
	border: none;
	text-indent: 100%;
	background: url(../images/back-top.webp) no-repeat center center #05ceaa;
	background-size: 19px 11px;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
}

#toTop:hover {
	background: url(../images/back-top.webp) no-repeat center center #333;
	background-size: 19px 11px;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.access-left {
		text-align: center;
	}
	
	.access-left span,
	.access-left span2,
	.access-left span3,
	.access-left span4 {
		background-size: cover;
		width: 250px;
		height: 330px;
		display: inline-table;
	}
	
	.access-right {
		margin-top: 2em;
	}
	
	.access, .services {
		padding: 2em 0;
	}
	
	.access-right h3 {
		font-size: 2em;
	}
	
	.access-right p {
		font-size: 0.85em;
	}
	
	ul.service_grid {
		margin-bottom: 2em;
	}
	
	.service_top p {
		margin-bottom: 3em;
		padding-bottom: 2em;
	}
	
	.menu_box_list li a {
		font-size: 1em;
	}
}

@media (max-width: 640px) {
	a.boxclose {
		right: 9em;
	}
}

@media (max-width: 480px) {
	.menu img {
		width: 60%;
	}
	
	.logo {
		margin-top: 0;
	}
	
	a.boxclose {
		right: 5em;
	}
	
	.access-left span,
	.access-left span2,
	.access-left span3,
	.access-left span4 {
		background-size: cover;
		width: 190px;
		height: 195px;
		display: inline-table;
	}
}

@media (max-width: 320px) {
	.menu {
		float: left;
	}
	
	.header-top {
		padding-top: 1em;
	}
	
	.logo {
		margin-bottom: 10px;
	}
	
	a.boxclose {
		right: 1em;
	}
	
	.post_block, .post_block1, .post_block2, .post_block3 {
		padding: 1em;
	}
	
	h5.m_1 {
		padding: 1em 0 0;
	}
	
	.footer {
		padding: 2em 0;
	}
	
	.access-right h3 {
		font-size: 1.2em;
	}
	
	.access-left span,
	.access-left span2,
	.access-left span3,
	.access-left span4 {
		background-size: cover;
		width: 130px;
		height: 230px;
		display: inline-table;
	}
}