html {
	height:100%
}
.top-nav-box {
	background:none
}
.menu-slide .nav-bar {
	transform:translateX(100%)
}
.menu-slide .line-1 {
	transform:translateY(0) rotate(0)
}
.menu-slide .line-2 {
	transform:rotate(0)
}
.menu-slide .line-3 {
	opacity:.25
}
.arrow {
	width:30px;
	height:30px;
	background:url(../images/arrow.png)
}
.dot-bar {
	position:fixed;
	width:30px;
	top:50%;
	right:110px;
	transform:translateY(-50%);
	color:#fff
}
.dot-bar .dot {
	width:10px;
	height:10px;
	display:block;
	margin-bottom:40px;
	border-radius:100%;
	background-color:#fff;
	position:relative
}
.dot-bar .dot:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	background-color:currentColor;
	transform-origin:50% 50%;
	width:8px;
	height:8px;
	border:1px solid currentColor;
	border-radius:100%;
	transform:scale(3);
	opacity:0
}
.wrapper {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none
}
.wrapper .bg-img {
	animation:.3s scaleIn ease-in-out;
	position:absolute;
	top:50%;
	left:50%;
	width:2560px;
	height:1020px;
	min-width:100%;
	min-height:100%;
	transform:translate(-50%,-50%)
}
.wrapper .title {
	font-size:0;
	height:84px;
	background-repeat:no-repeat;
	display:block
}


.wrapper .text-bar {
	position:absolute;
	top:50%;
	left:0;
	right:0;
	transform:translate(0,-50%);
	animation:slideUpMar .5s ease-in-out
}
.wrapper-1 .text-bar {
	height:100%
}
.wrapper-1 .title {
	width:720px;
	height:203px;
	margin:0 auto;
	position:absolute;
	top:35%;
	left:0;
	right:0
}
.wrapper-1 .btn-bar {
	line-height:90px;
	text-align:center;
	border-bottom:1px solid #292a5e;
	position:absolute;
	bottom:17%;
	left:0;
	right:0
}
.wrapper-1 .btn {
	display:inline-block;
	position:relative;
	color:#fff;
	font-size:20px;
	margin:0 6%;
	cursor:pointer
}

