.box{min-height: 600px;}
.t-c{text-align: center;}
.t-r{text-align: right;}
.f-l{float: left;}
.f-r{float: right;}

.products .blox.section-bg1, .products .blox.section-bg2, .products .blox.section-bg3 {padding: 200px 0}
.products .blox.section-bg1{background-size: auto 100%;}

.blox{padding: 0}
.blox .container{position: relative;}
.blox img{position: absolute;right: 10px;bottom:10px;}

.blox.section-bg1{background: url(../bg-fhcms.jpg) no-repeat center top;background-size:100% auto ;border-top: none;}
.section-bg1 .container{/*background: url(../fhcms.png) no-repeat 580px 113px;*/min-height: 420px;position: relative;}
.section-bg1 h1,.section-bg1 h4{color: #fff;}
.section-bg1 h3{position: absolute; top: 90px;right: 13%;font-family: "Lucida Handwriting","Comic Sans Ms";color: #fff;}


ol li{ list-style: square;}

.device{background-color: #99e8fe; position: relative;}
.device article{position: absolute; top:50px;width: 80%;}
.device .img{padding-top: 150px;text-align: right;}

.sns{height: 800px;background: #2932a1 url(../cms/sns.jpg) no-repeat center top;}
.sns h2{color:#FFF;font-size: 28px;padding-top: 40px;}
.sns p{color:#FFF;}

.HTML5 {background: #FFF url(../cms/cssbg.png) repeat-x center bottom;height: 700px}
.HTML5 article{padding: 30px 15%;}
.HTML5 article img{width: 256px;margin: 10px 20px;}
.HTML5 h3{padding: 25px;}

.browser {background-color: #d8e9ec;}
.browser h3{padding: 80px 0 30px 0}
.browser img{width: 128px;}
.portfolio-item{width: 186px;height: 185px;float: left;}
.portfolio-item .img-item{padding: 25px 0;text-align: center;}

.upload{background-color: #fff;}
.upload h2,.seo h2,.retina h2{padding: 40px 0 10px 0}
.upload .container{background: #fff url("../cms/upload.jpg") no-repeat left 170px;height: 600px}
.upload ul{padding-top: 20px;}
.upload ul li{padding-left: 500px;height: 28px}



.seo{background: #00c7ff}
.seo .container{background: url(../cms/seo.jpg) no-repeat right bottom;height: 550px}

.retina{background: #22234d url(../cms/retina.jpg) no-repeat center bottom;}
.retina h2,.retina p{color: #fff;}
.retina .container{background: url(../cms/pixels.png) no-repeat center bottom;height: 400px}



/*crm*/
.crm h2{padding: 50px 0 0 0;}

.blox.section-bg2 {background: #484065; height: 400px;border-top: none;}
	.ngs .blox.section-bg2{background-color: #9cd6ec;}
	.ngs .section-bg2 *{color: #333;}
	.ngs .section-bg2 .button{color: #fff;}
.section-bg2 .container{/*background: url(../cms/crm.jpg) no-repeat right bottom;*/height: 400px;}
.section-bg2 h1,.section-bg2 h4{color: #fff;}
.section-bg2 h1 small{font-size: 14px; color:#fff;font-weight: bold;}
.section-bg2 h3{position: absolute; top: 300px;left: 30%;font-family: "Lucida Handwriting","Comic Sans Ms";color: #fff;}
.section-bg2 p{color: #fff;}

.section-bg2 h1{padding-top: 50px;}

.tese {background-color: rgb(211,63,40);color: #FFF;}
.tese *{color: #fff;}
.tese article{position: relative;height: 600px}
.tese article div{width: 340px;padding: 10px 40px 0 130px}
.tese li{list-style: square;}
.tese canvas{position: absolute;bottom: 0;left:50%;margin-left: -300px;}

.module{height: 800px;overflow: hidden; position: relative;}
.module article{position: relative;}
.module .circle {margin-top: -250px;}
.module  h2{padding: 60px 0 100px 0; z-index: 5;text-align: center;width: 100%; height: 50px; position: absolute;background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);}
	:root *{filter:none;}
.module .circle span{border: 1px #dedede solid;border-radius: 50%; display: block;margin: 0 auto;}
.module .circle .r6{width: 200px;height: 200px;margin-top: 74px;}
.module .circle .r5{width: 350px;height: 350px;margin-top: 74px;}
.module .circle .r4{width: 500px;height: 500px;margin-top: 100px;}
.module .circle .r3{width: 700px;height: 700px;margin-top: 100px;}
.module .circle .r2{width: 900px;height: 900px;margin-top: 100px;}
.module .circle .r1{width: 1100px;height: 1100px;}
.module dl{position: absolute; width: 200px;height: 200px;overflow: hidden;border-radius: 50%;text-align: center;color: #fff;}
.module dt{height: 40px;padding-top: 40px;border-radius: 40%;font-size: 24px;font-weight: bold;}
.module dd{padding: 15px 20px}
.module .m1{left: 50%;top:  470px;margin-left: -100px;color: #333;} .module .m1 dd{font-size: 16px;}
.module .m2{left: 20%;top:  400px;margin-left: -100px;background-color: #000;}
.module .m3{left: 26%;top:  650px;margin-left: -100px;background-color: #000;}
.module .m4{left: 50%;top:  780px;margin-left: -100px;background-color: #000;}
.module .m5{left: 74%;top:  650px;margin-left: -100px;background-color: #000;}
.module .m6{left: 80%;top:  400px;margin-left: -100px;background-color: #000;}
.module .m2 dt{background-color: #c3272b;} .module dl.m2 {background-color: #9d2933;}
.module .m3 dt{background-color: #ff8936;} .module dl.m3 {background-color: #ff7500;}
.module .m4 dt{background-color: #0aa344;} .module dl.m4 {background-color: #0c8918;}
.module .m5 dt{background-color: #44cef6;} .module dl.m5 {background-color: #1685a9;}
.module .m6 dt{background-color: #ff4777;} .module dl.m6 {background-color: #f00056;}



.devices{background-color: rgb(74,182,135);}
.devices h2{padding: 10%;color: #fff;}
.devices dl{width: 150px;height: 150px; border-radius: 50%;background-color: #fff;float: left;margin: 0 18px;_margin:0 9px;overflow: hidden;}
.devices dd{height:50%;padding-top: 25px;}
.devices dd i{font-size:65px;}
.devices dd i.icomoon{font-size: 60px;}
.devices dd i.icomoon-mobile-2, .devices dd i.icomoon-mobile{font-size: 40px;margin-top: 10px;display: block}
.devices dt{background-color: #f2f2f2;height: 35%; line-height: 300%}
.devices h4{padding: 50px 10%;clear: both;color: #FFF;}

.info p{width: 70%;}
.info dl{width: 40%;padding-bottom: 20px;}
.info dt{font-weight: bold;}
.info {background: rgb(244,167,51); }
.info article{ position: relative;height:600px;}
.info #chart{position: absolute;right: 10px;bottom: 10px}

#bchart{width:600px;height:400px}


/*services*/
.services .box{padding: 80px 0}.services .sns{padding-top: 30px;}
.services .box p{padding: 0px 10%}
.services .retina .container{background: none;}
.webpage{background: #35cbd9 url(../bg/services.jpg) no-repeat center bottom;}
.w-design{background-color: rgb(10,144,226);background: #000 url(../bg/dev.jpg) no-repeat center top;}
.e-marketing{background-color: rgb(152,226,237);}
.e-office{background-color: rgb(53,203,217);background: #33afcc url(../bg/nopaper.jpg) no-repeat center bottom;}
.v-design{background-color: rgb(40,60,77);;}
.v-design *,.w-design *{color: #fff;}

.site .blox{background-color: #f3ac1d;}
.site .blox .container{ background: url(../bg/jz.jpg) no-repeat right center;}
.develop .blox{background-color: #becf40;} .develop .blox.section-bg2 *{color: #333;}.develop .blox.section-bg2 a{color: #fff;}
.develop .blox .container{ background: url(../bg/develop.jpg) no-repeat right center;}
.office .blox{background-color: #84d1c6;}
.office .blox .container{ background: url(../bg/office2.jpg) no-repeat right bottom;}
.snsm .blox{background-color: #4ec3c7;}
.snsm .blox .container{ background: url(../bg/wzh.jpg) no-repeat right top;}
.design .blox{background-color: #01b9dd;}
.design .blox .container{ background: url(../bg/office.jpg) no-repeat right center;}



.sitelinks li{ float: left;width: 5%;margin-bottom: 5px;height: 18px;overflow: hidden;}
.sitelinks li a{font-size: 12px;}



/*home*/
#layerslider{width: 100%; min-height: 550px; margin: 0px auto;;}

#home h4.slight{font-size: 14px;}
#home ol li{list-style: none;margin-bottom: 8px;font-size: 12px;margin-left: 0;padding-left: 0;}
#home ol {margin-left: 0;padding-left: 0;}
#home .devices{padding: 50px 0;background-color: rgb(210,97,127);}
.contact{background-color: #f5f5f5;}
.our-process-wrap{/*background-color: rgb(53,203,217);*/}

@media screen and (-webkit-min-device-pixel-ratio: 1.5),screen and (max-moz-device-pixel-ratio: 1.5),screen and (min-width: 767px){
	/*.blox.section-bg1{background-image: url(../fhcms@2x.png);background-size: auto 300px;}*/
	.sns{background-image: url(../cms/sns@2x.jpg);background-size: auto 100%;}
	.HTML5 {background-image: url(../cms/cssbg@2x.png);background-size: auto 250px;}
	.retina {background-image: url(../cms/retina@2x.jpg);background-size: auto 400px;}
	.seo .container {background-image: url(../cms/seo@2x.jpg);background-size: auto 400px;}
	.upload .container {background-image: url(../cms/upload@2x.jpg);background-size: auto 400px;}
	.retina .container {background-image: url(../cms/pixels@2x.png);background-size: auto 162px;}


	.webpage {background-image: url(../bg/services@2x.jpg);background-size: auto 400px;}
	.w-design {background-image: url(../bg/dev@2x.jpg);background-size: auto 100%;}
	.e-office {background-image: url(../bg/nopaper@2x.jpg);background-size: auto 360px;}

	.site .blox .container {background-image: url(../bg/jz@2x.jpg);background-size: auto 240px;}
	.develop .blox .container {background-image: url(../bg/develop@2x.jpg);background-size: auto 330px;}
	.office .blox .container {background-image: url(../bg/office2@2x.jpg);background-size: auto 330px;}
	.snsm .blox .container {background-image: url(../bg/wzh@2x.jpg);background-size: auto 330px;}
	.design .blox .container {background-image: url(../bg/office@2x.jpg);background-size: auto 240px;}



	/*.blox.section-bg2 {background-size: auto 400px;}*/
	/*.section-bg2 .container{background-size: auto 330px;background-image: url(../cms/crm@2x.jpg);}*/
}

@media only screen and (min-width: 1025px) {/*pc*/
	#layerslider{height: 530px;}
	.ls-layer img{height: 550px !important;}
}

@media only screen and (max-width: 767px) {
	#layerslider{min-height:220px }
	h1{font-size: 28px;font-weight: bold;}
	h2{font-size: 24px;}
	h3{font-size: 18px;line-height: 150%}
	.section-bg2 h3{position: inherit;}
	.container{width:90%;}
	.HTML5 article{padding: 0}
	.HTML5 article img{width: 40%; height: auto;margin: 0;}
	.container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .one-half.column, .container .two-thirds.column{width: 100%;}
	.devices dl{margin: 5px ;}
	.blox img{position: inherit; max-width: 95%;margin: 0 auto;height: auto;}
	.blox.section-bg2,.section-bg2 .container{height: auto;}
	.blox .container p{color: #fff !important;}

	.sns{background-size: auto 100%;}
	.HTML5 {background-size: auto 250px;}
	.retina {background-size: auto 200px;}
	.seo .container {background-size: auto 200px;padding-bottom: 200px;}
	.upload .container {background-size: auto 400px;}
	.retina .container {background-size: auto 162px;padding-bottom: 100px;}


	.webpage {background-size: 100% auto;}
	.w-design {background-size: auto 100%;}
	.e-office {background-size: auto 240px;}

	.blox .container {background-size: auto 240px;min-height: 600px;background-position: center bottom !important;padding-bottom: 230px;}
	.develop .blox .container {background-size: auto 330px;}
	.office .blox .container {background-size: auto 330px;}
	.snsm .blox .container {background-size: 100% auto;background-position: center top !important;padding-bottom: 10px;padding-top: 230px;min-height: 300px;}
	.design .blox .container {background-size: 100% auto;min-height: 300px}

	.crm .blox .container, .ngs .blox .container {padding-bottom: 0;}
	.module .circle{display: none}
	.module{height: auto;}
	.module .m1{margin-top: 150px;background-color: rgb(72,64,121);color: #fff;}
	.module dl{position: static;margin: 10px auto;margin-left: auto !important;}

	.tese article div{padding: 10px 0;width: auto;}
	#bchart,.info #chart canvas{width: 100% !important;height: auto !important;margin: 0 auto;position: static;}
	.info #chart{position: static;}

	.info p,.info dl{width: auto;}



	.products .blox.section-bg1, .products .blox.section-bg2, .products .blox.section-bg3{padding: 50px 10px;}
	.products .blox .container {padding-bottom: 0;min-height: 300px}
	.section-bg1 h3{position: inherit;}

	.device .container{height: auto !important;min-height: 300px;}
	.device article{position: inherit;width: auto;}

	.upload .container{height: auto;background-position: 0 bottom;}
	.upload ul{padding-bottom: 350px;}
	.upload ul li{padding-left: inherit;}
}
@media only screen and (max-width: 1024px) {
	.blox.section-bg1{background-size: auto 100% !important;height: auto}
	.blox .container{}
	.blox .container p{color: #ddd;}
	.device img{width: 100%;height: auto}
}
@media only screen and (max-width: 959px){
	.plan-wrap {width: 95%;}
}
@media only screen and (max-width: 380px){
	#layerslider{min-height:200px }
}
@media only screen and (max-width: 320px){
	#layerslider{min-height:160px }
}