/* CSS Document */
@font-face{	font-family:"en";src:url(AlibabaPuHuiTi-2-55-Regular.otf);}
@font-face{	font-family:"ali";src:url(AlibabaPuHuiTi-2-95-ExtraBold.otf);}
@font-face{	font-family:"bt"; src:url(AlibabaPuHuiTi-2-45-Light.otf);}
	html,body{ width:100%; position:relative;}

	li,ul,p{ margin:0px; padding:0; list-style:none;}
    body {
        background: #eee;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }

.logo {
    width:8rem;
    position: absolute;
    left:4%;
    margin: auto;
    top: 5vh;
    z-index:9999;
}
.banner{
	position: relative;
	width: 100%;
	height: 100vh;
}
.banner .banner-box{
	height: 100%;
}

.hand_banner_arrow {
  position: fixed;
    bottom:60px;
    width:17px;
    height:28px;
    left: 50.2%;
    z-index:1001;
    margin-left: -11px;
    background-image: url(images/mouse.png);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.hand_banner_arrow2 {
  position: fixed;
    bottom: 20px;
    width:17px;
    height:22px;
    left: 50.2%;
    z-index:1001;
    margin-left: -11px;
    background-image: url(images/jt.png);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    -webkit-animation-name: AniDown;
    cursor: pointer;
}
.swiper-slide img{ width:100%; display:block;}
.case a{
	display: block;
}
.case .item{
	position: relative;
	float: left;
	width: 25%;
	-moz-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding-bottom: 25%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	-moz-transition: all .2s ease;
	transition: all .2s ease;
}
.case .item .box{
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.case .item:hover .box{
	opacity: 0.9;
}
.boder{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 90%;
	height: 90%;
	border: 0rem solid rgba(255,255,255,0.4);
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transition: all .3s ease .2s;
	-o-transition: all .3s ease .2s;
	-moz-transition: all .3s ease .2s;
	transition: all .3s ease .2s;
}
.case .item:hover .boder {
	border-width:0.2rem;
}
.boder .text{
	text-align: center;
	color: #fff;
}
.boder .label{
	font-size:1rem;
	font-family:"ali";
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.boder .title{
	font-size: 1rem;
	 font-family:"en";
	line-height:2; 
	margin: 0.1rem 0;
	overflow: hidden; text-transform: uppercase;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.boder .title:after{
	display: block;
	content: "";
	width: 0%;
	margin: 0.15rem auto 0;
	height: 0.1rem;
	background: #fff;
	-webkit-transition: all .3s ease .2s;
	-o-transition: all .3s ease .2s;
	-moz-transition: all .3s ease .2s;
	transition: all .3s ease .2s;
}
.case .item:hover .boder .title:after{
	width: 50%;
}
.boder .des{
	font-size: 1rem;
	line-height:3;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	 font-family:"bt";
	text-overflow: ellipsis;
	white-space: nowrap;
}
.list{
	width: 1.5rem;
	position: absolute;
	right:3%;
	top: 6vh;
	cursor: pointer;
	z-index: 10;
}
.list:hover .navBox { display: block;
}
#QR-code {
    position: fixed;
    width: 1rem;
    top:85%;
    right:100px;
    text-align: center;
    z-index: 1001;
}
#QR-code .code {
    position: relative;
    z-index: 1;
    width:80px;
    margin: 0.05rem auto;
}
.navBox{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    position: absolute;
	top: 0;
	left: 0;
	background: url(images/nav-bg.jpg);
	-webkit-animation: .1s infinite noise;
	-moz-animation: .1s infinite noise;
	animation: .1s infinite noise;
	z-index: 999;
}
.navTxt{
	position: absolute;
	left: 20%;
	top:15%;
}
.navTxt>.item a{
	position: relative;
    line-height:2.5;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s;
	white-space:nowrap;
}
.navTxt .en{
	position: relative;
	display: inline-block;
	color: #ffffff;
	letter-spacing: .02rem;
	font-size:2.5rem;
    text-transform: uppercase;
	vertical-align: middle;
}
.navTxt .cn{
	display: inline-block;
	color: #ffff00;
	font-size:1.5rem;
	vertical-align: middle;
	padding: 0 4%;
	opacity: 0;
	-webkit-transform: translateX(-20%);
	-moz-transform: translateX(-20%);
	-ms-transform: translateX(-20%);
	transform: translateX(-20%);
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0s;
	-o-transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0s;
	-moz-transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0s;
	transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0s;
}

.navTxt>.item a:hover .en{
	color: #121317;
	text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff;
}
.navTxt>.item a:hover .en::after{
	width: 100%;
}
.navTxt>.item a:hover .cn{
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	transform: none;
}
.navTxt>.item a span{
	position: absolute;
	left: -0.96rem;
	top: 50%;
	-webkit-transform: translate(-100%,-50%);
	-moz-transform: translate(-100%,-50%);
	-ms-transform: translate(-100%,-50%);
	transform: translate(-100%,-50%);
    display: inline-block;
    text-align: right;
    font-style: italic;
    color: #fff;
    font-size: 0.2rem;
    line-height: 1.4;
	text-shadow: none;
}

.navBox .circle1{
	position: absolute;
	width: 0.51rem;
	left: 80%;
	top: 15%;
	-webkit-animation: shake 4s linear 0s infinite;
	-moz-animation: shake 4s linear 0s infinite;
	animation: shake 4s linear 0s infinite;
}
.navBox .circle2{
	position: absolute;
	width: 0.61rem;
	left: 15%;
	bottom: 15%;
	-webkit-animation: shake 6s linear 0s infinite;
	-moz-animation: shake 6s linear 0s infinite;
	animation: shake 6s linear 0s infinite;
}
.navBox .close{
	cursor: pointer;
	position: absolute;
	width: 2rem;
	right: 4%;
	top: 5%;
}


.btn-nav {
	position: absolute;
	top:30px;
	right:30px;
	background:transparent;
	border:none;
	padding:10px;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-ms-transition:all .5s ease;
	-o-transition:all .5s ease;
	transition:all .5s ease;
	cursor:pointer;
	z-index:99999;
}
.btn-nav:focus {
	outline:0;
}
.icon-bar {
	display:block;
	margin:6px 0;
	width:32px;
	border-radius:15px;
	height:4px;
	background-color:#FFFFFF;
}
.btn-nav:hover .icon-bar {
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
	background-color:#FFFFFF;
}
.nav-content {
	position:fixed;
	top:-100%;
    width:100%;
	overflow:hidden;
	left:0;
	right:0;
	background: url(images/nav-bg.jpg);
	height:100%;
	z-index:100;
}
.nav-list {
	list-style:none;
	padding:0;
	position:relative;
	top:30%;
}
.item-anchor:after {
	content:"";
	position:absolute;
	width:3px;
	height:3px;
	left:0;
	bottom:0;
	z-index:9;
	background:transparent;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
}
.item-anchor {
	color:#fff;
	font-size:30px;
	text-transform:uppercase;
	position:relative;
	text-decoration:none;
	padding:10px;
}
.item-anchor:hover,.item-anchor:focus {
	color:#FCA311;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
}
.item-anchor:hover:after,.item-anchor:focus:after {
	width:100%;
	background:#FCA311;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	-o-transition:all 1s ease;
	transition:all 1s ease;
}
.nav-item {
	margin:40px auto;
	text-align:center;
}
.animated {
	display:block;
	margin:0 auto;
}
.animated:hover .icon-bar,.animated:focus .icon-bar {
	background-color:#FFFFFF;
}
.animated:focus {
	cursor:pointer;
	z-index:9999;
}
.middle {
	margin:0 auto;
}
.icon-bar {
	-webkit-transition:all .7s ease;
	-moz-transition:all .7s ease;
	-ms-transition:all .7s ease;
	-o-transition:all .7s ease;
	transition:all .7s ease;
	z-index:999999;
}
.animated .icon-bar {
	z-index:999999;
	background-color:#FFFFFF;
}
.animated .top {
	-webkit-transform:translateY(10px) rotateZ(45deg);
	-moz-transform:translateY(10px) rotateZ(45deg);
	-ms-transform:translateY(10px) rotateZ(45deg);
	-o-transform:translateY(10px) rotateZ(45deg);
	transform:translateY(10px) rotateZ(45deg);
}
.animated .bottom {
	-webkit-transform:translateY(-11px) rotateZ(-45deg);
	-moz-transform:translateY(-11px) rotateZ(-45deg);
	-ms-transform:translateY(-11px) rotateZ(-45deg);
	-o-transform:translateY(-11px) rotateZ(-45deg);
	transform:translateY(-11px) rotateZ(-45deg);
}
.animated .middle {
	width:0;
}
@keyframes showNav {
	from {
	top:-100%;
}
to {
	top:0;
}
}@-webkit-keyframes showNav {
	from {
	top:-100%;
}
to {
	top:0;
}
}@-moz-keyframes showNav {
	from {
	top:-100%;
}
to {
	top:0;
}
}@-o-keyframes showNav {
	from {
	top:-100%;
}
to {
	top:0;
}
}.showNav {
	-webkit-animation:showNav 1s ease forwards;
	-moz-animation:showNav 1s ease forwards;
	-o-animation:showNav 1s ease forwards;
	animation:showNav 1s ease forwards;
}
@keyframes hideNav {
	from {
	top:0;
}
to {
	top:-100%;
}
}@-webkit-keyframes hideNav {
	from {
	top:0;
}
to {
	top:-100%;
}
}@-moz-keyframes hideNav {
	from {
	top:0;
}
to {
	top:-100%;
}
}@-o-keyframes hideNav {
	from {
	top:0;
}
to {
	top:-100%;
}
}
.hideNav {
	-webkit-animation:hideNav 1s ease forwards;
	-moz-animation:hideNav 1s ease forwards;
	-o-animation:hideNav 1s ease forwards;
	animation:hideNav 1s ease forwards;
}
.hidden {
	display:none;
}

.sectionBox img {
    max-width: 100%;
    display: block;
    vertical-align: middle;
}
.sectionBox {width: 100%; max-width:1280px;
    margin: 0 auto; margin-top:50px;}
#up {
    position: fixed;
    width: 1rem;
    top:95%;
    right:65px;
    text-align: center;
    z-index: 100;
}
#up .up {
    position: relative;
    z-index: 1;
    width:2.6rem;
    margin: 0.05rem auto;
}

#down {
    position: absolute;
    width: 1rem;
    top:80%;
    left:50%;
    text-align: center;
    z-index: 100;
}
#down .x {
    position: relative;
    bottom: 40px;
    width: 23px;
    height: 73px;
    left: 50%;
    z-index: 1001;
    margin-left: -11px;
    background-image: url(images/x.png);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.toptxt{
    width: 100%;
    text-align: center;
    color:#fff;
    position: absolute;
    left:0;
	top: 35%;

}
.top-title>p{text-align: center;}
.top-title>p:nth-of-type(1){
    font-size:1.8rem;
	font-family:"ali";
}
.top-title>p:nth-of-type(2){
	display: inline-block;
    font-size: 2.5rem;
	text-transform: uppercase;
	font-family:"en";
}
.top-title>p:nth-of-type(4){
    font-size:2.5rem;
	font-family: "bt";
}
.top-title>p:nth-of-type(3){
    content: "";
    display: block;
    width: 10%;
    height: 0.2rem;
    background-color: #fff;
    margin:2rem auto;
}



