.web-marking {
	width: 100%;
	background-color:#0D0D0D;
	height: 840px;
	position:relative;
}
.web-marking .img-box {
	position: absolute;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	-ms-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-o-transform:translateX(-50%);
}
.web-marking .text-box {
	position:relative;
	z-index:5;
	text-align: center;
	padding-top: 176px;
}
.web-marking .text-box p {
	font-size: 20px;
	line-height: 32px;
	color: #DFDFDF;
	margin-top: 25px;
}
.web-marking .text-box span {
	font-size: 22px;
	color: #FFFFFF;
	display: inline-block;
	margin: 20px 0 35px;
}
.web-marking .text-box .btns a {
	display: inline-block;
	padding: 10px 30px;
	border: 1px solid #424242;
	font-size: 15px;
	color: #808080;
	margin-right: 3px;
}
.web-marking .text-box .btns a:hover {
	border-color: #0D67CB;
	color: #0D67CB;
}
.marking-strategy {
	width: 100%;
	background: url("../image/web-marking-img03.jpg");
	background-size:cover;
	height: 750px;
}
.marking-strategy-box {
	width: 1260px;
	margin: 0 auto;
}
.marking-strategy-box .cards-box {
	width: 750px;
	height: 750px;
}
.marking-strategy-box .cards-box li {
	width: 250px;
	height: 250px;
	float: left;
}
.marking-strategy-box .cards-box .white-bg {
	text-align: center;
	background-color: #FFFFFF;
	position: relative;
	width:250px;
}
.marking-strategy-box .cards-box .white-bg .box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	width:190px;
}
.marking-strategy-box .cards-box .white-bg h3 {
	font-size: 18px;
	color: #2F2F2F;
	margin-bottom: 10px;
}
.marking-strategy-box .cards-box .white-bg .word01 {
	font-size: 12px;
	color: #888;
	margin-bottom: 20px;
}
.marking-strategy-box .cards-box .white-bg .word02 {
	font-size: 14px;
	color: #565656;
}
.marking-strategy-box .cards-box .blue-bg01 {
	background: rgba(26, 88, 171, .75) url("../image/web-marking-icon01.png") no-repeat center;
}
.marking-strategy-box .cards-box .blue-bg02 {
	background: rgba(26, 88, 171, .75) url("../image/web-marking-icon02.png") no-repeat center;
}
.marking-strategy-box .cards-box .blue-bg03 {
	background: rgba(26, 88, 171, .75) url("../image/web-marking-icon03.png") no-repeat center;
}
.marking-strategy-box .cards-box .blue-bg04 {
	background: rgba(26, 88, 171, .75) url("../image/web-marking-icon04.png") no-repeat center;
}
.marking-strategy-box .text-box {
	width: 510px;
	height: 500px;
	background-color: #1A58AB;
	padding: 118px 0 0 70px;
	color: #FFFFFF;
}
.marking-strategy-box .text-box h2 {
	font-size: 30px;
}
.marking-strategy-box .text-box h3 {
	font-size: 20px;
	margin-bottom: 10px;
}
.marking-strategy-box .text-box p {
	font-size: 14px;
	line-height: 20px;
}
.marking-strategy-box .text-box i {
	display: block;
	width: 50px;
	height: 3px;
	background-color: #769BCD;
	margin: 25px 0 35px;
}
.marking-strategy-box .text-box span {
	margin-top: 80px;
	display: block;
}
.seo-brand {
	width: 100%;
	background: url("../image/web-marking-img04.jpg");
	background-size:cover;
	height: 797px;
	position: relative;
}
.seo-brand .blank-bg {
	background: url("../image/web-marking-img09.jpg") no-repeat;
	width: 1260px;
	height: 555px;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	text-align: center;
}
.seo-brand .blank-bg h2 {
	font-size: 30px;
	margin-bottom: 10px;
	color: #FFFFFF;
}
.seo-brand .blank-bg .img-box18 {
	margin-top: -2px;
	margin-bottom: 70px;
}
.seo-brand .blank-bg .img-box19 {
	margin: 50px 0 25px;
}
.seo-brand .blank-bg p {
	font-size: 18px;
	color: #FFFFFF;
	line-height:30px;
}
.seo-brand .blank-bg .text {
	font-size: 16px;
	margin-top: 10px;
}
.systematize {
	width: 100%;
	background: url("../image/web-marking-img07.jpg");
	background-size: cover;
	height: 958px;
}
.systematize-box {
	margin: 0 auto;
	width: 1260px;
	padding-top: 85px;
}
.systematize-box .text-box {
	text-align: center;
}
.systematize-box .text-box .title {
	font-size: 30px;
	color: #000000;
	font-weight: 600;
}
.systematize-box .text-box .title img {
	vertical-align: baseline;
	margin-left: 10px;
}
.systematize-box .text-box .title span {
	color: #1A58AB;
}
.systematize-box .text-box .title02 {
	font-size: 20px;
	color: #232323;
	margin: 10px 0 15px;
}
.systematize-box .text-box .text {
	font-size: 15px;
	color: #989898;
	line-height: 24px;
}
.systematize-box .marking-box {
	margin-top: 55px;
	position: relative;
}
.systematize-box .marking-box ._box01 {
	width: 594px;
}
.systematize-box .marking-box .empty-box {
	width: 124px;
	height: 400px;
	border: 6px solid #CECECE;
	margin-top: 51px;
}
.systematize-box .marking-box .empty-box01 {
	border-right: 0;
}
.systematize-box .marking-box .empty-box02 {
	border-left: 0;
}
.systematize-box .marking-box .text {
	padding-top: 30px;
}
.systematize-box .marking-box .text p {
	text-transform: uppercase;
	color: #888888;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 5px;
}
.systematize-box .marking-box .text b {
	font-size: 22px;
	color: #363636;
}
.systematize-box .marking-box .text span {
	font-size: 16px;
	color: #565656;
}
.systematize-box .marking-box .blue-box {
	width: 245px;
	height: 315px;
	background-color: #1A58AB;
	position: absolute;
	top: 93.5px;
	left: 50%;
	transform: translateX(-50%);
	-ms-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	padding: 60px 0 0 40px;
}
.systematize-box .marking-box .blue-box i {
	display: block;
	width: 50px;
	height: 3px;
	background-color: #5F8AC4;
	margin-bottom: 50px;
}
.systematize-box .marking-box .blue-box h3 {
	font-size: 28px;
	color: #FFFFFF;
	font-weight: 600;
	margin-bottom: 20px;
}
.systematize-box .marking-box .blue-box span {
	font-size: 16px;
	color: #FFFFFF;
	text-transform: uppercase;
	line-height: 24px;
}
.marking-case {
	background-color: #F6F6F6;
}
.marking-case-box {
	width:1260px;
	margin:0 auto;
	padding-top: 85px;
	padding-bottom: 90px;
}
.marking-case-box .text {
	text-align: center;
}
.marking-case-box .text h2 {
	font-size: 30px;
	color: #232323;
	margin-bottom: 10px;
}
.marking-case-box .text p {
	font-size: 16px;
	color: #666666;
}
.marking-case-box .case-box {
	margin: 55px 0 40px;
}
.marking-case-box .case-box li {
	float: left;
	width: 414px;
	height: 240px;
	margin-bottom: 9px;
	margin-right: 9px;
	position: relative;
	background-color: #FFFFFF;
	border: 1px solid #EBEBEB;
}
.marking-case-box .case-box li.clear-margin {
	margin-right: 0;
}
.marking-case-box .case-box .content-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	text-align: center;
	white-space: nowrap;
}
.marking-case-box .case-box .content-box img {
	filter:grayscale(100%);
	opacity: 0.5;
}
.marking-case-box .case-box li:hover .content-box img {
	filter:grayscale(0);
	opacity: 1;
}
.marking-case-box .case-box li:hover {
	background-color: #1A58AB;
}
.marking-case-box .case-box li:hover .content-box p, .marking-case-box .case-box li:hover .content-box span {
	color: #FFFFFF;
}
.marking-case-box .case-box li:hover .content-box i {
	background-color: #3F7FCC;
}
.marking-case-box .case-box .content-box>div {
	width: 160px;
	height: 50px;
	margin: 0 auto;
}
.marking-case-box .case-box .content-box .partner01 {
	background: url("../image/web-marking-partner000-1.png") no-repeat center;
}
.marking-case-box .case-box li:hover .content-box .partner01 {
	background: url("../image/web-marking-partner0001.png") no-repeat center;
}
.marking-case-box .case-box .content-box .partner02 {
	background: url("../image/web-marking-partner0002.png") no-repeat center;
}
.marking-case-box .case-box li:hover .content-box .partner02 {
	background: url("../image/web-marking-partner000-2.png") no-repeat center;
}
.marking-case-box .case-box .content-box .partner03 {
	background: url("../image/web-marking-partner0003.png") no-repeat center;
}
.marking-case-box .case-box li:hover .content-box .partner03 {
	background: url("../image/web-marking-partner000-3.png") no-repeat center;
}
.marking-case-box .case-box .content-box .partner04 {
	background: url("../image/web-marking-partner0004.png") no-repeat center;
}
.marking-case-box .case-box li:hover .content-box .partner04 {
	background: url("../image/web-marking-partner004.png") no-repeat center;
}
.marking-case-box .case-box .content-box .partner05 {
	background: url("../image/web-marking-partner05.png") no-repeat center;
}
.marking-case-box .case-box li:hover .content-box .partner05 {
	background: url("../image/web-marking-partner005.png") no-repeat center;
}
.marking-case-box .case-box .content-box .partner06 {
	background: url("../image/web-marking-partner06.png") no-repeat center;
}
.marking-case-box .case-box li:hover .content-box .partner06 {
	background: url("../image/web-marking-partner006.png") no-repeat center;
}
.marking-case-box .case-box .content-box i {
	display: block;
	width: 40px;
	height: 2px;
	background-color: #CBCBCB;
	margin: 20px auto;
}
.marking-case-box .case-box .content-box h3 {
	font-size: 16px;
	color: #363636;
	margin-bottom: 10px;
	font-weight: 600;
}
.marking-case-box .case-box .content-box span {
	font-size: 13px;
	color: #666666;
	line-height: 20px;
}
.marking-case-box .more-box {
	text-align: center;
}
.marking-case-box .more {
	padding: 10px 46px;
	border: 2px solid #CFCFCF;
	font-size: 14px;
	color: #666666;
}
.media-idea {
}
.media-idea-box {
	width: 1260px;
	margin: 0 auto;
	padding-top: 75px;
	padding-bottom: 95px;
}
.media-idea-box .text {
	text-align: center;
}
.media-idea-box .text h2 {
	font-size: 30px;
	color: #232323;
	margin-bottom: 10px;
}
.media-idea-box .text h2 span {
	color: #1A58AB;
}
.media-idea-box .text p {
	font-size: 18px;
	color: #666666;
}
.media-idea-box .media-box {
	margin-top: 50px;
	display: table;
	border-collapse: collapse;
}
.media-idea-box .media-box li {
	float: left;
	width: 210px;
	height: 122px;
	border: 1px solid #E2E2E2;
	text-align: center;
	line-height: 120px;
	margin: 0 0 -1px -1px;
}
.media-idea-box .media-box li img {
}
.media-idea-box .media-box li:hover img {
}
.media-idea-box .media-box li:hover {
	box-shadow: 0 0 30px #E0E0E0;
}
.idea-information .more-box {
	margin: 28px 0;
	text-align: center;
}
.idea-information .more-box a {
	display: inline-block;
	padding: 7px 25px;
	border: 2px solid #6A6A6A;
	font-size: 14px;
	color: #fff;
}
.high-end-banner {
	height:850px;
	background: url("../image/high-end-banner.jpg") no-repeat;
	background-size: cover;
	padding-top: 175px;
}
.high-end-banner {
	text-align: center;
}
.high-end-banner .text h1 {
	font-size: 26px;
	color: #333333;
	margin: 8px 0 10px;
}
.high-end-banner .text b {
	font-size: 36px;
	color: #0E4592;
	display: block;
	margin-bottom: 50px;
}
.high-end-banner .text p {
	color: #6B6F76;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 20px;
}
.position-web-design {
	height:785px;
	background: url("../image/high-end-img08.jpg");
	background-size: cover;
}
.position-web-design .text-box {
	width:1260px;
	margin: 0 auto;
}
.position-web-design .text {
	padding-top: 254px;
	text-align: left;
	color: #FFFFFF;
}
.position-web-design .text span {
	font-size: 22px;
}
.position-web-design .text b {
	font-size: 45px;
	display: block;
	margin-bottom: 30px;
}
.position-web-design .text p {
	font-size: 16px;
	line-height: 30px;
}
.strict-plot {
	background: url("../image/high-end-img09.jpg");
	height:690px;
	background-size:cover;
}
.strict-plot .plan {
	background: none;
	height:auto;
}
.strict-plot .plan .text-box span {
	font-weight: 600;
}
.strict-plot .plan .more a {
	border: 2px solid rgba(255, 255, 255, .3);
}
.strict-plot .plan-steps li i {
	background-color: rgba(255, 255, 255, .3);
}
.Visual-design-box {
	background: url("../image/high-end-img11.jpg");
	background-size:cover;
}
.versions {
	background: url("../image/high-end-img13.jpg") no-repeat center top;
	height: 688px;
	background-size:cover;
}
.versions-box {
	text-align: center;
	padding-top: 140px;
	position: relative;
}
.versions-box p {
	font-weight: 600;
	font-size: 41px;
	color: #333333;
}
.versions-box ul {
	position: absolute;
	top:307px;
	left:50%;
	transform: translateX(-50%);
	-ms-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-o-transform:translateX(-50%);
}
.versions-box ul li {
	float: left;
}
.versions-box ul li+li {
	border-left: 1px solid #636363;
}
.versions-box ul li a {
	font-size:16px;
	color:#636363;
	padding: 0 10px;
}
.versions-box .img-box {
	text-align: center;
	margin-top: 90px;
}
.versions-box .img-box span+span {
	margin-left: 70px;
}
.forward {
	height:800px;
	background: url("../image/high-end-img03.jpg");
	background-size: cover;
	position: relative;
}
.forward .text {
	position: absolute;
	right:395px;
	top:157px;
}
.forward .text b {
	font-size: 35px;
	color: #FFFFFF;
}
.forward .text p {
	font-size: 18px;
	color: #FFFFFF;
	line-height: 30px;
	margin: 20px 0 55px;
}
.forward ._text {
	width: 366px;
	height:274px;
	border: 4px solid #587DAC;
	padding-left: 50px;
}
.forward ._text .img-box28 {
	width:160px;
	height: 100px;
	border-left: 2px solid #3E6AA3;
	padding-top: 72px;
	padding-left: 18px;
	margin-bottom: 30px;
}
.forward ._text p {
	font-size: 20px;
	color: #FFFFFF;
	line-height: 28px;
	font-weight: 600;
}
.animate01 {
	opacity: 0;
	transform: translateY(100px);
	-ms-transform:translateY(100px);
	-moz-transform:translateY(100px);
	-webkit-transform:translateY(100px);
	-o-transform:translateY(100px);
}
.animate07 {
	opacity: 0;
	transform: translateY(-100px);
	-ms-transform:translateY(-100px);
	-moz-transform:translateY(-100px);
	-webkit-transform:translateY(-100px);
	-o-transform:translateY(-100px);
}
.noneAnimate {
	opacity:1;
 transition: all .8s;
 -webkit-transition:all .8s;
 -moz-transition:all .8s;
 -o-transition:all .8s;
	transform: translateY(0);
	-ms-transform:translateY(0);
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
}
.brand-design .animate01 .center-img-box {
	transform: rotate(200deg);
	-ms-transform:rotate(200deg);
	-moz-transform:rotate(200deg);
	-webkit-transform:rotate(200deg);
	-o-transform:rotate(200deg);
}
.brand-design .noneAnimate .center-img-box {
 transition: all .8s;
 -webkit-transition:all .8s;
 -moz-transition:all .8s;
 -o-transition:all .8s;
	transform: rotate(0deg);
	-ms-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	-o-transform:rotate(0deg);
}
.animate02 {
	opacity:0;
	transform: translateX(-350px);
	-ms-transform:translateX(-350px);
	-moz-transform:translateX(-350px);
	-webkit-transform:translateX(-350px);
	-o-transform:translateX(-350px);
}
.animate04 {
	opacity:0;
	transform: translateX(350px);
	-ms-transform:translateX(350px);
	-moz-transform:translateX(350px);
	-webkit-transform:translateX(350px);
	-o-transform:translateX(350px);
}
.noneAnimate02 {
	opacity:1;
 transition: all .8s;
 -webkit-transition:all .8s;
 -moz-transition:all .8s;
 -o-transition:all .8s;
	transform: translateX(0);
	-ms-transform:translateX(0);
	-moz-transform:translateX(0);
	-webkit-transform:translateX(0);
	-o-transform:translateX(0);
}
.animate03 {
	opacity:0;
	transform: scale(0) rotate(0deg);
	-webkit-transform: scale(0) rotate(0deg);
	-ms-transform: scale(0) rotate(0deg);
	-moz-transform: scale(0) rotate(0deg);
	-o-transform: scale(0) rotate(0deg);
}
.noneAnimate03 {
	opacity:1;
 transition: all .5s;
 -webkit-transition:all .5s;
 -moz-transition:all .5s;
 -o-transition:all .5s;
	transform: scale(1) rotate(360deg);
	-webkit-transform: scale(1) rotate(360deg);
	-ms-transform: scale(1) rotate(360deg);
	-moz-transform: scale(1) rotate(360deg);
	-o-transform: scale(1) rotate(360deg);
}
.animate06 {
	opacity:0;
}
.noneAnimate06 {
	opacity:1;
	transition: all 3s ease-in-out;
	-webkit-transition:all 3s ease-in-out;
	-moz-transition:all 3s ease-in-out;
	-o-transition:all 3s ease-in-out;
}











