/**
* Demo Stuff
*/
body {
/* font-family: 'Montserrat', sans-serif; */
}
.container {
  text-align: center;
}
h1 {
  color: #117964;
  font-weight: 400;
  font-size: 2em;
  margin: 1em 0;
}
/**
* iPhone
* Credits: Flat, Scaleable CSS iPhone Illustration by Tom Hergenreter
* http://codepen.io/TomHergenreter/details/qDywF/
*/
.iphone {
  width: 16.06em;
  height: 30.6em;
  border-radius: 1.875em;
  margin: 2em;
  position: relative;
  display: inline-block;
  background: #fff;
}
.iphone__item {
  width: 16.06em;
  height: 1em;
  position: absolute;
  bottom: -2em;
  color: #158f76;
  text-align: center;
}
.iphone__power-btn {
  width: 2.188em;
  height: .188em;
  background: #e0e0e0;
  position: absolute;
  right: 2.5em;
  top: -0.188em;
}
.iphone__left-btn {
  width: .188em;
  height: 1.250em;
  top: 3.250em;
  left: -0.188em;
  position: absolute;
  background: #e0e0e0;
}
.iphone__left-btn:before {
  content: '';
  width: .188em;
  height: .875em;
  position: absolute;
  top: 3em;
  background: #e0e0e0;
}
.iphone__left-btn:after {
  content: '';
  width: .188em;
  height: .875em;
  position: absolute;
  top: 5.5em;
  background: #e0e0e0;
}
.iphone__details {
  width: .438em;
  height: .438em;
  border-radius: 100%;
  position: relative;
  top: 1.313em;
  left: 8em;
  background: #7c7c7c;
}
.iphone__details:before {
  content: '';
  width: 2.5em;
  height: .25em;
  border-radius: .25em;
  position: absolute;
  top: 1em;
  left: -1em;
  background: #7c7c7c;
}
.iphone__home-btn {
  width: 2.25em;
  height: 2.25em;
  border-radius: 100%;
  position: absolute;
  bottom: 1em;
  right: 6.75em;
  background: #f7f7f7;
}
.iphone__home-btn:before {
  content: '';
  width: .813em;
  height: .813em;
  border: .15em solid #a8a8a8;
  border-radius: .2em;
  position: absolute;
  top: .6em;
  left: .57em;
}
.iphone__screen {
 /* width: 14.5em;
  height: 22.938em; */
		width: 100%;
		height: auto;
  top:0em;
/*left: .750em; */
  right:0rem;
  overflow: hidden;
}

