@font-face {
	font-family: "BebasNeueRegular";
	font-style: normal;
	font-weight: normal;
	src: url('bebasneue-webfont.eot') format("embedded-opentype"), url('bebasneue-webfont.woff') format("woff"), url('bebasneue-webfont.ttf') format("truetype"), url('bebasneue-webfont.svg') format("svg");
}
@font-face {
	font-family: "CaviarDreamsBold";
	font-style: normal;
	font-weight: normal;
	src: url('caviardreams_bold-webfont.eot') format("embedded-opentype"), url('caviardreams_bold-webfont.woff') format("woff"), url('caviardreams_bold-webfont.ttf') format("truetype"), url('caviardreams_bold-webfont.svg') format("svg");
}
@font-face {
	font-family: "LillyRegular";
	font-style: normal;
	font-weight: normal;
	src: url('lilly__-webfont.eot') format("embedded-opentype"), url('lilly__-webfont.woff') format("woff"), url('lilly__-webfont.ttf') format("truetype"), url('lilly__-webfont.svg') format("svg");
}
/* ::::: http://www.mediaengine.com.au/templates/mediaenginemk2/css/template.css ::::: */

@font-face {
	font-family: "ProximaNovaBold";
	font-style: normal;
	font-weight: normal;
	src: url('proximanova-bold-webfont.eot') format("embedded-opentype"), url('proximanova-bold-webfont.woff') format("woff"), url('proximanova-bold-webfont.ttf') format("truetype"), url('proximanova-bold-webfont.svg') format("svg");
}
@font-face {
	font-family: "ProximaNovaLight";
	font-style: normal;
	font-weight: normal;
	src: url('proximanova-light-webfont.eot') format("embedded-opentype"), url('proximanova-light-webfont.woff') format("woff"), url('proximanova-light-webfont.ttf') format("truetype"), url('proximanova-light-webfont.svg') format("svg");
}
html { height: 100.1%; }
body, td, th { font-family: Arial,Helvetica,sans-serif; font-size: 13px; color: rgb(51, 51, 51); }
body { margin: 0px; }
a img { border: 0px none; }
h1 { font-size: 24px; font-weight: normal; margin: 0px 0px 12px; padding: 0px; font-family: "ProximaNovaBold",arial,verdana,sans-serif; }
h2 { font-size: 18px; font-weight: normal; margin: 0px 0px 3px; font-family: "ProximaNovaBold",arial,verdana,sans-serif; }
h2 span { color: red; font-style: italic; }
h3 { font-size: 18px; font-weight: normal; font-style: italic; margin: -6px 0px 12px; font-family: "ProximaNovaLight",arial,verdana,sans-serif; }
p { margin: 0px 0px 14px; padding: 0px; line-height: 28px; }
ul, ol { margin: 0px 0px 12px; padding: 0px 0px 0px 30px; }
ul li, ol li { margin: 0px 0px 6px; padding: 0px; }
#mainContainer { background-color: rgb(238, 238, 238); background-image: url('bg_light.jpg'); background-repeat: no-repeat; background-position: center top; min-height: 600px; margin: 0px auto; }
#mainContainerBg2 { min-height: 600px; background-image: url('footer_dark.png'); background-position: center bottom; background-repeat: no-repeat; }
#header { margin: 0px auto; padding: 20px 0px; clear: both;display: flex;justify-content: center; /* 水平居中 */ }
#logo { float: left; width: 283px; height: 103px; }
#menu { float: left; padding: 38px 0px 0px 38px; height: 62px; }
#menu ul, #menu li { margin: 0px; padding: 0px; list-style: outside none none; text-align: right; }
#menu ul li { display: inline-block; vertical-align: top; margin: 0px 25px 0px 0px; text-align: left; font-family: "ProximaNovaLight",arial,verdana,sans-serif; position: relative; z-index: 5000; height: 45px; }
#menu ul li a, #menu ul li span { display: block; color: rgb(51, 51, 51); font-size: 16px; text-decoration: none; text-transform: lowercase; height: 45px; transition-duration: 0.2s; }
#menu ul li a:hover, #menu ul li span:hover { color: rgb(255, 0, 0); }
#menu ul li ul { display: none; z-index: 1000; margin: 0px 0px 0px -105px; position: absolute; top: 40px; left: 50%; width: 180px; padding: 10px 15px; background-color: red; border-radius: 30px; box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3); }
#menu ul li ul::before { position: absolute; display: block; content: ""; border-color: red transparent; top: -13px; left: 92px; border-style: solid; border-width: 0px 13px 13px; height: 0px; width: 0px; }
#menu ul li:hover ul { display: block; }
#menu ul li ul li { padding: 0px; margin: 0px; display: block; text-align: center; height: auto; border-top: 1px solid rgb(238, 0, 0); }
#menu ul li ul li:first-child { border-top: 0px none; }
#menu ul li ul li a { font-size: 13px; height: auto; color: rgb(255, 255, 255); text-shadow: none; padding: 8px 0px; transition-duration: 0.2s; }
#menu ul li ul li a:hover { color: rgb(255, 255, 255); text-shadow: 2px 2px 1px rgb(119, 85, 85); padding: 7px 1px 9px 0px; }
#featureArea { width: 960px; margin: 0px auto; }
#curve { height: 90px; overflow: hidden; min-width: 960px; max-width: 1120px; margin: -40px auto 30px; background-image: url('curve.png'); background-repeat: no-repeat; background-position: center bottom; position: relative; }
#curveReadmore { width: 92px; position: absolute; bottom: 0px; left: calc(50% - 46px); z-index: 100; }
#curveReadmoreImage { cursor: pointer; }
#curveContent { width: 960px; margin: 0px auto; padding: 90px 0px 0px; opacity: 0; position: relative; z-index: 90; }
#content, #component { padding: 0px 0px 150px; margin: 20px auto 0px; width: 960px; position: relative; z-index: 100; }
.cols-3 { width: 300px; float: left; margin-right: 30px; }
.cols-3:last-child { margin-right: 0px; }
.smallContent { padding: 15px 0; }
.smallImage { display: block; width: 300px; height: 160px; margin: 0px 0px 12px; text-decoration: none; border-radius: 7px; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 0px 15px rgba(0, 0, 0, 0.2) inset, 1px -1px 1px rgb(204, 204, 204); cursor: pointer; transition-duration: 0.2s; transition-property: box-shadow; }
.smallImage:hover { box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 0px 15px rgba(0, 0, 0, 0.5) inset, 1px -1px 1px rgb(204, 204, 204); }
.readon, .k2ReadMore, .rsform-submit-button { display: inline-block; position: relative; color: rgb(255, 255, 255); line-height: 16px; text-decoration: none; padding: 8px 45px 8px 12px; border-radius: 5px; box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 4px rgba(0, 0, 0, 0.4); background: transparent linear-gradient(rgb(91, 91, 91), rgb(20, 20, 20)) repeat scroll 0% 0%; }
.readon::after, .k2ReadMore::after { display: block; width: 18px; height: 18px; content: ""; background-image: url('readmore.png'); background-repeat: no-repeat; position: absolute; top: 7px; right: 10px; }
.readon:hover, .k2ReadMore:hover, .rsform-submit-button:hover { background: transparent linear-gradient(rgb(110, 110, 110), rgb(57, 57, 57)) repeat scroll 0% 0%; }
#footer { position: relative; z-index: 2000; color: rgb(255, 255, 255); width: 960px; margin: -80px auto 0px; }
#footer h2 { margin: 0px; }
#footerLevel1 { border-bottom: 1px solid rgb(0, 0, 0); padding: 20px 0px; }
.footerContent { background-color: rgb(228, 228, 228); color: rgb(0, 0, 0); padding: 8px 8px 8px 65px; border-radius: 4px; margin-left: 10px; position: relative; margin-top: 21px; display: block; text-decoration: none; }
.footerContent:hover { background-color: rgb(255, 255, 255); }
#twitter { float: left; width: 630px; }
#twitterContent { position: relative; text-decoration: none; display: block; height: 28px; }
#twitterContentNowrap { white-space: nowrap; overflow: hidden; width: 565px; top: 0px; left: 0px; background-color: rgb(228, 228, 228); color: rgb(0, 0, 0); padding: 8px 5px 8px 40px; border-radius: 4px 4px 4px 20px; margin-left: 20px; position: relative; display: block; text-decoration: none; z-index: 50; }
#twitterContent:hover #twitterContentNowrap { white-space: normal; overflow: visible; background-color: rgb(255, 255, 255); }
#twitterContent::before { content: ""; display: block; width: 76px; height: 68px; background-image: url('twitter.png'); position: absolute; left: -15px; top: -16px; z-index: 60; }
#twitterDate { display: block; text-align: right; color: rgb(102, 102, 102); margin: 0px 0px 6px; }
#facebook { float: left; padding-left: 30px; width: 300px; }
#facebookContent { padding-top: 6px; padding-bottom: 3px; }
#facebookContent::before { content: ""; display: block; width: 76px; height: 68px; background-image: url('facebook.png'); position: absolute; left: -15px; top: -16px; }
#footerLevel2 { border-top: 1px solid rgb(61, 61, 61); border-bottom: 1px solid rgb(0, 0, 0); padding: 20px 0px; }
#ourClients1 { float: left; width: 320px; padding-right: 30px; }
#clientsContent { padding-left: 10px; padding-right: 65px; margin: 6px 10px 0px 0px; }
#clientsContent::before { content: ""; display: block; width: 76px; height: 68px; background-image: url('clients_clickhere.png'); position: absolute; right: -15px; top: -16px; }
#ourClients2 { float: left; width: 610px; }
#ourClients2 ul { margin: 0px; padding: 0px; list-style: outside none none; text-align: right; }
#ourClients2 ul li { margin: 4px 20px 0px 0px; padding: 0px; list-style: outside none none; display: inline-block; vertical-align: bottom;position: relative; }
#ourClients2 ul li:last-child { margin-right: 0px; }
#footerLevel3 { border-top: 1px solid rgb(61, 61, 61); padding: 20px 0px; }
#copyright { color: rgb(102, 102, 102); float: left;}
#footerMenu { float: right;}
#footerMenu ul { text-align: right; }
#footerMenu ul, #footerMenu ul li { margin: 0px; padding: 0px; list-style: outside none none; }
#footerMenu ul li { display: inline-block; margin: 0px 0px 0px 10px; color: rgb(255, 255, 255); }
#footerMenu ul li a { text-decoration: none; color: rgb(102, 102, 102); }
#footerMenu ul li a:hover { color: rgb(255, 255, 255); }
#island, #island img, #island div { transform: translateZ(0px); }
#island { position: relative; height: 520px; }
#islandLand { width: 654px; position: absolute; left: 132px; top: 0px; z-index: 100; }
#islandSpotShadow { width: 706px; position: absolute; left: 115px; top: 390px; z-index: 90; opacity: 0.7; }
#islandComplexShadow { width: 660px; position: absolute; left: 320px; top: 462px; z-index: 95; opacity: 0.1; }
#islandHover { height: 520px; position: relative; z-index: 4000; }
.islandHoverLink { padding: 1px 0px 0px 1px; width: 27px; height: 27px; line-height: 27px; text-align: center; font-size: 29px; color: rgb(255, 255, 255); display: block; text-decoration: none; background: rgba(0, 0, 0, 0.6) none repeat scroll 0% 0%; border: 1px solid rgb(0, 0, 0); border-radius: 70px; position: absolute; z-index: 2000; overflow: hidden; }
#islandLinkWeb { left: 270px; top: 50px; }
#islandLinkPrint { left: 480px; top: 155px; }
#islandLinkBranding { left: 370px; top: 115px; }
#islandLinkAdvertising { left: 625px; top: 20px; }
#islandLinkPrintManagement { left: 690px; top: 140px; }
#homeMessage { width: 100%; margin: 0px auto; }
.webFeature ul li::before { position: absolute; left: -12px; top: 0px; content: "-"; display: block; }
.ourWorkItem:nth-child(n) { margin: 0px 30px 30px 0px; }
.ourWorkItem:nth-child(3n) { margin-right: 0px; }
.printManagementFeature ul li::before { position: absolute; left: -12px; top: 0px; content: "-"; display: block; }
.ourTeamItem:nth-child(3n) { margin-right: 0px; }
.ourTeamHover::before { position: absolute; bottom: 11px; left: 11px; display: block; content: ""; width: 0px; height: 0px; border-width: 30px 0px 0px 30px; border-color: transparent red; border-style: solid; z-index: 130; }
.clearfix::after { visibility: hidden; display: block; font-size: 0px; content: " "; clear: both; height: 0px; }
.clearfix { display: inline-block; }
a.ourwork-link, a.ourwork-link:visited { display: block; width: 262px; margin: 15px 0px 0px; height: 175px; background: transparent url('ourwork-link.jpg') no-repeat scroll 0px 0px; }
a.ourwork-link:hover { background: transparent url('ourwork-link.jpg') no-repeat scroll 0px -175px; }
ul.service-list { margin: 15px 0px 0px; padding: 0px; list-style: outside none none; width: 300px; display: block; border-bottom: 1px solid rgb(255, 255, 255); border-top: 1px solid rgb(200, 200, 200); }
ul.service-list li { display: inline; width: 150px; height: 29px; float: left; margin: 0px; padding: 0px; }
ul.service-list li a, ul.service-list li a:visited { text-decoration: none; display: block; height: 21px; width: 120px; padding: 6px 0px 0px 30px; border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(200, 200, 200); color: rgb(51, 51, 51); }
ul.service-list li a:hover { color: rgb(119, 119, 119); }
ul.service-list li a.branding-link, ul.service-list li a.branding-link:visited { background: transparent url('branding-icon.png') no-repeat scroll 0px 0px; }
ul.service-list li a.branding-link:hover { background: transparent url('branding-icon.png') no-repeat scroll 0px -27px; }
ul.service-list li a.advertising-link, ul.service-list li a.advertising-link:visited { background: transparent url('advertising-icon.png') no-repeat scroll 0px 0px; }
ul.service-list li a.advertising-link:hover { background: transparent url('advertising-icon.png') no-repeat scroll 0px -27px; }
ul.service-list li a.print-link, ul.service-list li a.print-link:visited { background: transparent url('print-icon.png') no-repeat scroll 0px 0px; }
ul.service-list li a.print-link:hover { background: transparent url('print-icon.png') no-repeat scroll 0px -27px; }
ul.service-list li a.web-link, ul.service-list li a.web-link:visited { background: transparent url('web-icon.png') no-repeat scroll 1px 0px; }
ul.service-list li a.web-link:hover { background: transparent url('web-icon.png') no-repeat scroll 1px -27px; }
ul.service-list li a.photo-link, ul.service-list li a.photo-link:visited { background: transparent url('photo-icon.png') no-repeat scroll 0px 0px; }
ul.service-list li a.photo-link:hover { background: transparent url('photo-icon.png') no-repeat scroll 0px -27px; }
ul.service-list li a.software-link, ul.service-list li a.software-link:visited { background: transparent url('software-icon.png') no-repeat scroll 0px 0px; }
ul.service-list li a.software-link:hover { background: transparent url('software-icon.png') no-repeat scroll 0px -27px; }
ul.service-list li a.film-link, ul.service-list li a.film-link:visited { background: transparent url('film-icon.png') no-repeat scroll 0px 0px; }
ul.service-list li a.film-link:hover { background: transparent url('film-icon.png') no-repeat scroll 0px -27px; }
ul.service-list li a.printing-link, ul.service-list li a.printing-link:visited { background: transparent url('printing-icon.png') no-repeat scroll 0px 0px; }
ul.service-list li a.printing-link:hover { background: transparent url('printing-icon.png') no-repeat scroll 0px -27px; }
#cssDesignAward { position: absolute; top: 150px; right: 0px; z-index: 15000; }
.clearfix { display: block; }