@charset "UTF-8";
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.fl {
	float:left;
}
.fr {
	float:right;
}
html * {
	outline: 0;
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
body {
	color: #999999;
	overflow-x:hidden;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	margin: 0;
	padding: 0
}
input, select, textarea {
	font-size: 100%
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
fieldset, img {
	border: 0
}
abbr, acronym {
	border: 0;
	font-variant: normal
}
del {
	text-decoration: line-through
}
address, caption, cite, code, dfn, em, th, var {
	font-style: normal;
	font-weight: 500
}
ol, ul {
	list-style: none
}
caption, th {
	text-align: left
}
 audio:not([controls]) {
 display: none;
 height: 0;
}
 [hidden], template {
 display: none;
}
a {
	background: transparent;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
a:active {
	outline: 0;
}
abbr[title] {
	border-bottom: 1px dotted;
}
b, strong {
	font-weight: bold;
}
dfn {
	font-style: italic;
}
mark {
	background: #ff0;
	color: #000;
}
small {
	font-size: 80%;
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
img {
	border: 0;
	vertical-align: middle;
}
 svg:not(:root) {
 overflow: hidden;
}
hr {
	box-sizing: content-box;
	height: 0;
}
pre {
	overflow: auto;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}
code, kbd, pre, samp {
	font-family: monospace, monospace;
	font-size: 1em;
}
button, input, optgroup, select, textarea {
	outline: none;
	color: inherit;
	font: inherit;
	margin: 0;
}
button {
	overflow: visible;
}
button, select {
	text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled], html input[disabled] {
	cursor: default;
}
 button::-moz-focus-inner, input::-moz-focus-inner {
 border: 0;
 padding: 0;
}
input {
	line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
	padding: 0;
}
 input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
 height: auto;
}
input[type="search"] {
	-webkit-appearance: textfield;
}
 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}
legend {
	border: 0;
	padding: 0;
}
textarea {
	overflow: auto;
	resize: vertical;
}
optgroup {
	font-weight: bold;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td, th {
	padding: 0;
}
html, button, input, select, textarea {
	font-family: 'Microsoft Yahei', "Helvetica", "STHeiTi", "Arial", "sans-serif";
}
h1, h2, h3, h4, h5, h6, p, figure, form, blockquote {
	margin: 0;
}
ul, ol, li, dl, dd {
	margin: 0;
	padding: 0;
}
ul, ol {
	list-style: none outside none;
}
 input::-moz-placeholder, textarea::-moz-placeholder {
 color: #ccc;
}
 input:-ms-input-placeholder, textarea:-ms-input-placeholder {
 color: #ccc;
}
 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
 color: #848485;
}
* {
	box-sizing: border-box;
}