.iphone__content {
  position: relative;
/*background-color: #D2527F; */
  width: 100%;
  height: 100%;
}
/**
* Navigation Defaults
*/
.nav {
/*position: absolute; */
  position:relative;
  z-index: 100;
  opacity: 0;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.nav--active .nav {
  opacity: 1;
  background-color: rgba(10,10,10,0.8);
}
.nav__list {
  margin: 0;
		display: block;
  padding:0.51611rem 0.75777rem;  /* 35px 20px */
}
.nav__item {
  list-style-type: none;
  text-align: right;
		padding:0.13888rem 0 0.13888rem 0.13888rem;
}
.nav__item .nav__link span
{
	font-size: 0.25rem;  /* 18px */
	display: none;
}
.nav__link {
  font-size: 1.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  opacity: 1;
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}
/* Default navigation icon */
.nav__trigger {
  display: block;
  position: relative;
		width:0.55555rem;   /* 40px */
		height: 0.41666rem;  /* 30px */
		text-align: center;
  float:right;
  top: 0px;
		right:0.13888rem;  /* 10px */
  z-index: 200;
		padding:0.31944rem 0;  /* 23px 0 */
}
.nav--active .nav__trigger {
  opacity: 0.99;
}
.nav__icon {
  display:block;
  position: relative;
  width: 0.41666rem;  /* 30px */
  height: 0.04166rem;
  background-color: #007AFF;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.nav__icon:before,
.nav__icon:after {
  content: '';
  display: block;
  width: 0.41666rem;  /* 30px */
  height: 0.04166rem;  /* 3px */
  position: absolute;  
  background: #007AFF;
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  transition-property: margin, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.nav__icon:before {
  margin-top: -7px;
}
.nav__icon:after {
  margin-top: 7px;
}

.nav--active .nav__icon:before, .nav--active
.nav__icon:after
{
	background: #ffffff;
}
/* Don't nest if you don't have to. */
/**
* Style #1
*/
.style-1 .nav {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  width: 100%;
  height: 100%;
}
.style-1 .nav__link {
  opacity: 0;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.style-1 .nav--active .nav__link {
  opacity: 1;
}
.style-1 .nav--active .nav {
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.style-1 .nav--active .nav__icon {
  background: rgba(0, 0, 0, 0);
}
.style-1 .nav--active .nav__icon:before {
  margin-top: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.style-1 .nav--active .nav__icon:after {
  margin-top: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
/**
* Style #2
*/
.style-2 {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.style-2 .nav {
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.style-2 .nav--active .nav {
  -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
}
.style-2 .iphone__content {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.style-2 .nav--active .iphone__content {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.style-2 .navi__icon {
  background: rgba(0, 0, 0, 0);
}
.style-2 .navi__icon:before {
  margin-top: 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.style-2 .navi__icon:after {
  margin-top: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.style-2 .nav--active .nav__icon {
  background: rgba(0, 0, 0, 0);
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.style-2 .nav--active .nav__icon:before {
  margin-top: 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.style-2 .nav--active .nav__icon:after {
  margin-top: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
/**
* Style #3
*/
.style-3 .nav {
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.style-3 .nav--active .nav {
  -webkit-transform: translateX(20%);
          transform: translateX(20%);
}
.style-3 .iphone__content {
  -webkit-transform: scale(1) translateX(0);
          transform: scale(1) translateX(0);
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.style-3 .iphone__screen {
  background-color: #333;
}
.style-3 .nav--active .iphone__content {
  -webkit-transform: scale(0.9) translateX(-90%);
          transform: scale(0.9) translateX(-90%);
}
.style-3 .nav__icon {
  background: rgba(0, 0, 0, 0);
}
.style-3 .nav__icon:before {
  margin-top: 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.style-3 .nav__icon:after {
  margin-top: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.style-3 .nav--active .nav__icon {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
/**
* Style #4
*/
.style-4 .nav {
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.style-4 .nav--active .nav {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.style-4 .nav--active .nav__icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.style-4 .nav__link {
  opacity: 0;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.style-4 .nav--active .nav__link {
  opacity: 1;
}
/**
* Style #5
*/
.style-5
{
	height: 100%;
	width: 100%;
	top:0px;
	margin-top: -0.79405rem;  /* -40px */
}
.style-5 .nav {
  -webkit-transform: translate(100%, -100%) scale(0.5);
          transform: translate(100%, -100%) scale(0.5);
  border-radius: 100%;
}
.style-5 .nav--active .nav {
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
  border-radius: 0;
  width: 100%;
  height: 100%;
}
.style-5 .nav__link {
  opacity: 0;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.style-5 .nav--active .nav__link {
  opacity: 1;
}
.style-5 .nav--active .nav__icon {
  background: rgba(0, 0, 0, 0);
}
.style-5 .nav--active .nav__icon:before {
  margin-top: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.style-5 .nav--active .nav__icon:after {
  margin-top: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
/**
* Style #6
*/
.style-6 .nav {
  -webkit-transform: rotateZ(-90deg);
          transform: rotateZ(-90deg);
  width: 100%;
  height: 100%;
}
.style-6 .nav--active .nav {
  -webkit-transform: rotateZ(0);
          transform: rotateZ(0);
}
.style-6 .nav__link {
  opacity: 0;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.style-6 .nav--active .nav__link {
  opacity: 1;
}
.style-6 .nav__icon {
  background: rgba(0, 0, 0, 0);
}
.style-6 .nav__icon:before {
  margin-top: 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.style-6 .nav__icon:after {
  margin-top: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.style-6 .nav--active .nav__icon {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}


/* page style is here */

/* 案例展示 Case presentation */
.head-t-pic
{
	padding: 0;
	position: relative;
	width: 100%;
	height: 5.55555rem;   /* 400px */
	background-size:auto 100% !important;
	overflow: hidden;
}
.head-t-pic-title
{
	width: 100%;
	position: absolute;
	top:46%;
	text-align: center;
	padding: 0;
	color:#ffffff;
	text-shadow:1px 1px 3px #303030;
	font-weight:300;
}
.head-t-pic-title .b-title
{
	font-size:0.52777rem;  /* 38px */
	line-height: 150%;
	letter-spacing: 0.02777rem;
}
.head-t-pic-title .l-title
{
	font-size: 0.33333rem;  /* 24px */
	line-height: 100%;
	letter-spacing: 0.04166rem;
}
.page-nav
{
	width: 100%;
	height: 0.83333rem;  /* 60px */
	padding:0.25rem 0;  /* 18px */
	line-height: 100%;
		position: relative;
}
.page-nav .bantitle
{
	width: 60%;
	height: 100%;
	line-height: 100%;
	font-size:0.33333rem;  /* 24px */
	color:#ffffff;
	margin-left: 0.27777rem;  /* 20px */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.page-nav .bantitle a
{
	color:inherit;
}
.page-nav .menunav
{
	width: 0.44444rem;  /* 32px */
	height: 0.83333rem;  /* 60px */
	margin-right: 0.27777rem; 

	background: url(../img/bottom_d_w.png.png) no-repeat;
	background-position:0rem -0.105rem;
	background-size:auto 50%;
}

.page-nav .menunav .menulist
{
	margin: 0;
	padding:0;
	position: absolute;
	right: 0px;
	top:0.83333rem;
	width: 100%;
	z-index: 9;
}
.page-nav .menunav .menulist li
{
	background: #57a8e9;
	color: #ffffff;
	padding: 0;
	display: block;
	height:0rem;  /* 50px */
	line-height: 100%;
	overflow: hidden;
	transition: 0.5s;
}
.page-nav .menunav .menulist .select
{
	font-weight: bold;
	text-shadow: 1px 1px 3px #909090;
}
.page-nav .menunav .menulist li a
{
	display: block;
	height: 100%;
	width: 100%;
	font-size:0.34722rem;  /* 25px */
	text-align: center;
	color:#ffffff;
	line-height: 100%;
	border-top: 1px solid #6CBCE6;
	padding:0.16666rem 0;  /* 12px 0 */
}
.page-nav .menunav .menulist li a:hover
{
	font-weight: bold;
}

.page-nav .menunav:hover .menulist li
{
	height: 0.69444rem;  /* 50px */
}

.case-nav-list
{
	width: 98%;
	margin: 0.41666rem auto;  /* 40px auto */
	padding: 0 0;
}
.nav-frame
{
	display: block;
	height: auto;
	width: 100%;
	padding: 0;
	}
.nav-frame li
{
	float: left;
	width: 48.5%;
	height: auto;
	margin:0.20833rem 0.75%;
	overflow: hidden;
}
.nav-frame li a
{
	color:inherit;
}
.nav-frame .nav-list-pic
{
	width: 100%;
	height:6.125rem;  /* 220px */
	text-align: center;
	overflow: hidden;
}
.nav-frame .nav-list-pic img
{
	width: auto;
	height: 100%;
	margin: 0 auto;
}
.nav-frame .nav-list-title
{
	width: 100%;
	margin: 0.06944rem auto;
	padding: 0.16666rem 0.02777rem;  /* 12px 2px */
	background: #e0e0e0;
}
.nav-frame .nav-list-title .b-title
{
	margin: 0;
	padding:0 0.11111rem 0 0.11111rem;
	font-size: 0.33333rem;  /* 24px */
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 100%;
	overflow: hidden;
}
.nav-frame .nav-list-title .l-title
{
	margin:0.11111rem 0 0 0;  /* 5px 0 0 0 */
	padding: 0 0.11111rem 0 0.11111rem;
	text-align: right;
	color:#666666;
	background: url(../img/t_02-0.7.png) no-repeat 0.13888rem center;
	background-size: auto 100%;
}

.bottom-button
{
	width: 100%;
	max-width:10rem;
	margin:0.27777rem auto;  /* 20px auto */
	padding:0.08333rem 0;  /* 6px 0 */
	text-align: center;
}
.bottom-button .button-cont
{
	display: block;
	height: auto;
	padding: 0;
}
.bottom-button li
{
	font-size: 0.34722rem;  /* 25px */
	display: inline-block;
	line-height: 110%;
	color:#505050;
	margin: -0.05555rem auto;
}
.bottom-button li:last-child, .bottom-button li:first-child
{
	margin:0 0.41666rem;  /* 0 30px */
}
.bottom-button .button-cont .paginate_button
{
	width:0.41666rem;  /* 30px */
	height:0.41666rem;
	overflow: hidden;
	border-radius: 100%;
	text-align: center;
	line-height: 130%;
	background: #6CBCE6;
}
.bottom-button .button-cont .active
{
	color:#ffffff;
}
.bottom-button li a
{
	color:inherit;
}
.bottom-button .previous, .bottom-button .next
{
	display: inline-block;
	width:2.08333rem;   /* 150px */
	height:0.55555rem;  /* 40px */
	border:1px solid #2793e9;
	border-radius: 5px;
}
.bottom-button .previous a, .bottom-button .next a
{
	display: block;
	width: 98%;
	height: 100%;
	margin: 0 auto;
	color:#2793e9;
	font-size:0.30555rem;  /* 22px */
	padding: 0.06944rem 0;
}

.about-cont, .contactus-cont, .news-cont
{
	width:94%;
	margin: 0.27777rem auto;  /* 20px auto */
}
.head-pic
{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
.head-pic img
{
	width: 100%;
	height: auto;
}
.acticle
{
	width: 100%;
	padding: 0.20833rem 0;  /* 15px 0 */
	font-size:0.30555rem;  /* 22px */
}

.cont-nav .honor-cont-nav
{
	display: block;
	width: 100%;
	height: auto;
}
.cont-nav li
{
	display: block;
	margin: 0.48611rem 0;  /* 35px 0 */
	position: relative;
}
.cont-nav li:last-child
{
	border-bottom: 0;
}
.cont-nav li a
{
	color:inherit;
}
.cont-nav .list_title-pic
{
	width: 45%;
	height:2.61833rem;  /* 195px */
	background:#DDDDDD;
	border-radius:0.13888rem;
	overflow: hidden;
}
.cont-nav .list-title
{
	width: 50%;
}
.cont-nav .list-title .b-title
{
	margin: 0;
	font-size: 0.36111rem;  /* 26px */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}
.cont-nav li:hover .list-title .b-title
{
	font-weight: bold;
}

.cont-nav .list-title .l-title
{
	width: 50%;
	position: absolute;
	bottom: 0.01388rem;  /* 1px */
	text-align: right;
	background: url(../img/t_02.png) no-repeat left center;
	background-size: auto 120%;
	color:#C0C0C0;
	margin: 0;
}
.cont-nav .cont-fgxline
{
	width: 98%;
	border:0;
	margin:0 auto;
	height: 1px;
	background: #e0e0e0;
}

.honor-cont-nav
{
margin: 0.27777rem 0;  /* 20px 0 */
}
.honor-cont-nav .nav-frame
{
	display: block;
	width: 94%;
	height: auto;
	margin: 0 auto;
}
.honor-cont-nav .nav-frame .nav-list-title
{
	background: #eeeeee;
}
.honor-cont-nav .nav-frame li
{
	float: left;
	width: 48.5%;
	height: auto;
}
.honor-cont-nav .nav-frame .nav-list-pic
{
	width: 100%;
	height:3.33333rem;  /* 240px */
	overflow: hidden;
}
.honor-cont-nav .nav-frame .nav-list-pic img
{
	width: 100%;
	height: 100%;
}
.honor-cont-nav .nav-frame .b-title
{
	width: 100%;
	padding: 0.06944rem;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.article-frame
{
	margin: 0.41666rem 0;  /* 30px 0 */
	width: 100%;
	height: auto;
	padding: 0.27777rem 0.13888rem;  /* 20px 10 */
}
.article-frame .article_title
{
	padding: 0 0.13888rem;  /* 0 10px */
}
.article-frame .article_title:after
{
	content: "";
	display: block;
	clear: both;
}
.article-frame .article_title .fl
{
	width: 90%;
	line-height: 120%;
	font-size:0.41666rem;  /* 30px */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	overflow: hidden;
}
.article-frame .article_title .fr
{
	background:#57A8E9;
	color: #ffffff;
	font-size:0.36111rem;  /* 26px */
	padding: 0.02777rem 0.11111rem;  /* 2px 8px */
	line-height: 120%;
}
.article-frame .article_title .fr a
{
	color:inherit;
}

.article-frame .article_fgxline
{
	width: 98%;
	margin:0.13888rem auto;  /* 10px auto */
}
.article-frame .article_info
{
	width: 98%;
	height: auto;
	margin: 0 auto;
}
.article-frame .article_info:after
{
	content:"";
	clear:both;
	height: 100%;
	display: block;
}
.article-frame .article_info p
{
	margin:0 0;
	font-size: 0.33333rem;  /* 24px */
	color:#909090;
}
.article-frame .article-in_pic
{
	width: 98%;
	height: auto;
	text-align: center;
	margin: 0.13888rem auto;  /* 10px auto */
}
.article-frame .article-in_pic img
{
	margin: 0 auto;
}
.article-frame .acticle-content
{
	margin: 0.27777rem 0;  /* 20px 0 */
	width: 100%;
	padding: 0 0.13888rem;  /* 0 10px */
}
.article-frame .acticle-content img
{
	max-width: 90%;
	height: auto;
}

.content-abstract
{
	padding: 0 0.27777rem;  /* 0 20px */
	font-size: 0.30555rem;  /* 22px */
	line-height: 150%;
}