/* Robbie&Chen */
/* 公共样式 S */
ul,ol{
 float: none;
}
.pull-left{
 float: left;
}
.pull-right{
 float: right;
}
.text-left{
 text-align: left;
}
.text-right{
 text-align: right;
}
.text-center{
 text-align: center;
}
/* 公共样式 E */
/* loading */
/* General Demo Style */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #fff;
	background: #000;
}

a {
	color: #f0f0f0;
	text-decoration: none;
}

a:hover {
	color: #fff;
}

/* Header Style */
.codrops-top {
	text-transform: uppercase;
	position: relative;
	z-index: 1000;
	font-size: 0.68em;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	line-height: 2.2;
}

.codrops-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,0.2);
	display: inline-block;
}

.codrops-top a:hover {
	color: rgba(255,255,255,0.9);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.os-phrases h2 {
	font-family: 'Dosis', 'Lato', sans-serif;
	font-size: 70px;
	font-weight: 200;
	width: 100%;
	overflow: hidden;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: 14px;
	text-align: center;
}

.os-phrases h2,
.os-phrases h2 > span {
	height: 100%;
	/* Centering with flexbox */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.os-phrases h2 > span {
	margin: 0 15px;
}

.os-phrases h2 > span > span {
	display: inline-block;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.os-phrases h2 > span > span > span {
	display: inline-block;
	color: hsla(0,0%,0%,0);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-animation: OpeningSequence 5.2s linear forwards;
	-moz-animation: OpeningSequence 5.2s linear forwards;
	animation: OpeningSequence 5.2s linear forwards;
}

.os-phrases h2:nth-child(2) > span > span > span {
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	animation-delay: 5s;
}

.os-phrases h2:nth-child(3) > span > span > span {
	-webkit-animation-delay: 10s;
	-moz-animation-delay: 10s;
	animation-delay: 10s;
}

.os-phrases h2:nth-child(4) > span > span > span {
	-webkit-animation-delay: 15s;
	-moz-animation-delay: 15s;
	animation-delay: 15s;
}

.os-phrases h2:nth-child(5) > span > span > span {
	font-size: 150px;
	-webkit-animation-delay: 21s;
	-moz-animation-delay: 21s;
	animation-delay: 21s;
	-webkit-animation-duration: 8s;
	-moz-animation-duration: 8s;
	animation-duration: 8s;
}

.os-phrases h2:nth-child(6) > span > span > span {
	-webkit-animation-delay: 30s;
	-moz-animation-delay: 30s;
	animation-delay: 30s;
}

.os-phrases h2:nth-child(7) > span > span > span {
	-webkit-animation-delay: 34s;
	-moz-animation-delay: 34s;
	animation-delay: 34s;
}

@-webkit-keyframes OpeningSequence {
	0% {
		text-shadow: 0 0 50px #fff;
		letter-spacing: 80px;
		opacity: 0;
		-webkit-transform: rotateY(-90deg);
	}
	50% {
		text-shadow: 0 0 1px #fff;
		letter-spacing: 14px;
		opacity: 0.8;
		-webkit-transform: rotateY(0deg);
	}
	85% {
		text-shadow: 0 0 1px #fff;
		opacity: 0.8;
		-webkit-transform: rotateY(0deg) translateZ(100px);
	}
	100% {
		text-shadow: 0 0 10px #fff;
		opacity: 0;
		-webkit-transform: translateZ(130px);
		pointer-events: none;
	}
}

@-moz-keyframes OpeningSequence {
	0% {
		text-shadow: 0 0 50px #fff;
		letter-spacing: 80px;
		opacity: 0.2;
		-moz-transform: rotateY(-90deg);
	}
	50% {
		text-shadow: 0 0 1px #fff;
		letter-spacing: 14px;
		opacity: 0.8;
		-moz-transform: rotateY(0deg);
	}
	85% {
		text-shadow: 0 0 1px #fff;
		opacity: 0.8;
		-moz-transform: rotateY(0deg) translateZ(100px);
	}
	100% {
		text-shadow: 0 0 10px #fff;
		opacity: 0;
		-moz-transform: translateZ(130px);
		pointer-events: none;
	}
}

@keyframes OpeningSequence {
	0% {
		text-shadow: 0 0 50px #fff;
		letter-spacing: 80px;
		opacity: 0.2;
		transform: rotateY(-90deg);
	}
	50% {
		text-shadow: 0 0 1px #fff;
		letter-spacing: 14px;
		opacity: 0.8;
		transform: rotateY(0deg);
	}
	85% {
		text-shadow: 0 0 1px #fff;
		opacity: 0.8;
		transform: rotateY(0deg) translateZ(100px);
	}
	100% {
		text-shadow: 0 0 10px #fff;
		opacity: 0;
		transform: translateZ(130px);
		pointer-events: none;
	}
}

.os-phrases h2:nth-child(8) > span > span > span {
	font-size: 30px;
	-webkit-animation: FadeIn 4s linear 40s forwards;
	-moz-animation: FadeIn 4s linear 40s forwards;
	animation: FadeIn 4s linear 40s forwards;
}

@-webkit-keyframes FadeIn { 
	0% {
		opacity: 0;
		text-shadow: 0 0 50px #fff;
	}
	100% {
		opacity: 0.8;
		text-shadow: 0 0 1px #fff;
	}
}

@-moz-keyframes FadeIn { 
	0% {
		opacity: 0;
		text-shadow: 0 0 50px #fff;
	}
	100% {
		opacity: 0.8;
		text-shadow: 0 0 1px #fff;
	}
}

@keyframes FadeIn { 
	0% {
		opacity: 0;
		text-shadow: 0 0 50px #fff;
	}
	100% {
		opacity: 0.8;
		text-shadow: 0 0 1px #fff;
	}
}

/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
	font-weight: 600;
}
.skipbtn{
	position: absolute;
	bottom: 80px;
	width: 100px;
	left: 50%;
	padding: 5px 0;
	background: none;
	border: 0;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 1px #000;
	margin-left: -50px;
	text-align: center;
	font-family: Garamond;
	font-size: 18px;
	text-transform: capitalize;
	cursor: pointer;
	z-index: 100001;
}
.skipbtn::before,.skipbtn::after {
	box-sizing: border-box;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
}
 
.skipbtn {
  -webkit-transition: color 0.25s;
          transition: color 0.25s;
}
.skipbtn::before,
.skipbtn::after {
  border: 1px solid transparent;
  width: 0;
  height: 0;
}
.skipbtn::before {
  top: 0;
  left: 0;
}
.skipbtn::after {
  bottom: 0;
  right: 0;
}
.skipbtn:hover::before, .skipbtn:hover::after {
  width: 100%;
  height: 100%;
}
.skipbtn:hover::before {
  border-top-color: #fff;
  border-right-color: #fff;
  -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
          transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.skipbtn:hover::after {
  border-bottom-color: #fff;
  border-left-color: #fff;
  -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
          transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
} 
/* loading */
/* header.php  S */
.main{
 width: 100%;
 background-image: url(../img/main-bg.jpg);
 font-family: Garamond;
}
.main b{
 font-weight: 100;
}
.header{
 position: absolute;
 /*width: 81.3%;*/
 /*left: 9.4%;*/
 width: 100%;
 margin: 0 auto;
 overflow: hidden;
 z-index: 1001;
}
.header .link-group{
 display: none;
 width: 100%;
 height: 0;
 padding-top: 60px;
 margin: 0 auto;
 background: url(../img/header-bg.png);
 overflow: visible !important;
}
.header .logo{
	width: 178px;
	margin: 0 auto;
}
.header .logo img{
 display: block;
 width: 173px;
 height: 74px;
 margin: 0 auto;
}
.header .link-group ul{
 padding: 28px 9.4% 0;
 overflow: hidden;
}
.header .link-group li{
 width: 20%;
}
.header .link-group .link-sm{
	display: block;
	text-align: center;
	font-size: 14px;
	font-family: Garogier;
	color: #fff;
	opacity: 0.6;
}
.header .link-lg{
 padding: 68px 9.4% 26px;
 /* border-bottom: 1px solid #969696; */
}
.header .link-lg a{
	float: left;
	display: block;
	width: 20%;
	text-align: center;
	font-family: Garogier;
	font-size: 24px;
	color: #fff;
}
.header .model-2{
 padding: 60px 0 0 9.4%;
}
.menu {
	height: 44px;
	width: 36px;
	position: relative;
	margin: auto;
	padding-top: 15px; 
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	cursor: pointer;
}
.artGroup .tips .time {
  padding: 20px 0;
  font-family: Garamond;
  font-size: 24px;
  font-style: italic;
  line-height: 24px;
}
.artGroup .tips .cont {
  padding-bottom: 40px;
  font-size: 18px;
  line-height: 22px;
}
.artGroup .tips .icon{
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}
.artGroup .tips .more {
  padding-top: 10px;
  font-family: Garamond;
  font-size: 18px;
  line-height: 18px;
}
.bar {
	height: 3px;
	width: 34px;
	display: block;
	margin: 6px auto;
	position: relative;
	background-color: #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.model-2 .menu.close .bar:nth-of-type(1) {
  -moz-transform: translateY(9px) rotate(45deg);
  -ms-transform: translateY(9px) rotate(45deg);
  -webkit-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}
.model-2 .menu.close .bar:nth-of-type(2) {
  opacity: 0;
}
.model-2 .menu.close .bar:nth-of-type(3) {
	-moz-transform: translateY(-9px) rotate(-45deg);
	-ms-transform: translateY(-9px) rotate(-45deg);
	-webkit-transform: translateY(-9px) rotate(-45deg);
	transform: translateY(-9px) rotate(-45deg);
}
.model-2 .bar:nth-of-type(1) {
	-moz-animation: rotateR 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
	-webkit-animation: rotateR 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
	animation: rotateR 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
}
.model-2 .bar:nth-of-type(2) {
	-moz-animation: fade 1.5s cubic-bezier(0.1, 0.8, 0.1, 1);
	-webkit-animation: fade 1.5s cubic-bezier(0.1, 0.8, 0.1, 1);
	animation: fade 1.5s cubic-bezier(0.1, 0.8, 0.1, 1);
}
.model-2 .bar:nth-of-type(3) {
  -moz-animation: rotateL 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
  -webkit-animation: rotateL 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
  animation: rotateL 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
}
.search{
	margin: 74px 9.4% 0 0;
	height: 24px;
	overflow: hidden;
}
.search input.text{
	display: block;
	float: left;
	height: 24px;
	background: none;
	text-indent: 1em;
	border: none;
	outline: none;
	color: #fff;
}
.js-search{
	height: 24px;
	cursor: pointer;
	text-align: right;
}
.search input.btn{
	display: block;
	float: left;
	height: 24px;
	width: 26px;
	border:none;
	outline: none;
	background: none;
	background-image: url(../img/ser-icon.png);
	background-repeat: no-repeat;
	background-position: center;
}
.search i.iconfont{
	padding: 0 3px;
	font-size: 18px;
	color: #fff;
}
.search span{
 padding: 0 5px;
 font-size: 12px;
 color: #fff;
}    
/* header.php  E */
/* welcome.php  S */
/* 标题 */
.cd-words-wrapper {
  display: inline-block;
  position: relative;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}
.no-js .cd-words-wrapper b {
  opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}
.cd-headline.rotate-1 .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.rotate-1 b {
  opacity: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.cd-headline.rotate-1 b.is-visible {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-animation: cd-rotate-1-in 1.2s;
  -moz-animation: cd-rotate-1-in 1.2s;
  animation: cd-rotate-1-in 1.2s;
}
.cd-headline.rotate-1 b.is-hidden {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
  -webkit-animation: cd-rotate-1-out 1.2s;
  -moz-animation: cd-rotate-1-out 1.2s;
  animation: cd-rotate-1-out 1.2s;
}

@-webkit-keyframes cd-rotate-1-in {
  0% {
 -webkit-transform: rotateX(180deg);
 opacity: 0;
  }
  35% {
 -webkit-transform: rotateX(120deg);
 opacity: 0;
  }
  65% {
 opacity: 0;
  }
  100% {
 -webkit-transform: rotateX(360deg);
 opacity: 1;
  }
}
@-moz-keyframes cd-rotate-1-in {
  0% {
 -moz-transform: rotateX(180deg);
 opacity: 0;
  }
  35% {
 -moz-transform: rotateX(120deg);
 opacity: 0;
  }
  65% {
 opacity: 0;
  }
  100% {
 -moz-transform: rotateX(360deg);
 opacity: 1;
  }
}
@keyframes cd-rotate-1-in {
  0% {
 -webkit-transform: rotateX(180deg);
 -moz-transform: rotateX(180deg);
 -ms-transform: rotateX(180deg);
 -o-transform: rotateX(180deg);
 transform: rotateX(180deg);
 opacity: 0;
  }
  35% {
 -webkit-transform: rotateX(120deg);
 -moz-transform: rotateX(120deg);
 -ms-transform: rotateX(120deg);
 -o-transform: rotateX(120deg);
 transform: rotateX(120deg);
 opacity: 0;
  }
  65% {
 opacity: 0;
  }
  100% {
 -webkit-transform: rotateX(360deg);
 -moz-transform: rotateX(360deg);
 -ms-transform: rotateX(360deg);
 -o-transform: rotateX(360deg);
 transform: rotateX(360deg);
 opacity: 1;
  }
}
@-webkit-keyframes cd-rotate-1-out {
  0% {
 -webkit-transform: rotateX(0deg);
 opacity: 1;
  }
  35% {
 -webkit-transform: rotateX(-40deg);
 opacity: 1;
  }
  65% {
 opacity: 0;
  }
  100% {
 -webkit-transform: rotateX(180deg);
 opacity: 0;
  }
}
@-moz-keyframes cd-rotate-1-out {
  0% {
 -moz-transform: rotateX(0deg);
 opacity: 1;
  }
  35% {
 -moz-transform: rotateX(-40deg);
 opacity: 1;
  }
  65% {
 opacity: 0;
  }
  100% {
 -moz-transform: rotateX(180deg);
 opacity: 0;
  }
}
@keyframes cd-rotate-1-out {
  0% {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 -ms-transform: rotateX(0deg);
 -o-transform: rotateX(0deg);
 transform: rotateX(0deg);
 opacity: 1;
  }
  35% {
 -webkit-transform: rotateX(-40deg);
 -moz-transform: rotateX(-40deg);
 -ms-transform: rotateX(-40deg);
 -o-transform: rotateX(-40deg);
 transform: rotateX(-40deg);
 opacity: 1;
  }
  65% {
 opacity: 0;
  }
  100% {
 -webkit-transform: rotateX(180deg);
 -moz-transform: rotateX(180deg);
 -ms-transform: rotateX(180deg);
 -o-transform: rotateX(180deg);
 transform: rotateX(180deg);
 opacity: 0;
  }
}

.cd-headline.rotate-2 .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.rotate-2 i, .cd-headline.rotate-2 em {
  display: inline-block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-headline.rotate-2 i {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-20px) rotateX(90deg);
  -moz-transform: translateZ(-20px) rotateX(90deg);
  -ms-transform: translateZ(-20px) rotateX(90deg);
  -o-transform: translateZ(-20px) rotateX(90deg);
  transform: translateZ(-20px) rotateX(90deg);
  opacity: 0;
}
.is-visible .cd-headline.rotate-2 i {
  opacity: 1;
}
.cd-headline.rotate-2 i.in {
  -webkit-animation: cd-rotate-2-in 0.4s forwards;
  -moz-animation: cd-rotate-2-in 0.4s forwards;
  animation: cd-rotate-2-in 0.4s forwards;
}
.cd-headline.rotate-2 i.out {
  -webkit-animation: cd-rotate-2-out 0.4s forwards;
  -moz-animation: cd-rotate-2-out 0.4s forwards;
  animation: cd-rotate-2-out 0.4s forwards;
}
.cd-headline.rotate-2 em {
  -webkit-transform: translateZ(20px);
  -moz-transform: translateZ(20px);
  -ms-transform: translateZ(20px);
  -o-transform: translateZ(20px);
  transform: translateZ(20px);
}

.no-csstransitions .cd-headline.rotate-2 i {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 0;
}
.no-csstransitions .cd-headline.rotate-2 i em {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.no-csstransitions .cd-headline.rotate-2 .is-visible i {
  opacity: 1;
}

@-webkit-keyframes cd-rotate-2-in {
  0% {
 opacity: 0;
 -webkit-transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
 opacity: 1;
 -webkit-transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
 opacity: 1;
 -webkit-transform: translateZ(-20px) rotateX(0deg);
  }
}
@-moz-keyframes cd-rotate-2-in {
  0% {
 opacity: 0;
 -moz-transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
 opacity: 1;
 -moz-transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
 opacity: 1;
 -moz-transform: translateZ(-20px) rotateX(0deg);
  }
}
@keyframes cd-rotate-2-in {
  0% {
 opacity: 0;
 -webkit-transform: translateZ(-20px) rotateX(90deg);
 -moz-transform: translateZ(-20px) rotateX(90deg);
 -ms-transform: translateZ(-20px) rotateX(90deg);
 -o-transform: translateZ(-20px) rotateX(90deg);
 transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
 opacity: 1;
 -webkit-transform: translateZ(-20px) rotateX(-10deg);
 -moz-transform: translateZ(-20px) rotateX(-10deg);
 -ms-transform: translateZ(-20px) rotateX(-10deg);
 -o-transform: translateZ(-20px) rotateX(-10deg);
 transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
 opacity: 1;
 -webkit-transform: translateZ(-20px) rotateX(0deg);
 -moz-transform: translateZ(-20px) rotateX(0deg);
 -ms-transform: translateZ(-20px) rotateX(0deg);
 -o-transform: translateZ(-20px) rotateX(0deg);
 transform: translateZ(-20px) rotateX(0deg);
  }
}
@-webkit-keyframes cd-rotate-2-out {
  0% {
 opacity: 1;
 -webkit-transform: translateZ(-20px) rotateX(0);
  }
  60% {
 opacity: 0;
 -webkit-transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
 opacity: 0;
 -webkit-transform: translateZ(-20px) rotateX(-90deg);
  }
}
@-moz-keyframes cd-rotate-2-out {
  0% {
 opacity: 1;
 -moz-transform: translateZ(-20px) rotateX(0);
  }
  60% {
 opacity: 0;
 -moz-transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
 opacity: 0;
 -moz-transform: translateZ(-20px) rotateX(-90deg);
  }
}
@keyframes cd-rotate-2-out {
  0% {
	 opacity: 1;
	 -webkit-transform: translateZ(-20px) rotateX(0);
	 -moz-transform: translateZ(-20px) rotateX(0);
	 -ms-transform: translateZ(-20px) rotateX(0);
	 -o-transform: translateZ(-20px) rotateX(0);
	 transform: translateZ(-20px) rotateX(0);
  }
  60% {
 opacity: 0;
	 -webkit-transform: translateZ(-20px) rotateX(-100deg);
	 -moz-transform: translateZ(-20px) rotateX(-100deg);
	 -ms-transform: translateZ(-20px) rotateX(-100deg);
	 -o-transform: translateZ(-20px) rotateX(-100deg);
	 transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
 	opacity: 0;
	-webkit-transform: translateZ(-20px) rotateX(-90deg);
	-moz-transform: translateZ(-20px) rotateX(-90deg);
	-ms-transform: translateZ(-20px) rotateX(-90deg);
	-o-transform: translateZ(-20px) rotateX(-90deg);
	transform: translateZ(-20px) rotateX(-90deg);
  }
}

.welc-banner{
	position: relative;
	z-index: 1000;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.js-banner{
	display: none;
}
.welc-banner div.title{
	position: absolute;
	left: 50%;
	bottom: 10%;
	margin-left: -202px;
	width: 404px;
	height: 288px;
}
.welc-banner .banner-logo{
	margin-top: 50px;
	display: none;
}
.welc-banner .banner-line{
	display: none;
	width: 200px;
	margin: 20px auto;
	border-bottom: 1px solid #fff;
}
.welc-banner .banner-title{
 display: none;
}
.welc-banner .banner-title h4{
	font-size: 16px;
	text-align: center;
	font-weight: 100;
	font-family: "Myriad Pro";
	color: #fff;
}
.welc-banner .banner-icon{
	position: absolute;
	bottom: 15px;
	left: 50%;
	display: none;
	width: 48px;
	height: 48px;
	margin-left: -24px;
	line-height: 48px;
	text-align: center;
	border-radius: 50%;
	background-color: #fff;
	color: #000;
	cursor: pointer;
}
.welc-banner .banner-icon i{
	font-size: 28px;
}
.welc-display{
	position: relative;
	width: 76.62%;
	min-width: 1000px;
	margin: 0 auto;
	background-color: #000;
}
.welc-display .left{
	width: 33.34%;
	overflow: hidden;
}
.welc-display .left a:hover img{
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
.welc-display .left img{
 display: block;
 width: 100%;
 height: auto;
}
.welc-display .right{
 width: 66.66%;
 overflow: hidden;
}
.welc-display .botm{
 width: 100%;
 overflow: hidden;
}
.welc-display .botm img{
 float: left;
 display: block;
 width: 50%;
}
.welc-display .botm a:hover img{
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
.title-style1{
 position: absolute;
 left: 16.67%;
 width: 350px;
 margin-left: -175px;
}
.welc-display .title-style1{
 bottom: 14px;
}
.title-style1 .e-title{
 text-align: center;
 font-size: 18px;
 line-height: 18px;
 color: #fff;
 letter-spacing:14px;
}
.title-style1 .c-title{
 text-align: center;
 font-family: "\7EC6\660E\4F53";
 font-size: 24px;
 line-height: 24px;
 color: #fff;
}
.title-style1 .line{
 width: 58px;
 margin: 13px auto 10px;
 border-bottom: 1px solid #fff;
}
.title-style2{
 padding: 90px 0 45px 0;
 text-align: center;
 color: #fff;
 font-family: Garamond;
}
.title-style2 .e-title{
 padding-bottom: 10px;
 font-size: 18px;
 line-height: 18px;
 letter-spacing:14px;
}
.title-style2 .c-title{
 font-size: 18px;
 line-height: 18px;
}
.title-style2 .line{
 padding: 0 10px;
}
.title-style3{
 position: absolute;
 top: 308px;
 width: 280px;
 margin-right: -140px;
 height: 150px;
 text-align: center;
 z-index: 10001;
}
.title-style3 .lg-title{
 font-size: 36px;
 line-height: 36px;
 color: #fff;
 font-family: Garamond;
}
.title-style3 .c-title{
 padding: 24px 0 14px 0;
 font-size: 18px;
 line-height: 18px;
 color: #fff;
}
.title-style3 .line{
 padding: 0 32px;
}
.title-style3 .link-more{
 display: block;
 width: 108px;
 height: 28px;
 margin: 0 auto;
 line-height: 28px;
 text-align: center;
 border: 1px solid #fff;
 font-size: 18px;
 color: #fff;
}
/*轮播*/
.vui-slider {
 position:relative;
 overflow:hidden;
 background:#999;
}
.vui-slider .vui-items {
 overflow:hidden;
 width:100%;
 height:100%;
}
.vui-slider .vui-item {
 display:none;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}
.vui-slider .vui-item a,
.vui-slider .vui-item img {
 display:block;
 padding:0;
 margin:0;
 border:none;
}
.vui-slider .vui-item img{
	height: auto;
}
.vui-slider .vui-buttons {
	position:absolute;
	z-index:5;
	bottom:6px;
	left:50%;
	float:left;
	display:inline;
	filter:alpha(Opacity=80);
	-moz-opacity:0.8;
	opacity: 0.8;
}
.vui-slider .vui-button {
	float:left;
	display:inline;
	overflow:hidden;
	height:12px;
	width:12px;
	margin:0 10px;
	padding:0;
	border:none;
	border-radius:6px;
	background:#c2c2c2;
	cursor:pointer;
}
.vui-slider .vui-button:hover{
	background-color:#fff;
}
.vui-slider .vui-button-cur {
	background-color:#fff;
}
.vui-slider .vui-transfer {
 display:none;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:3;
}
.vui-slider .vui-prev {
 position:absolute;
 top:50%;
 left:0;
 z-index:5;
 width:60px;
 height:150px;
 margin-top:-75px;
 border-radius:0 10px 10px 0;
 background:url(../img/prev.gif) no-repeat;
 cursor:pointer;
 filter:alpha(opacity=30);
 -moz-opacity:0.3;
 -khtml-opacity:0.3;
 opacity:0.3;
 transition:0.5s ease;
 -o-transition:0.5s ease;
 -webkit-transition:0.5s ease;
}
.vui-slider .vui-next {
 position:absolute;
 top:50%;
 right:0;
 z-index:5;
 width:60px;
 height:150px;
 margin-top:-75px;
 border-radius:10px 0 0 10px;
 background:url(../img/next.gif) no-repeat;
 cursor:pointer;
 filter:alpha(opacity=30);
 -moz-opacity:0.3;
 -khtml-opacity:0.3;
 opacity:0.3;
 transition:0.5s ease;
 -o-transition:0.5s ease;
 -webkit-transition:0.5s ease;
}
.vui-slider .vui-sidebutton-hover {
 filter:alpha(opacity=40);
 -moz-opacity:0.4;
 -khtml-opacity:0.4;
 opacity:0.4;
 background-color:#000;
}
/*黑白图片*/
.welc-brand{
 width: 76.62%;
 min-width: 1000px;
 margin: 0 auto;
 background-color: #000;
 overflow: hidden;
}
.inkwell:focus, .inkwell:hover {
  -webkit-filter: none!important;
	filter: none!important;
}
.inkwell:hover img{
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
.welc-brand .inkwell{
 position: relative;
 float: left;
 width: 33.333%;
 overflow: hidden;
}
.welc-brand .inkwell:hover .row3{
	display: block;
}
.fadein1{
	margin-top: 30px;
}
.fadein2{
	margin-top: -33px;
}
.welc-brand .inkwell img{
 display: block;
 width: 100%;
 height: auto;
}
.inkwell a{
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 background-image: url(../img/brand-bg.png);
}
.inkwell p{
 text-align: center;
 color: #fff;
}
.inkwell a .text-fadin{
 margin-top: 50%;
}
.inkwell .row1{
	height: 20px;
	padding-bottom: 28px;
	font-size: 16px;
	line-height: 16px;
	overflow: hidden;
}
.inkwell .row2{
	height: 2px;
	padding: 0 0 20px 0;
	font-size: 14px;
	line-height: 14px;
	overflow: hidden;
}
.inkwell .row3{
 display: none;
 width: 44px;
 margin: 0 auto 20px; 
 border-bottom: 1px solid #fff; 
}
.inkwell {
  -webkit-filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);
	filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1); 
 filter:Gray;
}
.welc-idea{
 position: relative;
 width: 76.62%;
 min-width: 1000px;
 margin: 98px auto 130px;
}
.welc-idea img{
 display: block;
 width: 100%;
 height: auto;
}
.welc-idea div.idea-cont{
 position: absolute;
 left: 50%;
 top: 20%;
 margin-left: -295px;
 width: 590px;
}
.welc-idea div.idea-cont h4{
 padding-bottom: 10px;
 font-size: 30px;
 font-weight: 100;
 line-height: 30px;
 color: #000;
}
.welc-idea div.idea-cont small{
 font-size: 14px;
 line-height: 14px;
 color: #000;

}
.welc-idea div.idea-cont .idea-line{
 width: 112px;
 margin: 28px 0;
 border-bottom: 3px solid #000;
}
.welc-idea div.idea-cont p{
 padding-bottom: 15px;
 font-size: 14px;
 line-height: 14px;
 color: #000;
}
.welc-fabric{
 position: relative;
 width: 76.62%;
 min-width: 1000px;
 padding-bottom: 100px;
 margin: 28px auto;
 background-color: #fff;
}
.welc-fabric .title-style2{
 width: 75.27%;
 min-width: 980px;
 margin: 0 auto;
 color: #000;
}
.welc-fabric ul{
 width: 75.27%;
 min-width: 980px;
 margin: 0 auto 20px;
}
.welc-fabric ul li{
 width: 24.99%;
 height: 128px;
 margin-left: -1px;
 padding-top: 24px;
 text-align: center;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 color: #000;
}
.welc-fabric li h4{
 padding: 0 50px 14px;
 font-size: 30px;
 font-weight: 100;
}
.welc-fabric li p{
 padding: 0 50px;
 font-size: 14px;
 line-height: 24px;
}
.welc-fabric .img-group{
 width: 74.3%;
 min-width: 980px;
 margin: 0 auto;
}
.welc-fabric .img-group img{
 display: block;
 width: 49.8%;
}
.welc-journal .wrap{
 width: 100%;
 overflow: hidden;
 background-image: url(../img/botm-bg.jpg);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}
.welc-journal .content{
 width: 76.62%;
 min-width: 1000px;
 margin: 0 auto;
}
/* 图片翻转 */
.welc-journal .artGroup {
 float: left;
 display: block;
 width: 33.33%;
 position: relative;
}
 
.artwork {
  display: block;
  width: 100%;
  height: 100%;
}
 
.artGroup img {
 position: absolute;
 display: block;
 width: 100%;
 height: auto;
}
 
.artGroup div.detail,
.artGroup div.visbale{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.artGroup .tips{
/*  width: 198px; */
 margin: 30px auto 0;
}
.artGroup div.detail a{
 background-color: #000;
 color: #fff;
}
.artGroup div.detail{
 background-color: #000;
}
.artGroup div.visbale{
 background-color: #fff;
} 
.artGroup div.visbale a{
 background-color: #fff;
 color: #000;
} 
.artGroup div h3 {
 padding-bottom: 25px;
 font-size: 20px;
 text-align: center;
}
.artGroup div small{
 display: block;
 padding-bottom: 15px;
 font-size: 14px;
 text-align: center;
}
.artGroup div p {
 font-size: 16px;
 line-height: 20px;
 text-align: center;
}  
.artGroup.flip {
  -webkit-perspective: 800px;
  perspective: 800px;
}
.artGroup.flip .artwork {
  -webkit-transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
 
.artGroup.flip .detail,
.artGroup.flip .theFlip {
  -webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
 
.artGroup.flip .visbale,
.artGroup.flip .detail {
  -webkit-backface-visibility: hidden;
	backface-visibility: hidden; 
}    
.artGroup.slide { overflow: hidden; }
.artGroup.slide .detail { bottom: -364px; }   
/* welcome.php  E */
/* footer.php   S */
.footer .box1{
	position: relative;
	width: 76.62%;
	min-width: 1000px;
	margin: 0 auto ;
	padding: 20px 0 40px 0;
}
.footer .box2{
	position: relative;
	width: 76.62%;
	min-width: 1000px;
	margin: 0 auto;
}
.footer .wrap1{
	margin-top: 80px;
	border-top: 1px solid #1a1a1a;
}
.footer .wrap3{
	margin-top: 80px;
}
.footer .wrap2{
	border-top: 1px solid #1a1a1a;
}
.footer ul{
 width: 59%;
}
.footer li{
 width: 20%;
}
.footer li a{
 display: block;
 padding: 2px 0;
 font-size: 14px;
 line-height: 18px;
 color: #fff;
 opacity: 0.6;
}
.footer li a.link-lg{
 padding: 22px 0;
 font-size: 16px;
 line-height: 16px;
 color: #fff;
 opacity: 0.8;
}
.footer li a:hover{
 color: #fff;
}
.footer .right div{
 margin-right: 16px;
}
.footer .right img{
 display: block;
 width: 98px;
 height: 92px;
}
.footer .right {
	padding-top: 15px;
}
.footer .right p{
 text-align: center;
 font-size: 14px;
 color: #969696;
}
p.footer-botm{
	width: 100%;
	padding: 40px 0 40px;
	text-align: center;
	font-size: 14px;
	color: #969696;
}
p.footer-botm a{
 font-size: 14px;
 color: #969696;
}
p.footer-botm a:hover{
 color: #fff;
}
/* footer.php   E */
/* new_product.php   S*/
#fullpage .section{
	-webkit-background-size: cover;
	background-size: cover;
	min-height: 42vw;
}
.section{
	position: relative;
	min-width: 1000px;
	min-height: 600px;
	background-position: center;
	background-repeat: no-repeat;
	
}
.section .marker p{
	position: absolute;
	display: none;
	width: 250px;
	font-family: "\7EC6\660E\4F53";
	text-align: center;
}
.section-2 .left.marker{
	top: 65%;
	right: 48%;
}
.section .marker p{
	left: -85px;
}
.section-2 .center-top.marker{
	top: 71%;
	right: 42%;
}
.section-2 .center-botm.marker{
	top: 85%;
	right: 47%;
}
.section-2 .right.marker{
	top: 71%;
	right: 42.5%;
}
/* .section-2 .right-1.marker{
	top: 29.4%;
	right: 34.5%;
} */
.section-2 .right-2.marker{
	top: 52%;
	right: 24.5%;
}
.section-2 .right-3.marker{
	top: 18.5%;
	right: 28.5%;
}
.section-2 .right-4.marker{
	top: 38%;
	right: 29.2%;
}
/* @media(max-width: 1300px){
	.section-2 .left.marker{
	 	top: 65.63%;
	 	right: 55.72%;
	}
	.section-2 .center-top.marker{
	 top: 60.7%;
	 right: 46.67%;
	}
	.section-2 .center-botm.marker{
		top: 75.7%;
		right: 48.92%;
	}
	.section-2 .right.marker{
		top: 70.63%;
		right: 42.81%;
	}
}  */
/* @media(max-width: 1300px){
	.section-2 .right-1.marker{
		right: 29.5%;
	}
	.section-2 .right-2.marker{
		right: 23%;
	}
	.section-2 .right-3.marker{
		right: 22%;
	}
	.section-2 .right-4.marker{
		right: 17%;
	}
}
@media(max-width: 1200px){
	.section-2 .right-1.marker{
		right: 27.5%;
	}
	.section-2 .right-2.marker{
		right: 20%;
	}
	.section-2 .right-3.marker{
		right: 19%;
	}
	.section-2 .right-4.marker{
		right: 12%;
	}
} */
.section-3 .left-top.marker{
	top: 38.8%;
	left: 27.25%;
}
.section-3 .left-btm.marker{
	top: 52.4%;
	left: 36%;
}
.section-3 .right-top.marker{
	top: 11%;
	right: 17.6%;
}
.section-3 .right-center.marker{
	top: 32.4%;
	right: 14.5%;
}
.section-3 .right-btm.marker{
	top: 46%;
	right: 18%;
}
/* @media(max-width: 1300px){
	.section-3 .left.marker{
		right: 32%;
	}
	.section-3 .center.marker{
		right: 22%;
	}
	.section-3 .right.marker{
		right: 17%;
	}
}
@media(max-width: 1200px){
	.section-3 .left.marker{
		right: 30%;
	}
	.section-3 .center.marker{
		right: 20%;
	}
	.section-3 .right.marker{
		right: 13%;
	}
} */
.section-4 .left.marker{
	top: 32%;
	left: 41%;
}
.section-4 .left2.marker{
	top: 52%;
	  left: 35.5%;
}
.section-4 .right.marker{
	top: 37.4%;
	right: 28.2%;
}
.section-4 .right2.marker{
	top: 57.4%;
	right: 23.2%;
}
.section-5 .top.marker{
	top: 21%;
	right: 16%;
}
.section-5 .center.marker{
	top: 39%;
	right: 17%;
}
.section-5 .botm-left.marker{
	top: 58%;
	right: 21.7%;
}
/* .section-5 .botm-right.marker{
	top: 64.4%;
	right: 9%;
} */
.section-5 .left-top.marker{
	top: 50.4%;
	left: 29%;
}
.section-5 .left-center.marker{
	top: 63.4%;
	left: 32%;
}
.section-5 .left-btm.marker{
	top: 80%;
	left: 30%;
}
/* @media(max-width: 1400px){
	.section-5 .top.marker{
		right: 11%;
	}
	.section-5 .center.marker{
		right: 10%;
	}
	.section-5 .botm-left.marker{
		right: 15%;
	}
	.section-5 .botm-right.marker{
		right: 4%;
	}
} */
.section-6 .left-top.marker{
	top: 39%;
  		left: 45%;
}
@media(min-width:1345px){
	.section-6 .left-top.marker{
		top: 39%;
  		left: 45.7%;
	}
}
.section-6 .left-center.marker{
	top: 61%;
	left: 47.5%;
}
/* .section-6 .left-botm.marker{
	top: 61%;
	left: 47.5%;
} */
.section-6 .right-top.marker{
	top: 31%;
	right: 36%;
}
/* .section-6 .right-center.marker{
	top: 39.4%;
	right: 36%;
} */
.section-6 .right-botm.marker{
	top: 60.3%;
	right: 37%;

}
.section-7 .left.marker{
	top: 55.4%;
	left: 49%;
}
/* 按钮 */
.marker {
  position: absolute;
  z-index: 5;
  text-align: center;
  min-width: 77px;
  font-size: 11px;
  white-space: nowrap;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  letter-spacing: 2px;
  -moz-transition: -moz-transform 0.6s ease,opacity 0.6s ease;
  -o-transition: -o-transform 0.6s ease,opacity 0.6s ease;
  -webkit-transition: -webkit-transform 0.6s ease,opacity 0.6s ease;
  transition: transform 0.6s ease,opacity 0.6s ease;
}
.marker:hover {
	color: #fff;
}
.marker:hover p{
	display: block;
}
.marker b {
  position: relative;
  display: block;
  width: 45px;
  height: 45px;
  margin: 0 auto 20px;
}
.marker b>span {
  display: block;
  position: relative;
}
.marker:hover b>span {
  -moz-animation: main-marker-hover-animation 1s 0.6s ease-in-out infinite;
  -webkit-animation: main-marker-hover-animation 1s 0.6s ease-in-out infinite;
  animation: main-marker-hover-animation 1s 0.6s ease-in-out infinite;
}
.marker i {
  -moz-transition: -moz-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: -o-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),opacity cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: block;
  box-shadow: 0 0 0 2px #fff;
  width: 45px;
  height: 45px;
}
.marker:hover i {
  box-shadow: 0 0 0 2px #fff;
}
.marker:hover b>span>i {
  opacity: 1;
  -moz-transform: rotate(45deg) scale(1.01);
  -ms-transform: rotate(45deg) scale(1.01);
  -webkit-transform: rotate(45deg) scale(1.01);
  transform: rotate(45deg) scale(1.01);
}
.marker b>span>i {
  opacity: 0.7;
  -moz-transform: rotate(45deg) scale(0.8);
  -ms-transform: rotate(45deg) scale(0.8);
  -webkit-transform: rotate(45deg) scale(0.8);
  transform: rotate(45deg) scale(0.8);
}
.marker b>span>i>i {
  -moz-transform: scale(0.79);
  -ms-transform: scale(0.79);
  -webkit-transform: scale(0.79);
  transform: scale(0.79);
  opacity: 0.5;
}
.marker:hover b>span>i>i {
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.7;
}
.marker b>span>i>i>i {
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
}
.marker:hover b>span>i>i>i {
  -moz-transform: scale(0.78);
  -ms-transform: scale(0.78);
  -webkit-transform: scale(0.78);
  transform: scale(0.78);
  opacity: 0.5;
}
.marker b>s {
  position: absolute;
  left: 50%;
  margin-left: -6px;
  margin-top: -1px;
  top: 50%;
  width: 11px;
  height: 1px;
  background-color: #fff;
}
.marker:hover b>s {
  background-color: #fff;
}
.marker b>s+s {
  width: 1px;
  height: 11px;
  margin-top: -6px;
  margin-left: -1px;
}
.numb{
 position: absolute;
 top: 40px;
 left: 9.4%;
 width: 60px;
 height: 64px;
 font-size: 18px;
 color: #fff;
 background-image: url(../img/num-bg.png);
 background-repeat: no-repeat;
 background-position: right top;
}

@keyframes myfirst{
 form{transform: rotateY(0deg);}
 to{transform: rotateY(360deg);}
}
@-moz-keyframes myfirst{
 form{-moz-transform: rotateY(0deg);}
 to{-moz-transform: rotateY(360deg);}
}
@-webkit-keyframes myfirs{
 form{-webkit-transform: rotateY(0deg);}
 to{-webkit-transform: rotateY(360deg);}
}
@-o-keyframes myfirst{
 form{transform: rotateY(0deg);}
 to{transform: rotateY(360deg);}
}
.numb.rotate{
 animation: myfirst 1.5s;
 -moz-animation: myfirst 1.5s; /* Firefox */
 -webkit-animation: myfirst 1.5s; /* Safari 和 Chrome */
 -o-animation: myfirst 1.5s; /* Opera */
}
.prod-content .cont,
.story-banner .cont{
 position: absolute;
 left: 9.4%;
 bottom: 20%;
}
.prod-content .cont .pager,
.story-banner .cont .pager{
 padding-bottom: 2px;
 font-size: 24px;
 font-family: Garamond;
 line-height: 24px;
 color: #fff;
 border-bottom: 2px solid #fff;
}
.prod-content .cont .e-title,
.story-banner .cont .e-title{
 padding: 52px 0 22px;
 font-family: Garamond;
 font-size: 72px;
 font-weight: 100;
 line-height: 72px;
 color: #fff;
}
.prod-content .cont .c-title,
.story-banner .cont .c-title{
 font-size: 35px;
 line-height: 35px;
 color: #fff;
}
.prod-content .icon,
.story-banner .icon{
 padding-top: 40px;
}
.prod-content .icon a,
.story-banner .icon a
{
 display: block;
}
.prod-content .icon a.first-child,
.story-banner .icon a.first-child{
 margin: -2px 10px 0 0;
}
.prod-content .icon a i,
.story-banner .icon a i{
 font-size: 30px;
 line-height: 30px;
 color: #fff;
}
.animated {
 -webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
 -webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;
}

.animated.hinge {
 -webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
   -o-animation-duration: 2s;
   animation-duration: 2s;
}

@-webkit-keyframes flash {
 0%, 50%, 100% {opacity: 1;} 
 25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
 0%, 50%, 100% {opacity: 1;} 
 25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
 0%, 50%, 100% {opacity: 1;} 
 25%, 75% {opacity: 0;}
}

@keyframes flash {
 0%, 50%, 100% {opacity: 1;} 
 25%, 75% {opacity: 0;}
}

.flash {
 -webkit-animation-name: flash;
 -moz-animation-name: flash;
 -o-animation-name: flash;
 animation-name: flash;
}
@-webkit-keyframes shake {
 0%, 100% {-webkit-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
 0%, 100% {-moz-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-o-keyframes shake {
 0%, 100% {-o-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
 0%, 100% {transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
 20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
 -webkit-animation-name: shake;
 -moz-animation-name: shake;
 -o-animation-name: shake;
 animation-name: shake;
}
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}

.bounce {
 -webkit-animation-name: bounce;
 -moz-animation-name: bounce;
 -o-animation-name: bounce;
 animation-name: bounce;
}
@-webkit-keyframes tada {
 0% {-webkit-transform: scale(1);} 
 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
 100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
 0% {-moz-transform: scale(1);} 
 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
 100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
 0% {-o-transform: scale(1);} 
 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
 100% {-o-transform: scale(1) rotate(0);}
}

@keyframes tada {
 0% {transform: scale(1);} 
 10%, 20% {transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
 100% {transform: scale(1) rotate(0);}
}

.bounceIn {
 -webkit-animation-name: bounceIn;
 -moz-animation-name: bounceIn;
 -o-animation-name: bounceIn;
 animation-name: bounceIn;
}
@-webkit-keyframes bounceInUp {
 0% {
  opacity: 0;
  -webkit-transform: translateY(2000px);
 }
 
 60% {
  opacity: 1;
  -webkit-transform: translateY(-30px);
 }
 
 80% {
  -webkit-transform: translateY(10px);
 }
 
 100% {
  -webkit-transform: translateY(0);
 }
}
@-moz-keyframes bounceInUp {
 0% {
  opacity: 0;
  -moz-transform: translateY(2000px);
 }
 
 60% {
  opacity: 1;
  -moz-transform: translateY(-30px);
 }
 
 80% {
  -moz-transform: translateY(10px);
 }
 
 100% {
  -moz-transform: translateY(0);
 }
}

@-o-keyframes bounceInUp {
 0% {
  opacity: 0;
  -o-transform: translateY(2000px);
 }
 
 60% {
  opacity: 1;
  -o-transform: translateY(-30px);
 }
 
 80% {
  -o-transform: translateY(10px);
 }
 
 100% {
  -o-transform: translateY(0);
 }
}

@keyframes bounceInUp {
 0% {
  opacity: 0;
  transform: translateY(2000px);
 }
 
 60% {
  opacity: 1;
  transform: translateY(-30px);
 }
 
 80% {
  transform: translateY(10px);
 }
 
 100% {
  transform: translateY(0);
 }
}
/* story_origin.php   S */
.welc-banner.story-banner{

}
.story{
 position: relative;
 width: 56.8%;
 min-width: 1000px;
 margin: 0 auto;
 overflow: hidden;
}
.story .wrap1{
 padding: 76px 0 105px 0;
}
.story .title1{
 font-size: 72px;
 font-family: Garamond;
 line-height: 72px;
 text-align: center;
 color: #fff;
}
.story .title2{
 margin: 32px auto 26px auto;
 font-family: Garamond;
 font-size: 36px;
 line-height: 36px;
 text-align: center;
 color: #fff;
}
.story .cont1{
 width: 536px;
 margin: 0 auto;
 padding-top: 20px;
 text-align: center;
 font-size: 18px;
 line-height: 30px;
 font-family: Garamond;
 color: #fff;
}
.story span{
 display: block;
 width: 100px;
 margin: 0 auto;
 padding: 25px 0 35px 0;
 text-align: center;
 color: #fff;
}
.story .cont2{
 width: 556px;
 margin: 0 auto;
 text-align: center;
 font-size: 14px;
 line-height: 30px;
 color: #fff;
 font-family: Garamond;
}
.story-origin .top div{
 float: left;
 width: 33.33%;
}
.story-origin .top img{
 display: block;
 width: 100%;
 height: auto;
}
.story-origin .botm-left{
 width: 33.33%;
 overflow: hidden;
}
.story-origin .botm-right{
 width: 66.67%;
}
.story-origin .botm-left img{
 display: block;
 width: 100%;
 height: auto;
}
.story-origin .botm-right div{
 padding: 80px 0 0 50px;
}
.story-origin .botm-right h4{
 font-family: Garamond;
 font-size: 36px;
 line-height: 36px;
 color: #fff;
}
.story-origin .botm-right .botm-line{
 width: 44px;
 margin: 26px 0;
 border-bottom: 1px solid #fff;
}
.story-origin .botm-right .botm-cont{
 font-family: Garamond;
 font-size: 14px;
 line-height: 30px;
 color: #fff;
}
.story-origin .botm-right .botm-cont.last-child{
 padding-top: 45px;
}
/* story_origin.php   E */

/* story_concept.php  S */
.story-concept.story .cont2{
 width: 726px;
}
.story-concept .top{
 width: 100%;
 overflow: hidden;
}
.story-concept .top img{
 display: block;
 width: 100%;
 height: auto;
}
.story-concept .botm{
 width: 100%;
 overflow: hidden;
}
.story-concept .botm-left{
 width: 31.48%;
}
.story-concept .botm-left div{
 padding-left: 34px;
}
.story-concept .botm-left h4{
 padding-top: 54px;
 font-family: Garamond;
 font-size: 48px;
 color: #fff;
}
.story-concept .botm-right{
 width: 51.48%;
}
.story-concept .botm-right div{
 padding-right: 34px;
}
.story-concept .botm-left .botm-cont{
	padding: 24px 0 62px 0;
	font-size: 18px;
	line-height: 30px;
	color: #fff;
	font-family: Garamond;
}
.story-concept .botm-right .botm-cont{
	padding-top: 54px;
	font-size: 14px;
	line-height: 26px;
	color: #fff;
	font-family: Garamond;
}
.story-concept .botm-right .botm-cont.last-child{
 padding-top: 44px;
}
.story-concept .wrap3{
	padding: 56px 0 96px 0;
	border-top: 1px solid #1a1a1a;
	overflow: hidden;
}
.story-concept .wrap3 .left,
.story-concept .wrap3 .center,
.story-concept .wrap3 .right{
	float: left;
	width: 33.33%;
}
.story-concept .wrap3 .left div,
.story-concept .wrap3 .center div,
.story-concept .wrap3 .right div{
 width: 58px;
 height: 58px;
 overflow: hidden;
 background-image: url(../img/story-icon.png);
 background-repeat: no-repeat;
}
.story-concept .wrap3 .left div{
 background-position: left top;
}
.story-concept .wrap3 .center div{
 background-position: left -65px;
}
.story-concept .wrap3 .right div{
 background-position: left -123px;
}
.story-concept .wrap3 p{
 padding-top: 32px;
 font-size: 18px;
 line-height: 30px;
 color: #fff;
}
.story-concept .wrap3 .line{
 display: block;
 width: 25px;
 margin: 50px 0 0 0;
 padding: 0;
 border-bottom: 2px solid #fff;
}
.story-concept .wrap3 p b{
 font-family: Garamond;
 border: none;
}
.story-botm{
 position: relative;
 width: 100%;
 overflow: hidden;
}
.story-botm img{
 display: block;
 width: 100%;
 height: auto;
}
.story-botm div{
 position: absolute;
 left: 22.4%;
 bottom: 20%;
}
.story-botm .c-title{
 font-size: 18px;
 color: #fff;
}
.story-botm .e-title{
 padding: 28px 0 68px 0;
 font-family: Garamond;
 font-size: 48px;
 color: #fff;
}
.story-botm .more{
 display: block;
 width: 114px;
 height: 40px;
 line-height: 40px;
 text-align: center; 
 border: 1px solid #fff;
 font-family: Garamond;
 font-size: 14px;
 color: #fff;
}
/* story_concept.php  E */
/* custom_made.php    S */
.custom-m-banner .cont{
 position: absolute;
 left: 9.4%;
 bottom: 20%;
}
.custom-m-banner .cont .pager{
 padding-bottom: 2px;
 font-size: 24px;
 font-family: Garamond;
 line-height: 24px;
 color: #fff;
 border-bottom: 2px solid #fff;
}
.custom-m-banner .cont .e-title{
 padding: 100px 0 22px;
 font-family: Garamond;
 font-size: 72px;
 font-weight: 100;
 line-height: 72px;
 color: #fff;
}
.custom-m-banner .cont .c-title{
 font-size: 35px;
 line-height: 35px;
 color: #fff;
}
.custom-m-banner .icon{
 padding-top: 40px;
}
.custom-m-banner .icon a
{
 display: block;
}
.custom-m-banner .icon a.first-child{
 margin: -1px 10px 0 0;
}
.custom-m-banner .icon a i{
 font-size: 30px;
 line-height: 30px;
 color: #fff;
}
.custom-m-banner{
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}
.custom-made{
 width: 1000px;
 margin: 0 auto;
 overflow: hidden;
}
.custom-made .img-link{
 padding-top: 110px;
}
.custom-made .inkwell{
 position: relative;
 float: left;
 width: 188px;
 height: 188px;
 margin-right: 15px;
 overflow: hidden;
}
.custom-made .inkwell img{
 display: block;
 width: 100%;
 height: auto;
}
.custom-made .inkwell.last-child{
 margin-right: 0;
}
.custom-made .inkwell a{
 position: absolute;
 top: 4px;
 left: 4px;
 display: block;
 width: 180px;
 height: 180px;
 text-align: center;
 line-height: 180px;
 border: 3px solid #fff;
 font-size: 24px;
 color: #fff;
}

.custom-made .story .cont2{
 width: 860px;
 padding-bottom: 40px;
}
.custom-made .story .cont2.last-child{
 width: 772px;
}
.custom-made .story .wrap1{
 padding-bottom: 65px;
}
.custom-made .auto-img{
 width: 100%;
 overflow: hidden;
}
.custom-made .auto-img .slider{
 width: 1000px;
 overflow: hidden;
}
.custom-made li:hover img{
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
.custom-made .auto-img .slider img{
 display: block;
 width: 1000px;
 height: 400px;
}
.custom-made .num li{
 float: left;
 display: inline;
 overflow: hidden;
 height: 8px;
 width: 8px;
 margin-right: 6px;
 padding: 0;
 border: none;
 border-radius: 6px;
 background: #c2c2c2;
 cursor: pointer;
}
.custom-made .num{
 padding: 36px 0 0 28px;
}
.custom-made .num li.cur{
 background-color: #fff;
}
.custom-made  .slider li .name{
 position: relative;
}
.custom-made  .slider .name p{
 position: absolute;
 left: 26px;
 bottom: 26px;
 font-size: 20px;
 color: #fff;
}
.custom-made  .slider div p.first-child{
 bottom: 56px;
 font-family: Garamond;
 font-size: 36px;
 color: #fff;
}
.custom-made  .slider .cont{
	width: 1000px;
	
	font-size: 14px;
	color: #fff;
}
.custom-made  .slider .cont p{
	padding: 36px 0 0 28px;
}
.custom-botm{
 position: relative;
 width: 100%;
 padding-top: 94px;
 overflow: hidden;
}
.custom-botm img{
 display: block;
 width: 100%;
 height: auto;
}
.custom-botm div{
 position: absolute;
 left: 22.4%;
 bottom: 20%;
}
.custom-botm .c-title{
 font-size: 18px;
 color: #fff;
}
.custom-botm .e-title{
 padding: 28px 0 68px 0;
 font-family: Garamond;
 font-size: 48px;
 color: #fff;
}
.custom-botm .more{
 display: block;
 width: 114px;
 height: 40px;
 line-height: 40px;
 text-align: center; 
 border: 1px solid #fff;
 font-family: Garamond;
 font-size: 14px;
 color: #fff;
}
/*custom_made.php     E*/
/* fabric.php  S */
.fabric {
 width: 1000px;
 margin: 0 auto;
 overflow: hidden;
}
.fabric .story .cont2{
 width: 860px;
}
.fabric .img-group img {
 float: left;
 display: block;
 width: 329px;
 height: 268px;
 margin-right: 4px;
}
.fabric .img-group img.last-child{
 margin-right: 0;
}
.fabric .title-style{
 width: 740px;
 margin: 60px auto 96px;
}
.fabric .title-style .e-title{
 text-align: center;
 font-family: Garamond;
 font-size: 36px;
 line-height: 36px;
 color: #fff;
}
.fabric .title-style .line{
 width: 24px;
 margin: 20px auto;
 border-bottom: 1px solid #f9f9f9;
}
.fabric .title-style .cont{
 text-align: center;
 font-family: Garamond;
 font-size: 14px;
 line-height: 30px;
 color: #fff;
}
.fabric .title-style .cont.last-child{
 padding-top: 20px;
}
/* fabric.php  E */
/* process.php S */
.process{
 width: 56.8%;
 min-width: 1000px;
 margin: 0 auto;
 overflow: hidden;
}
.process .top,
.crafts .top{
 width: 100%;
 padding: 96px 0 30px 0;
 overflow: hidden;
}
.process .top img
.crafts .top img{
 display: block;
 width: 100%;
 height: auto;
}
.process .wrap2,
.process .wrap3{
 overflow: hidden;
}
.process .wrap2 .left,
.process .wrap3 .right{
 width: 56.67%;
}
.process .wrap2 img,
.process .wrap3 img{
 display: block;
 width: 100%;
 height: auto;
}
.process .wrap2 .right,
.process .wrap3 .left{
 width: 43.33%;
}
.process .wrap1 .e-title{
 font-family: Garamond;
 font-size: 48px;
 line-height: 58px;
 color: #fff;
}
.process .wrap1 .c-title{
 font-size: 18px;
 color: #fff;
}
.process .wrap1 .step{
 padding: 40px 0 70px 0;
}
.process .wrap2 .step,
.process .wrap3 .step{
 padding: 0 25px 50px 34px;
}
@media(max-width: 1910px){
	.process .wrap2 .step,
	.process .wrap3 .step{
	 padding: 0 25px 20px 34px;
	}
}
.process .wrap2 .step.first-child,
.process .wrap3 .step.first-child{
 padding-top: 38px;
}
.process .step h4{
	padding-bottom: 20px;
 font-family: Garamond;
 font-size: 24px;
 font-weight: 100;
 line-height: 30px;
 color: #fff;
}
.process .step p{
 font-size: 14px;
 line-height: 24px;
 color: #fff;
}
/* process.php E */
/* crafts.php  S */
.crafts{
 width: 56.8%;
 min-width: 1000px;
 margin: 0 auto;
 overflow: hidden;
}
.crafts .botm{
 width: 100%;
 overflow: hidden;
}
.crafts .botm-left{
 width: 31.48%;
}
.crafts .botm-left div{
 padding-left: 34px;
}
.crafts .botm-left h4{
 padding-top: 54px;
 font-family: Garamond;
 font-size: 48px;
 line-height: 48px;
 color: #fff;
}
.crafts .botm-right{
 width: 51.48%;
}
.crafts .botm-right div{
 padding-right: 34px;
}
.crafts .botm-left .botm-cont{
 padding: 24px 0 62px 0;
 font-size: 18px;
 line-height: 25px;
 color: #fff;
}
.crafts .botm-right .botm-cont{
 padding-top: 54px;
 font-size: 14px;
 line-height: 26px;
 color: #fff;
}
.crafts .botm-right .botm-cont.last-child{
 padding-top: 44px;
}
/* crafts.php  E */
/* fashion.php S */
.fashion{
 width: 1000px;
 min-height: 700px;
 margin: 0 auto;
 padding: 76px 0 98px 0;
 overflow: hidden;
}
.fashion .artGroup {
 float: left;
 display: block;
 width: 50%;
 position: relative;
}
.fashion .artGroup .artwork{
 height: 269px;
}
.fashion .artGroup .detail{
 background-color: #fff;
  height: 269px;
}
.fashion .artGroup img{
 display: block;
 width: 100%;
 height: 269px;
}
.fashion .artGroup .tips{
 display: block;
 margin: 0;
 width: 100%;
 height: 269px;
 color: #666;
 background-color: #fff;
}
.fashion .artGroup .time{
 padding: 36px 0 16px 0;
 font-family: Garamond;
 font-size: 24px;
 font-style: italic;
 line-height: 24px;
}
.fashion .artGroup .cont{
 padding-bottom: 40px;
 font-size: 18px;
 line-height: 22px;
}
.fashion .artGroup .more{
 padding-top: 36px;
 font-family: Garamond;
 font-size: 18px;
 line-height: 18px;
}
/* fashion.php E */
/* question.php S */
.question{
 width: 56.8%;
 min-width: 1000px;
 margin: 0 auto;
 padding-top: 95px;
 overflow: hidden;
}
.question .top{
 width: 100%;
 overflow: hidden;
}
.question .top img{
 display: block;
 width: 100%;
 height: auto;
}
.question .cont .e-title{
 padding: 28px 0;
 font-family: Garamond;
 font-size: 30px;
 line-height: 30px;
 color: #fff;
}
.question .cont .c-title{
 font-size: 18px;
 line-height: 18px;
 color: #fff;
}
.question .cont .answer{
 padding: 18px 0 66px 0;
 font-size: 14px;
 line-height: 26px;
 color: #fff;
}
/* question.php   E */
/* merchants.php  S */
.merchants{
 width: 56.8%;
 min-width: 1000px;
 margin: 0 auto;
 overflow: hidden;
}
.merchants-banner{
	position: relative;
	z-index: 1000;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.merchants-banner .cont{
	position: absolute;
	left: 9.4%;
	bottom: 20%;
}

.merchants-banner .icon {
  padding-top: 40px;
}
.merchants-banner .cont .pager {
  padding-bottom: 2px;
  font-size: 24px;
  font-family: Garamond;
  line-height: 24px;
  color: #fff;
  border-bottom: 2px solid #fff;
}
.merchants-banner .icon a {
  display: block;
}
.merchants-banner .icon a.first-child {
  margin: -1px 10px 0 0;
}
.merchants-banner .icon a i {
  font-size: 30px;
  line-height: 30px;
  color: #fff;
}

.merchants-banner .cont .c-title {
  font-size: 35px;
  line-height: 35px;
  color: #fff;
}
.merchants-banner .cont .e-title {
  padding: 52px 0 22px;
  font-family: Garamond;
  font-size: 72px;
  font-weight: 100;
  line-height: 72px;
  color: #fff;
}
.merchants .story .cont1{
 width: 488px;
}
.merchants .potential div {
  position: relative;
}
.merchants .potential img {
  display: block;
  width: 100%;
  height: auto;
}
.merchants .potential div p {
  position: absolute;
  left: 26px;
  bottom: 26px;
  font-size: 20px;
  color: #fff;
}

.merchants .cont .e-title {
  padding: 52px 0 22px;
  font-family: Garamond;
  font-size: 72px;
  font-weight: 100;
  line-height: 72px;
  color: #fff;
}
.merchants .cont .c-title {
  font-size: 35px;
  line-height: 35px;
  color: #fff;
}
.merchants .icon {
  padding-top: 40px;
}
.merchants .story .cont2{
 width: 752px;
}
.merchants .potential div p.first-child {
  bottom: 56px;
  font-family: Garamond;
  font-size: 36px;
  color: #fff;
}
.merchants .potential .cont {
 padding: 36px 0 0 28px;
 font-size: 14px;
 color: #fff;
}
.advantage .top {
 width: 100%;
 padding-top: 72px;
 overflow: hidden;
}
.advantage .top img {
  display: block;
  width: 100%;
  height: auto;
}
.advantage .botm {
  width: 100%;
  overflow: hidden;
}
.advantage .botm-left {
  width: 31.48%;
}
.advantage .botm-left div {
  padding-left: 34px;
}
.advantage .botm-left h4 {
  padding-top: 54px;
  font-family: Garamond;
  font-size: 48px;
  color: #fff;
}
.advantage .botm-left .botm-cont {
  padding: 24px 0 62px 0;
  font-size: 18px;
  line-height: 30px;
  text-indent: 0.5em;
  color: #fff;
}
.advantage .botm-right {
	width: 51.48%;
}
.advantage .botm-right div {
	padding-right: 34px;
}
.advantage .botm-right .botm-cont {
	padding-top: 38px;
	font-size: 14px;
	line-height: 26px;
	color: #fff;
}
.BMap_cpyCtrl,
.anchorBL{
	display: none;
}
.map-box{
	position: relative;
	padding-top: 60px;
}
.map-box ul{
	position: absolute;
	left: 25%;
	top: 25%;
}
.map-box ul li{
	float: none;
	width: 350px;
	padding: 25px 15px;
	border-top: 1px solid #ccc;
	background-color: #ededed;
}
.map-box p{
	font-family: Garamond;
	font-size: 18px;
	color: #333;
}
.map-box li.cur{
	padding: 42px 15px;
	border-top: 1px solid #000;
	background-color: #000;
	background-image: none;
}
.map-box li.icon1,
.map-box li.icon2,
.map-box li.icon3{
	width: 350px;
	padding-left: 56px;
	background-repeat: no-repeat;
	background-position: 14px 18px;
}
.map-box li.icon1{
	background-image: url(../img/contact-icon1.jpg);
}
.map-box li.icon2{
	background-image: url(../img/contact-icon2.jpg);
}
.map-box li.icon3{
	background-image: url(../img/contact-icon3.jpg);
}
.map-box li.icon1.cur,
.map-box li.icon2.cur,
.map-box li.icon3.cur{
	width: 350px;
	padding-left: 0;
	background-image: none;
}
.map-box li.cur p{
	text-align: center;
	font-size: 20px;
	color: #fff;
}
.map-box li.cur p.font1{
	font-size: 14px;
}
.join-table{
	width: 1000px;
	margin: 30px auto;
}
.join-table th{
	width: 250px;
	height: 52px;
	border: 1px solid #353535;
	font-size: 14px;
	color: #fff;
	font-weight: 100;
	vertical-align: middle;
}
.join-table td a{
	display: block;
	width: 250px;
	height: 52px;
	line-height: 52px;
	border: 1px solid #353535;
	text-align: center;
	font-size: 14px;
	color: #fff;
	vertical-align: middle;
}
/* merchants.php  E */
/* detail.php  S*/
.f-detail{
	width: 56.8%;
	min-width: 1000px;
	min-height: 600px;
	margin: 0 auto;
	padding-top: 260px;
	overflow: hidden;
	color: #bbb;
}
.f-header.header{
	padding-bottom: 40px;
	background-color: #000;
}
.detail-logo{
	position: absolute;
	right: 50%;
	top: 50px;
	margin-right: -86px;
}
.f-detail h4{
	padding-bottom: 22px;
	text-align: center;
	font-family: Garamond;
	font-size: 18px;
	font-weight: 100;
	color: #bbb;
}
.f-detail small{
	display: block;
	padding-bottom: 42px;
	text-align: center;
	font-family: Garamond;
	font-size: 24px;
}
.f-detail p {
	text-indent: 2rem;
	text-align: center;
	font-size: 14px;
	font-family: Garamond;
}
.BMap_Marker.BMap_noprint{
	background-position: center;
}
.f-detail p img{
	display: block;
	margin: 15px auto;
}
.detail-pager{
	padding-top: 40px;
}
.detail-pager div a{
	display: block;
	width: 80%;
	padding: 5px 10px;
	margin-bottom: 10px;
	font-family: Garamond;
	font-size: 16px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	color: #bbb;
}
.draw {
	position: relative;
	background: none;
	border: 0;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 1px #000;
	text-transform: capitalize;
}
.draw::before,.draw::after {
	box-sizing: border-box;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
}
 
.draw {
  -webkit-transition: color 0.25s;
          transition: color 0.25s;
}
.draw::before,
.draw::after {
  border: 1px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #fff;
  border-right-color: #fff;
  -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
          transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #fff;
  border-left-color: #fff;
  -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
          transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}         
/* .detail-pager div a:hover{
	padding: 4px 10px;
	border: 1px solid #fff;
	
} */
.detail-pager a.back{
	display: block;
	width: 100px;
	height: 32px;
	line-height: 32px;
	font-family: Garamond;
	font-size: 16px;
	color: #fff;
	text-align: center;
}

.header.f-header .link-lg {
  padding: 90px 9.4% 26px;
}
/* detail.php  E*/
/* online.php  S */
.online{
	width: 56.8%;
	min-width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}
.online .story .cont1{
	width: 467px;
}
.online .story .qr-code{
	margin: 20px auto;
	background-color: #fff;
	width: 110px;
	height: 110px;
	padding: 2px;
}
.online .qr-code img{
	display: block;
	width: 100%;
	height: auto;
}
.online .img-box{
	position: relative;
}
.online .img-box.box2{
	margin-bottom: 50px;
}
.online .img-box.box3{
	margin-top: 50px;
}
.online .img-box img{
	display: block;
	width: 100%;
	height: auto;
}
.online .img-box p{
	position: absolute;
	left: 26px;
	bottom: 26px;
	font-size: 20px;
	color: #fff;
}
.online .img-box p.first-child{
	bottom: 56px;
	font-family: Garamond;
	font-size: 36px;
	color: #fff;
}
.online .wrap2{
	padding: 56px 0;
	overflow: hidden;
}
.online .wrap2 .left,
.online .wrap2 .center,
.online .wrap2 .right {
	position: relative;
	float: left;
	width: 33.33%;
	height: 260px;
}
.online .wrap2 .left div,
.online .wrap2 .center div,
.online .wrap2 .right div{
	width: 58px;
	height: 58px;
	overflow: hidden;
	background-image: url(../img/story-icon.png);
	background-repeat: no-repeat;
}
.online .wrap2.box2 .left div,
.online .wrap2.box2 .center div,
.online .wrap2.box2 .right div,
.online .wrap2.wrap3 .left div,
.online .wrap2.wrap3 .center div,
.online .wrap2.wrap3 .right div{
	background-image: url(../img/online-icon.png);
}
.online .wrap2 .left div {
	background-position: left top;
}
.online .wrap2.box2 .left div {
	background-position: -16px -338px;
}  
.online .wrap2.box2 .center div{
	background-position: -16px -25px;
}
.online .wrap2 .center div {
	background-position: left -65px;
}
.online .wrap2.box2 .right div {
	background-position: -16px -258px;
}
.online .wrap2 .right div {
	background-position: left -123px;
}
.online .wrap3.box1 .left div{
	background-position: -20px -417px;
}
.online .wrap3.box1 .right div{
	background-position: -20px -710px;
}
.online .wrap3.box2 .left div{
	background-position: -20px -710px;
}
.online .wrap3.box2 .right div{
	background-position: -27px -478px;
}
.online .wrap3.box3 .left div{
	background-position: -20px -633px;
}
.online .wrap3.box3 .right div{
	background-position: -25px -557px;
}
.online .wrap3.box4 .left div{
	background-position: -20px -633px;
}
.online .wrap2 p{  
	padding-top: 32px;
	font-size: 14px;
	line-height: 30px;
}
.online .wrap2 p b{
	font-size: 18px;
}
.online .wrap2 .line {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 25px;
	margin: 50px 0 0 0;
	padding: 0;
	border-bottom: 2px solid #fff;
}
.online .wrap2.wrap3{
	padding: 0;
}
.online .wrap2.wrap3 p{
	padding: 10px 0 50px 0;
}
.online .wrap2.wrap3 .left,
.online .wrap2.wrap3 .right{
	position: relative;
	float: left;
	width: 45%;
	height: auto !important;
}
.online .wrap2.wrap3 .left{
	width: 47%;
	padding-right: 3%;
	margin-right: 5%;
}
.online .wrap2.wrap3 .left div,
.online .wrap2.wrap3 .right div{
	margin-bottom: 10px;
}
.online .online-botm .qr-code{
	width: 110px;
	height: 110px;
	margin: 0 auto;
	padding: 2px;
	background-color: #fff;
}
.online .online-botm p{
	padding: 20px 0;
	font-size: 16px;
	line-height: 16px;
	text-align: center;
}
.online .online-botm p.small{
	padding-bottom: 0;
	font-size: 14px;
}
.online-box img{
	display: block;
	margin: 0 auto;
}
/* online.php  E */
/* join.php    S */
.join{
	width: 1000px;
	min-height: 600px;
	margin: 0 auto;
	padding-top: 260px;
	overflow: hidden;
	color: #bbb;
}
.join .detail{
	padding-bottom: 100px;
}
.join .detail h4{
	padding-bottom: 20px;
	text-align: center;
	font-size: 24px;
	line-height: 24px;
	font-weight: 100;
}
.join .detail small{
	display: block;
	text-align: center;
	font-size: 24px;
	line-height: 24px;
	padding-bottom: 40px;
	font-weight: 100;
	font-style: italic;
}
.join .detail p{
	font-size: 16px;
	text-align: center;
}
.join .detail img{
	display: block;
	margin: 15px auto;
}
.join .requ{
	position: relative;
}
.join .requ .back{
	position: absolute;
	top: 15px;
	right: 0;
	display: block;
	width: 80px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border: 1px solid rgba(255,255,255,0.5);
}
.join .requ h4{
	font-family: Garamond;
	font-size: 48px;
	line-height: 48px;
	font-weight: 100;
	color: #fff;
}
.join .requ small{
	display: block;
	font-size: 24px;
	line-height: 24px;
	padding: 30px 0;
}
.join .requ div{
	font-size: 14px;
	line-height: 24px;
}
.join .join-cont{
	padding-top: 45px;
}
.join .join-cont div{
	float: left;
	width: 220px;
	padding-top: 55px;
	background-image: url(../img/join-bg.png);
	background-repeat: no-repeat;
	background-position: -220px top;
}
.join .join-cont div.first-child{
	background-position:  left top;
}
/* join.php    E */

.body-shadow{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: url(../img/opacity.png) repeat;
}
.video-pop{
    display: none;
    position: fixed;
    width: 758px;
    height: 406px;
    left: 50%;
    top: 50%;
    margin: -200px 0 0 -390px;
    background: #000;
}
.video-pop .close {
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 13px;
    background: url(../img/x.png) no-repeat;
    right: -40px;
    top: -30px;
}