.wrapper-1 a:link{color:#fff}

.wrapper-1 .btn:after {
	content:'';
	background:#5959b6;
	width:100%;
	height:1px;
	position:absolute;
	bottom:-2px;
	left:0;
	transform:scale(0,1);
	transition:all .2s ease-in-out;
	opacity:0
}
.wrapper-1 .btn:hover:after {
	transform:scale(1,1);
	opacity:1
}

.wrapper-1 .btn a {color:#fff;}

.wrapper-1 .btn-bar2 {
    line-height:90px;
    text-align:center;
    position:absolute;
    bottom:6%;
    left:0;
    right:0
}
.wrapper-1 .btn2 {
    display:inline-block;
    position:relative;
    color:#fff;
    font-size:13px;
    margin:0 2.8%;
    cursor:pointer
}

.wrapper-1 .btn2 a{
    color:#939393;
}

.wrapper-2 .text-bar {
	width:1302px;
	margin-left:auto;
	margin-right:auto
}
.wrapper-2 .poster-box {
	overflow:hidden;
	position:relative;
	margin-top:25px;
	padding-top:550px
}
.wrapper-2 .poster-bar {
	height:540px;
	color:#fff;
	position:absolute;
	top:0;
	left:0;
	font-size:0;
	transition:all .5s ease-in-out
}
.wrapper-2 .poster {
	width:315px;
	height:468px;
	border-radius:4px;
	overflow:hidden;
	line-height:1;
	transform:translateY(-50%);
	transition:all .3s ease-in-out;
	transform-origin:50% 50%;
	display:inline-block;
	position:relative;
	top:50%;
	left:0;
	margin-right:4px;
	vertical-align:top
}
.wrapper-2 .poster:hover .poster-mask {
	opacity:0;
}
.wrapper-2 .img {
	display:block;
	width:100%;
	height:100%;
	filter:grayscale(1);
}
.wrapper-2 .poster-text {
	height:65px;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	background:url(../images/poster_text_mask.png) no-repeat;
	opacity:0;
	transition:all .3s ease-in-out
}
.wrapper-2 .poster-text .num {
	top:140px;
	left:auto;
	right:24px;
	opacity:1 !important
}
.wrapper-2 .poster-title {
	margin-top:0px;
	height:20px;
	font-size:14px;
	padding-left:24px;
	line-height:125%;
	color:#c6c8d8;
	overflow:hidden;
}

.wrapper-2 .poster-desc {
	margin-top:5px;
	font-size:12px;
	padding-left:24px
}
.wrapper-2 .poster-desc a{
	width:94px;height:34px;

}
.wrapper-2 .poster-desc .im{
	width:92px;
	border:1px solid #fff;
	border-radius:4px;
	}
.wrapper-2 .num {
	position:absolute;
	font-size:36px;
	top:20px;
	left:18px;
	opacity:1;
	transition:all .3s ease-in-out
}
.wrapper-2 .poster-mask {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.48);
	opacity:1;
	transition:all .3s ease-in-out;
	width:343px;
	height:470px;
}
.wrapper-2 .active {
	width:343px;
	height:510px
}
.wrapper-2 .active .poster-mask {
	opacity:0;
	
}
.wrapper-2 .active .poster-text {
	opacity:100;
	background:url(../images/poster_text_mask.png) no-repeat;
}
.wrapper-2 .active .num {
	opacity:0
}
.wrapper-2 .active .img {
	filter:grayscale(0);
	width:343px;
	height:510px
}
.wrapper-2 .arrow-bar {
	text-align:center;
	padding-top:20px
}
.wrapper-2 .arrow,.wrapper-2 .count-bar {
	display:inline-block;
	vertical-align:top
}
.wrapper-2 .count-bar {
	width:76px;
	font-size:24px;
	color:#fff;
	line-height:30px
}
.wrapper-2 .arrow-pre {
	margin-right:125px
}
.wrapper-2 .arrow-next {
	margin-left:125px;
	background-position:-30px 0
}
.wrapper-3 .title {
	margin-bottom:50px
}
.wrapper-3 .text-bar {
	width:1447px;
	margin:0 auto;
	color:#fff
}
.wrapper-3 .slider {
	float:left;
	width:706px;
	height:454px;
	position:relative;
	overflow:hidden
}
.wrapper-3 .item {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	transform:translateX(-100%);
	z-index:1
}
.wrapper-3 .img {
	width:100%;
	height:100%;
	display:block
}
.wrapper-3 .music-text {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	height:140px;
	background:rgba(0,0,0,0.7)
}
.wrapper-3 .music-title {
	font-size:20px;
	line-height:1;
	margin-top:45px;
	padding-left:50px
}
.wrapper-3 .music-desc {
	font-size:16px;
	line-height:40px;
	padding-left:50px
}
.wrapper-3 .count-bar {
	text-align:center;
	position:absolute;
	bottom:26px;
	left:-7%;
	right:0;
	z-index:4;
	width:868px
}
.wrapper-3 .dot {
	width:10px;
	height:10px;
	background:#77778c;
	opacity:.3;
	transition:all .3s ease-in-out;
	border-radius:5px;
	display:inline-block;
	margin:0 10px
}
.wrapper-3 .dot-active {
	width:36px;
	background:#fff;
	opacity:1
}
.wrapper-3 .right-content {
	overflow:hidden;
	padding:0 60px;
	background:#14173d;
	height:454px;
	color:#c6c8d8
}
.wrapper-3 .qrcode-bar {
	margin:30px 0 0 0px;
	border-bottom:1px solid #4F7394;
	padding-bottom:20px
}
.wrapper-3 .qrcode {
	width:100%;
	height:178px;
	display:inline-block;
	vertical-align:top;
}
.wrapper-3 .qr-text {
	display:inline-block;
	vertical-align:top;
	font-size:26px;
	line-height:28px;
	color:#B4A96A;
	text-align: left;
	
}

.wrapper-3 .qr-text  a:link {color: #B4A96A;}
.wrapper-3 .qr-text  a:hover {color: #408BCE;}
.wrapper-3 .qr-text  a:visited {color: #B4A96A;}



.wrapper-3 .qr-text2 {
	display:inline-block;
	vertical-align:top;
	font-size:14px;
	line-height:200%;
	padding-top:20px;
	height:60px;
	overflow:hidden;
	text-align: left;
	width:600px;
}

.wrapper-3 .qr-text2  a:link {color: #c6c8d8;}
.wrapper-3 .qr-text2  a:hover {color: #408BCE;}
.wrapper-3 .qr-text2  a:visited {color: #778899;}

.wrapper-3 .right-text {
	font-size:16px;
	line-height:280%;
	margin-top:20px;
	
}

.wrapper-3 .right-text-title {
	width:85%;
	float:left;
}

.wrapper-3 .right-text-date {
	width:15%;
	float:right;
	text-align:right;
}

.wrapper-3 .right-text-title a:link {color: #c6c8d8;}
.wrapper-3 .right-text-title a:hover {color: #408BCE;}
.wrapper-3 .right-text-title a:visited {color: #778899;}

.wrapper-3 .btn {
	line-height:1;
	color:#7787ee;
	font-size:16px;
	padding-left:20px;
	position:relative;
	margin-top:20px;
	display:inline-block;
	transition:all .3s ease-in-out
}
.wrapper-3 .btn:hover {
	transform:translateY(-10px)
}
/*
.wrapper-3 .btn:after {
	content:'';
	background:url(../images/arrow.png);
	background-position:-60px 0;
	right:0;
	top:0;
	width:16px;
	height:16px;
	position:absolute
}
*/
.wrapper-3 .pre-active {
	transform:translateX(0);
	z-index:2
}
.wrapper-3 .active {
	transform:translateX(0);
	animation:opacity .5s ease-in-out;
	z-index:3
}
.wrapper-4 .text-bar {
	width:1447px;
	margin:0 auto;
	color:#fff
}
.wrapper-4 .story-bar {
	background:rgba(255,255,255,0.21);
	margin-top:50px;
	height:545px
}
.wrapper-4 .img-bar {
	width:545px;
	height:545px;
	position:relative;
	float:left
}
.wrapper-4 .pan {
	width:100%;
	height:100%;
	position:absolute;
	left:50%;
	top:0;
	background:url(../images/campaign/pan.png) no-repeat
}
.wrapper-4 .main-img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}
.wrapper-4 .right-content {
	overflow:hidden;
	height:437px;
	padding:100px 192px 0 365px;
	position:relative
}
.wrapper-4 .right-title {
	font-size:36px;
	line-height:1
}
.wrapper-4 .right-desc {
	font-size:16px;
	line-height:1.8;
	margin:20px 0 40px
}
.wrapper-4 .item {
	display:inline-block;
	width:96px;
	height:96px;
	margin:0 15px 15px 0;
	vertical-align:top;
	border-radius:4px;
	overflow:hidden
}
.wrapper-4 .link {
	display:block;
	width:100%;
	height:100%;
	position:relative
}
.wrapper-4 .link:after {
	content:'';
	width:88px;
	height:88px;
	border:4px solid #fff;
	position:absolute;
	top:0;
	left:0;
	display:none;
	animation:scaleOpacity .3s ease-in-out
}
.wrapper-4 .active .link:after {
	display:block
}
.wrapper-4 .img {
	display:block;
	width:100%;
	height:100%
}
.wrapper-4 .qrcode-bar {
	position:absolute;
	top:100px;
	right:32px;
	width:160px;
	height:396px;
	border-left:1px solid #a4d6e5;
	text-align:center
}
.wrapper-4 .qrcode {
	width:108px;
	height:108px;
	border-radius:4px;
	display:inline-block
}
.wrapper-4 .qr-text {
	font-size:12px;
	line-height:2
}
.wrapper-cross .text-bar {
	width:1500px;
	margin:0 auto;
	color:#fff;
	position:relative
}
.wrapper-cross .title-desc {
	line-height:60px;
	font-size:16px;
	margin-top:5px
}
.wrapper-cross .cross-bar {
	position:relative;
	width:1447px;
	overflow:hidden
}
.wrapper-cross .cross-box {
	position:relative;
	height:545px;
	transition:all .5s ease-in-out
}
.wrapper-cross .cross-list {
	position:absolute
}
.wrapper-cross .cross-list:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:'';
	clear:both;
	height:0
}
.wrapper-cross .item {
	width:280px;
	height:545px;
	position:relative;
	float:left;
	transition:all .5s ease-in-out;
	overflow:hidden;
	background:#071127
}
.wrapper-cross .item:hover .img {
	filter:grayscale(0)
}
.wrapper-cross .img {
	width:358px;
	height:545px;
	position:absolute;
	top:0;
	left:-39px;
	transition:all .5s ease-in-out;
	filter:grayscale(1)
}
.wrapper-cross .cross-text {
	overflow:hidden;
	height:545px;
	padding-left:34px;
	animation:opacity .2s ease-in-out;
	animation-delay:.3s;
	animation-fill-mode:backwards;
	position:relative;
	display:none
}
.wrapper-cross .cross-desc {
	font-size:14px;
	line-height:1.5;
	width:158px;
	position:absolute;
	bottom:43px;
	left:40px
}
.wrapper-cross .to-more {
	width:117px;
	height:29px;
	background:url(../images/campaign/more.png);
	display:block;
	margin-top:50px
}
.wrapper-cross .cross-mask {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.65);
	animation:opacity .2s ease-in-out;
	animation-delay:.3s;
	animation-fill-mode:backwards
}
.wrapper-cross .icon-plus {
	display:block;
	width:13px;
	height:13px;
	background:url(../images/campaign/plus.png)
}
.wrapper-cross .num {
	position:absolute;
	top:40px;
	left:40px;
	font-size:30px;
	line-height:1
}
.wrapper-cross .arrow-bar {
	position:absolute;
	bottom:0;
	right:0
}
.wrapper-cross .arrow {
	display:block;
	margin-top:5px
}
.wrapper-cross .arrow-pre {
	background-position:0 0
}
.wrapper-cross .arrow-next {
	background-position:-30px 0
}
.wrapper-cross .active {
	width:607px
}
.wrapper-cross .active .img {
	left:249px;
	filter:grayscale(0)
}
.wrapper-cross .active .cross-mask {
	display:none
}
.wrapper-cross .active .cross-text {
	display:block
}
.wrapper-cross .qrcode-bar {
	position:absolute;
	top:0;
	right:49px;
	width:106px;
	text-align:center
}
.wrapper-cross .qrcode {
	width:98px;
	height:98px;
	border-radius:4px;
	display:inline-block
}
.wrapper-cross .qr-text {
	font-size:12px;
	line-height:2
}
.wrapper-5 .cross-title {
	font-size:30px;
	line-height:36px;
	margin-top:70px;
	padding-bottom:25px;
	width:135px;
	border-bottom:1px solid #2f374a;
	font-weight:700
}
.wrapper-5 .line {
	width:20px;
	height:3px;
	display:block;
	background:#fff;
	border-radius:1.5px;
	margin-bottom:14px
}
.wrapper-5 .cp {
	font-size:14px;
	margin-top:30px;
	line-height:1
}
.wrapper-5 .mask-title {
	font-size:30px;
	line-height:36px;
	margin:70px 0 0 40px;
	font-weight:700
}
.wrapper-5 .mask-bottom {
	padding-left:40px
}
.wrapper-5 .cross-mask .line {
	margin-top:315px
}
.wrapper-5 .cross-mask .cp {
	margin-top:0
}
.wrapper-6 .cross-bar {
	margin-top:34px
}
.wrapper-6 .logo-bar {
	text-align:center;
	position:relative;
	margin-top:116px
}
.wrapper-6 .logo-bar:after {
	content:'';
	width:1px;
	height:76px;
	background:#2f374a;
	position:absolute;
	top:0;
	left:50%
}
.wrapper-6 .cross-text {
	padding:0;
	width:249px
}
.wrapper-6 .cp {
	font-size:18px;
	margin-top:20px;
	line-height:1;
	text-align:center
}
.wrapper-6 .logo {
	width:76px;
	height:76px;
	display:inline-block;
	margin:0 10px;
	opacity:.5
}
.wrapper-6 .cross-mask {
	padding-left:40px
}
.wrapper-6 .cross-mask .cp {
	text-align:left;
	margin:456px 0 5px 0
}
.wrapper-1 .title {
	
}
.active-1 .dot:nth-child(1):after {
	opacity:1;
	animation:scaleInDot .3s ease-in-out;
	background:transparent
}
.wrapper-2 .title {
	background-image:url(../images/title_2.png)
}

.wrapper-2 .title .title_search{
	width:800px;
	height:32px;
	padding:45px 0 0 250px;
	z-index:1000;
	font-size:19px;
	font-family:'微软雅黑';
}

.wrapper-2 .title .title_search p{
	width:100px;
	height:34px;
	border:1px solid #FFF;
	border-radius:5px;
	float:left;
	margin-right:20px;
	text-align:center;
	line-height:175%;
	color:#fff;
    cursor: pointer;
}

.wrapper-2 .title .title_search p:hover{
	background:#FFF;
	color:#8673B3;
}

.wrapper-2 .title .title_search .on{
	background:#FFF;
	color:#8673B3;
	}


.active-2 .dot:nth-child(2):after {
	opacity:1;
	animation:scaleInDot .3s ease-in-out;
	background:transparent
}
.wrapper-3 .title {
	background-image:url(../images/title_3.png)
}
.active-3 .dot:nth-child(3):after {
	opacity:1;
	animation:scaleInDot .3s ease-in-out;
	background:transparent
}
.wrapper-4 .title {
	background-image:url(../images/title_4.png)
}
.active-4 .dot:nth-child(4):after {
	opacity:1;
	animation:scaleInDot .3s ease-in-out;
	background:transparent
}
.wrapper-5 .title {
	background-image:url(../images/title_5.png)
}
.active-5 .dot:nth-child(5):after {
	opacity:1;
	animation:scaleInDot .3s ease-in-out;
	background:transparent
}
.wrapper-6 .title {
	background-image:url(../images/title_6.png)
}
.active-6 .dot:nth-child(6):after {
	opacity:1;
	animation:scaleInDot .3s ease-in-out;
	background:transparent
}
@media (max-width:1900px) {
	.wrapper-2 .text-bar {
	width:1333px
}
.dot-bar {
	right:20px
}
}@media (max-width:1600px) {
	.wrapper-3 .text-bar {
	width:1270px
}
.wrapper-3 .qrcode-bar {
	margin-top:45px
}
.wrapper-3 .btn {
	margin-top:37px
}
.wrapper-4 .text-bar {
	width:1270px
}
.wrapper-4 .right-content {
	padding:100px 246px 0 129px
}
.wrapper-4 .pan {
	display:none
}
.wrapper-4 .qrcode-bar {
	right:90px
}
.wrapper-cross .text-bar {
	width:1216px
}
.wrapper-cross .cross-bar {
	width:1167px
}
}@media (max-width:1440px) {
	.wrapper-2 .text-bar {
	width:1014px
}
}@media (max-height:920px) {
	.wrapper .text-bar {
	transform:translate(0,-50%) scale(0.75)
}
}@keyframes slideUp {
	0% {
	opacity:0;
	transform:translateY(20%)
}
100% {
	opacity:1;
	transform:translateY(0)
}
}@keyframes slideLeft {
	0% {
	opacity:0;
	transform:translateX(20%)
}
100% {
	opacity:1;
	transform:translateX(0)
}
}@keyframes slideUpMar {
	0% {
	opacity:0;
	margin-top:5%
}
100% {
	opacity:1;
	margin-top:0
}
}@keyframes scaleIn {
	0% {
	transform:scale(1.05) translate(-50%,-50%)
}
100% {
	transform:scale(1) translate(-50%,-50%)
}
}@keyframes scaleOpacity {
	0% {
	opacity:0;
	transform:scale(1.05)
}
100% {
	opacity:1;
	transform:scale(1)
}
}@keyframes opacity {
	0% {
	opacity:0
}
100% {
	opacity:1
}
}@keyframes rotate {
	0% {
	transform:rotate(0deg)
}
100% {
	transform:rotate(360deg)
}
}@keyframes scaleInDot {
	0% {
	transform:scale(1)
}
100% {
	transform:scale(3)
}
}