@media screen and (max-width: 1000px) {
	.toptxt{
    width: 100%;
    text-align: center;
    color:#fff;
    position: absolute;
    left:0;
	top: 30%;

}
	.top-title>p:nth-of-type(1){
		font-size: .8rem;
		font-family:"ali";
	}
	.top-title>p:nth-of-type(2) {
		font-size: 1rem;
	}
	.top-title>p:nth-of-type(4) {
		font-size: 1rem;
	}
	.top-title>p:nth-of-type(3){
    content: "";
    display: block;
    width: 15%;
    height: 0.1rem;
    background-color: #fff;
    margin:0.3rem auto;
}

	.banner{
	position: relative;
	width: 100%;
	height: 50vh;
}
	.pc{
		display: none;
	}
	.phone{
		display: block;
	}
	.logo{
		width: 6rem;
	}
	.list{
		width: 1.2rem;
	}
	.container{
		max-width: 100%;
	}
	.case .item{
		width: 50%;
		padding-bottom: 50%;
	}
	.case .item:hover .boder {
		border-width: 0.15rem;
	}
	.boder .label{
		font-size: 0.54rem;
	}
	.boder .title {
		font-size: 0.8rem;
		margin: 0.6rem 0;
	}
	.boder .title:after{
		height: 0.06rem;
		margin: 0.6rem auto 0;
	}
	.boder .des {
		font-size: 0.62rem;
	}
	.service{
		margin: 2.4rem auto 2.4rem;
	}
	.service .item{
		width: 50%;
	}
	.service .item .icon-brand{
		width: 8.28rem;
		height: 7.18rem;
	}
	.service .item dd:first-of-type {
		font-size: 0.96rem;
	}
	.service .item dd{
		font-size: 0.7rem;
	}
	.service .item dt{
		min-height: 8.52rem;
	}
	.service .item .icon-digital{
		width: 7.98rem;
		height: 7.5rem;
	}
	.service .item .icon-creative {
		min-width: 10.65rem;
		height: 7.7rem;
	}
	.service .item .icon-motion {
		min-width: 9.75rem;
		height: 8.4rem;
	}
	.customer{
		width: 80%;
	}
	.customer .swiper-slide{
		width: 33%;
	}
	.about-us{
		display: block;
		padding: 3rem 2rem 1rem;
	}
	.about-us h3{
		text-align: left;		
	}
	.about-us h3 img{
		width: 3.8rem;
		left: 1.2rem;
	}
	.about-us h3 .icon{
		position:relative;
		width: 3.58rem;
		height: 3.58rem;
		right: initial;
		margin-left: 0;
	}
	.about-us p:before{
		display: none;
	}
	.about-us p{
		width: 100%;
		padding: 2rem 0;
		font-size: 0.68rem;
	}
	.join-us-text{
		max-width: 80%;
	}
	.job-box .man{
		top: -6rem;
		left: 16%;
		width: 40%;
	}
	.job-bg:after{
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		transform: skewX(0deg);
		-moz-border-radius: 1.6rem;
		border-radius: 1.6rem;
	}
	.job-bg{
		max-width: 80%;
		margin: 0 auto 0;
		padding: 2.5rem 0.4rem 2rem;
	}
	.job-require-title{
		font-size: 0.96rem;
		margin: 1.5rem 0 0.5rem;
	}
	.job .swiper-slide .left{
		float: none;
	}
	.job .swiper-slide .right{
		float: none;
		text-align: left;
		max-width: 100%;
	}
	.job-name{
		font-size: 1.28rem;
	}
	.job-en-name {
		font-size: 1.2rem;
	}
	.job .swiper-slide .right:after{
		height: 80%;
		width: 0.2rem;
		bottom: 0;
		top: 0;
		margin: auto;
	}
	.job .swiper-slide .left{
		max-width: 100%;
		font-size: 0.64rem;
	}
	.swiper-button-next, .swiper-button-prev{
		width: 0.81rem;
		height: 1.38rem;
	}
	.job-box .swiper-button-prev{
		left: -1.4rem;
	}
	.job-box .swiper-button-next{
		right: -1.4rem;
	}
	.noise-box{
		margin-top: -40%;
		padding-top: 50%;
	}
	.company-addr{
		display: block;
	}
	.Illustration{
		position: absolute;
		top: -20%;
		right: -80%;
		width: 150%;
		opacity: 0.3;
	}
	.company-addr .addr{
		width: 80%;
		margin: 0 auto;
	}
	.copyright,footer>p{	
		padding: 1.08rem 0;
	}
	.copyright span,.copyright a,footer>p span{
		display: block;
		font-size: 0.52rem;
		line-height: 1.8;
	}
	.company-addr .addr li,.company-addr .addr li:last-of-type{
		border-bottom: none;
		padding-bottom: 1.5rem;
	}
	.company-addr .addr .city{
		font-size: 0.64rem;
		margin: 0.45rem 0;
	}
	.company-addr .addr li p{
		font-size: 0.6rem;
	}
	.navBox .close{
		width: 1.83rem;
	}
	.navTxt{
		left: 30%;
	}
	.navTxt>.item a{
		line-height: 1.4;
	}
	.navTxt>.item a span{
		font-size: 0.8rem;		
		left: -20%;
	}
	.navTxt>.item .en{
		font-size: 1.8rem;
	}
	.navTxt .cn{
		font-size: 1rem;
	}
	.navBox .circle1{
		width: 1.4rem;
	}
	.navBox .circle2{
		width: 2rem;
	}
	.banner .swiper-pagination-bullet{
		width: 0.7rem;
		height: 0.7rem;
		margin: 0 0.4rem;
	}
	.banner .banner-box .swiper-slide .container{
		display: block;
		width: 100%;
		padding: 15% 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.banner-creative canvas{
		width: 19rem;
		height: 17.1rem;
		margin: 0 auto;
	}
	.swiper-slide .cons .icon{
		width: 1.8rem;
	}
	.banner .banner-box .swiper-slide .cons{
		padding: 0 10%;
	}
	.creative .cons,.motion .cons{
		text-align: right;
	}
	.swiper-slide .cons p{
		font-size: 0.8rem;
		margin: 0.6rem 0 1rem;
	}
	.swiper-slide .text{
		width: 8rem !important;
	}
	.swiper-slide .slogan{
		width: 4.5rem !important;
	}
	.banner-brand canvas{
		width: 16rem;
		height: 10rem;
		margin: 10% auto;
	}
	.banner-toukui{text-align: center;padding-top:35%;position: relative;}
	.banner-toukui canvas{
		width: 14rem;
		height: 14rem;
		margin: 10% auto;
		position: relative;
	}
	.banner-motion canvas{
		width: 20rem;
		height: 16rem;
		margin: 0 auto;
	}
	.banner-digital canvas{
		width: 18rem;
		height: 13.08rem;
		margin: 5% auto 0;
	}
	.swiper-slide.digital .slogan{
		width: 3rem !important;
	}

	.Introduction{
		display: block;
		max-width: 80%;
		font-size: 0.65rem;
		-moz-border-radius: 0.8rem;
		border-radius: 0.8rem;
		padding: 1rem;
		font-size: 0.6rem;
	}
	.In-left{
		width: 100%;
	}
	.In-right{
		width: 100%;
	}
	.In-left span{
		font-size: 0.7rem;
	}
	.In-right img{
		margin-top: 0.5rem;
		width: 40%;
	}
	.Introduction p{
		font-size: 0.65rem;
	}
	.s-title p.txt1{
		font-size: 2rem;
	}
	.s-title span{
		font-size: 7rem;
		text-stroke-width: 0.1rem;
	}
	.s-title>div{
		margin: 3.2rem auto 1.6rem;
	}
	.sectionBox{
		margin-top:0px;
	}
	.s-title p.txt2{
		font-size: 1.2rem;
	}
	.s-title p.txt2:before, .s-title p.txt2:after{
		width: 0.32rem;
		height: 0.32rem;
	}
	.s-con>p{
		font-size: 0.7rem;
	}
	.sectionBox, .backBox,.tabBox{
		max-width: 100%;
	}
	.tabBox{
		margin: 2.5rem auto;
	}
	.s-con{
		margin: 2rem 0;
	}
	.backIndex{
		font-size: 0.7rem;
		padding: 0.5rem 2rem;
	}
	.backIndex>img, .backIndex>span{
		width: 1rem;
	}
	.tprev>img, .tnext>img{
		width: 1.36rem;
	}
	.tprev{
		left: -1.36rem;
	}
	.tnext{
		right: -1.36rem;
	}
	.tTxtbox>p.tab-txt1{
		font-size: 0.56rem;
	}
	.tTxtbox>p.tab-txt2 {
		font-size: 0.96rem;
	}
	.swiper-slide .cons .icon,.swiper-slide .cons p,.swiper-slide .cons .text,.swiper-slide .cons .slogan{
		-webkit-transform: translate(0, 4rem);
		-moz-transform: translate(0, 4rem);
		-ms-transform: translate(0, 4rem);
		transform: translate(0, 4rem);
	}
#QR-code {
    position: fixed;
    width: 1rem;
    top: 85%;
	right: 80px;
    text-align: center;
    z-index: 100;
}
.hand_banner_arrow {
  position: fixed;
    bottom:60px;
    width:17px;
    height:28px;
    left: 50.5%;
    z-index:1001;
    margin-left: -11px;
    background-image: url(images/mouse.png);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.hand_banner_arrow2 {
  position: fixed;
    bottom: 20px;
    width:17px;
    height:22px;
    left: 50.5%;
    z-index:1001;
    margin-left: -11px;
    background-image: url(images/jt.png);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    -webkit-animation-name: AniDown;
    cursor: pointer;
}
}


.hand_banner_arrow2 { 
    -webkit-animation: twinkling 1s infinite linear; 
	animation: twinkling 1s infinite linear; 
}
@-webkit-keyframes twinkling{
  0% {
      opacity: 1; -webkit-transform: translateY(-20px);
	  opacity: 1; transform: translateY(-20px);
  }
  50% {
      opacity: 0.5;  -webkit-transform: translateY(-10px);
	  opacity: 0.5;  transform: translateY(-10px);
  }
  75% {
      opacity: 0.3;  -webkit-transform: translateY(-5px);
	  opacity: 0.3; transform: translateY(-5px);
	    }
   100% {
      opacity: 0;  -webkit-transform: translateY(0px);
	  opacity: 0;  transform: translateY(0px);
  }
}
 
@keyframes twinkling{
  0% {
      opacity: 1; -webkit-transform: translateY(-20px);
	  opacity: 1; transform: translateY(-20px);
  }
  50% {
      opacity: 0.5;  -webkit-transform: translateY(-10px);
	  opacity: 0.5;  transform: translateY(-10px);
  }
  75% {
      opacity: 0.3;  -webkit-transform: translateY(-5px);
	  opacity: 0.3; transform: translateY(-5px);
	    }
   100% {
      opacity: 0;  -webkit-transform: translateY(0px);
	  opacity: 0;  transform: translateY(0px);
  }
}
 @media screen and (max-width:768px) {
	 .navTxt{
	position: absolute;
	left: 10%;
	top:15%;
}
.logo {
    width:5rem;
    position: absolute;
    left:4%;
    margin: auto;
    top:2.5vh;
    z-index:9999;
}
.banner{
	position: relative;
	width: 100%;
	height: 100%;
}
.banner .banner-box{
	height: 100%;
}
.swiper-slide img{ width:100%; display:block;}


.btn-nav {
	position: absolute;
	top:0px;
	right:10px;
	background:transparent;
	border:none;
	padding:10px;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-ms-transition:all .5s ease;
	-o-transition:all .5s ease;
	transition:all .5s ease;
	cursor:pointer;
	z-index:99999;
}
.navTxt>.item a{
	position: relative;
    line-height:2;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s;
	white-space:nowrap;
}
.nav-content {
	position:fixed;
	top:-100%;
    width:100%;
	overflow:hidden;
	left:0;
	right:0;
	background: url(wap/images/nav-bg.jpg);
	height:100%;
	z-index:1002;
}
}