.pop{position:absolute;width:300px;margin:0 auto;top: 42px;} 
.pop_body{width:300px;background:#ff0000;} 
.popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	width: 66%;
	max-width: 960px;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
	padding: 20px;
	z-index: 9999;
}
.popupclose {
    text-align: right;
    color: #999;
}
.popuptitle {
    font-size: 1.6rem;
    color: #058b44;
    letter-spacing: .15rem;
    text-align: center;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.popupnei {
	display: flex;
	justify-content: center;
	width: 88%;
    margin: 20px auto;
}

.popupimg {
	flex: 1;
	text-align: center;
	padding: 8px;
	overflow: hidden;
    text-overflow: ellipsis;
}
.popupimg img {
	width: 100%;
	margin-bottom: 10px;
	box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.2);
}
.popupimg span {
	color: #666;
	white-space: nowrap;
}
.quanxianimg {
	width: 52px;
	opacity: 0.5;
	transition: opacity 0.3s;
}
.quanxianimg:hover {
	opacity: 1;
}

.bubble {
	position: absolute;
    background: #d3d0d0;
    color: #1a1717;
    padding: 5px 10px;
    border-radius: 5px;
    display: none;
    width: 1rem;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
}
.bubble::after {
	content: '';
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 10px;
	border-style: solid;
	border-color: #d3d0d0 transparent transparent transparent;
}
.bubble.show {
	display: block;
}

.pxnone {
	display: none;
}
.px1rem {
    font-size: 1rem;
}
.px095rem {
    font-size: .95rem;
}
.txttop {
    font-size: 1.6rem;
    color: #058b44;
    letter-spacing: .15rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 40px;
}
.txtnei {
    justify-content: center;
    width: 90%;
    margin: 20px auto;
}
.txtbot {
    font-size: 3rem;
    color: #ccc;
    letter-spacing: .15rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-top: 1px solid #e7e7e7;
    margin: 10px 0;
}
.txtdescbold {
    font-size: 1.2rem;
    color: #333;
	font-weight: bold;
}
.txtclose {
    text-align: right;
    color: #999;
    margin-top: 20px;
}