@charset "utf-8";
@font-face {
	font-family: 'open-sans';
	src: url('../fonts/open-sans.ttf');
}

body{
	background-color: #1E1739;
	font-family: 'open-sans';
	color: #fff;
}
div,p{
	font-size: 16px;
}
img{
	max-width: 100%;
}
ul,li{
	list-style: none;
	margin: 0;
	padding: 0;
}




.index-section{
	overflow:hidden;
	padding: 60px 0;
}
.gray-section{
	background-color: #fbfbfd;
}
.flex_bd{
	min-width: 0;
	flex: 1;
}

.navbar-default{
	margin: 0;
	padding: 15px 0;
	border: 0;
	background-color: transparent;
	transition: background-color 0.3s ease 0s;
}
.navbar-default .navbar-nav>li>a{
	position: relative;
	font-size: 16px;
	font-weight: bold;
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus{
	color: #ffffff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #E9AE3A;
    background-color: transparent;
}

.navbar-default .navbar-nav>.active>a::before{
	background-color: #E9AE3A;
	height: 2px;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
}
.sw-pagination{
	width: 100%;
	position: absolute;
	bottom: 20px;
	left: 0;
	z-index: 12;
	text-align: center;
}

@media (min-width:993px) {
	.team-cells{
		flex-direction: row-reverse;
	}
	.navbar-default .navbar-nav>li{
		margin-left: 20px;
	}
}

.index-banner{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: calc(100vh - 120px);
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
	border: 0;
}
.navbar-collapse{
	box-shadow:0 0 transparent
}
.navbar-default .navbar-toggle:hover {
    background-color: transparent;
	border-color: #f0ad4e;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #f0ad4e;
}
.navbar-default .navbar-toggle{
	border-color: #f0ad4e;
}
.navbar-default .navbar-toggle .icon-bar{
	background-color: #f0ad4e;
}
.index-banner{
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	text-align: center;
	flex-direction: column;
	justify-content: center;
	color: #fff;
}
.sw-grid{
	position: relative;
	z-index: 33;
	text-align: center;
	color: #fff;
}

.footer{
	position: relative;
	overflow: hidden;
	background-color: #312B4F;
	border:1px solid #1F20250D;
}
.foot-photo{
	position: absolute;right: 0;
	top: 0;
}
.foot-row{
	padding-top: 70px;
	padding-bottom: 70px;
}
.foot-end{
	padding-top: 40px;
	padding-bottom: 40px;
}
.text-light{
	color: #9792B2;
}
.share-link{
	display: flex;
	align-items: center;
}
.share-link li{
	padding: 0 10px;
}
.share-link li a{
	color: #fff;
}
.foot-nav h4{
	margin-top: 0;
	margin-bottom: 0;
}
.foot-nav li{
	margin-bottom: 12px;
}
.foot-nav li:first-child{
	margin-bottom: 30px;
}
.foot-nav li a{
	color: #9792B2;
}
.foot-end .flex_bd h5{
	font-size: 14px;
}
.foot-end .flex_bd p{
	font-size: 13px;
	color: #9792B2;
}
.download-section{
	padding: 40px 20px;
}
.download-main{
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	background-color: #312B4F;
	background-image: url(../images/splash.png)  ;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
	padding: 0 30px;
	height: 600px;
	border-radius: 10px;
}
.download-main div{
	position: relative;	
	z-index: 3;
}
.download-main .download-photo{
	height: 100%;
	display: flex;
	align-items: center;
}
.download-foot{
	display: flex;
	align-items: center;
	margin-top: 30px;
}
.download-foot .btn{
	height: 64px;
	padding: 0 30px;
	margin: 10px 8px;
}
.download-foot .btn .font_family{
	color: #205BF1;
	margin-right: 10px;
	font-size: 20px;
}
.download-main{
	max-width: 1350px;
	margin-left: auto;
	margin-right: auto;
}
.download-main .download-lg{
	font-size: 36px;
	margin-bottom: 25px;
	line-height: 1.22;
	max-width: 470px;
	font-weight: bold;
}
.download-main .download-sm{
	font-size: 12px;
}
.download-photo img{
	max-width: 580px;
}
.social-header{
	line-height: 1;
	margin-bottom: 30px;
}
.text-lg{
	font-size: 36px;
	font-weight: bold;
}
.text-md{
	font-weight: bold;
	font-size: 24px;
}
a.more-link{
	display: inline-flex;
	align-items: center;
	color: #E9AE3A;
}
.social-box .more-link{
	color: #E9AE3A;
}

.more-link .font_family{
	margin-left: 10px;
}
.social-box{
	display: block;
}
.social-photo{
	margin-bottom: 20px;
}
.attr-bar{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.attr-bar .tag{
	color: #B8B8B8;
	padding-left: 5px;
}
.social-box .title{
	margin-bottom: 20px;
	font-size: 20px;
	color: #fff;
	font-weight: bold;
}

.market-body .market-tag{
	margin-bottom: 25px;
}
.market-body .market-title{
	margin-bottom: 25px;
	line-height: 1.2;
}
.market-body p{
	margin-bottom: 25px;
}
.about-cell{
	padding: 40px 0;
}
.about-grid .about-sm{
	font-size: 13px;
	margin-bottom: 25px;
}
.about-grid .about-title{
	color: #FFB800;
	margin-bottom: 25px;
}
.about-grid .text-lg{
	line-height: 1.4;
}



.banner-main{
	padding: 80px 0;
}
.banner-grid{
	max-width: 570px;
}
.banner-grid .title{
	font-size: 48px;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 30px;
}
.banner-grid .title-sm{
	font-size: 20px;
	margin-bottom: 60px;
}
.banner-grid .title-md{
	font-size: 30px;
	margin-bottom: 30px;
}



.banner-button .font_family{
	color: #205BF1;
	margin-right: 10px;
}
.navbar-logo{
	display: flex;
	align-items: center;
	width: 80px;
	height: 80px;
}
.navbar-logo img{
	max-width: 100%;
	max-height: 100%;
}

.navbar-default.active{
	background-color: rgba(30, 23, 57, .9);
}
.banner-container{
	position: relative;
}
.support-title{
	font-size: 20px;
	margin-bottom: 30px;
}
.banner-container{
	background-image: url(../images/bannerbg.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 500px 470px;
}
.banner-photo{
	position: relative;
	height: 600px;
}
.banner-photo img{
	position: absolute;
	transition: .4s all;
}
.img-a{
	top: 0;
	left: -100px;
	max-width: 375px;
	animation: float-a 3s ease-in-out infinite;
}
.img-b{
	top: 100px;
	left: 30px;
	max-width: 510px;
	animation: float-b 2s ease-in-out infinite;
}
.img-c{
	top: 240px;
	left: -80px;
	max-width: 380px;
	animation: float-c 4s ease-in-out infinite;
}
.img-d{
	top: 380px;
	left: 120px;
	max-width: 206px;
	 animation: float-d 5s ease-in-out infinite;
}
.gua-header{
	margin-bottom: 40px;
}
.gua-header .text-lg{
	font-weight: bold;
	line-height: 1.2;
}
.gua-header .gua-sm{
	margin-bottom: 10px;
	font-size: 12px;
}
.gua-list li{
	padding-left: 30px;
	margin-bottom: 30px;
	border-left: 2px solid rgba(255, 255, 255, .1);
}
.gua-list li .gua-title{
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: bold;
}
.gua-list li a{
	padding: 15px 0;
	display: block;
	color: #ffffff;
}
.gua-list li .gua-desc{
	font-weight: normal;
	opacity: .7;
}
.gua-list li.active{
	background-color: #251D45;
	border-left: 2px solid #e9ae3a;
}
.about{
	background-image: url(../images/left-bg.jpg);
	background-position: left 50%;
	background-repeat: no-repeat;
}

@keyframes float-a {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes float-b {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

@keyframes float-c {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes float-d {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
}
.lang-bar span{
	display: inline-block;
}
.lang-bar{
	display: flex!important;
	align-items: center!important;
	line-height: 1;
	padding: 15px;
}
.lang-bar .line{
	width: 1px;
	height: 20px;
	margin: 0 20px;
	background-color: rgba(255, 255, 255, .1);
}
.lang-bar .btn{
	font-size: 16px;
}
.lang-bar .icon-language{
	font-size: 20px;
}
.lang-bar  a{
	color: #fff;
}

.support-photo img{
	border-radius: 20px;
}
.download-main .flex_bd{
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 4;
}

.support-row .support-photo{
	padding: 15px 0;
}
.curpoter{
	cursor: pointer;
}
.banner-inner-grid .title{
	font-size: 42px;
}

.dropdown-language li a{
	display: flex;
	align-items: center;
}
.dropdown-language li a img{
	width: 28px;
	height: 20px;
	margin-right: 10px;
}




@media (min-width:1025px) {
	
	.download-main{
		flex-direction: row-reverse;
	}
	.use-main{
		display: flex;
		align-items: center;
	}
	.use-main .use-photo{
		width: 50%;
		text-align: center;
	}
	.use-main .use-photo img{
		width: 430px;
	}
	.download-main{
		padding: 0 120px;
	}
	.about-photo img{
		max-width: 376px;
	}
	.img-a{
		top: 0;
		left: 0px;
	}
	.img-b{
		top: 100px;
		left: 100px;
	}
	.img-c{
		top: 240px;
		left:-100px;
	}
	.img-d{
		top: 380px;
		left: 320px;
		max-width: 356px;
	}
	.about{
		background-position: left 50%;
	}
	.gua-list{
		width: 470px;
		float: right;
	}
	.gua-main{
		display: flex;
		align-items: center;
	}
	.banner-container{
		background-position: right top;
		background-size: contain;
	}
	.banner-button .btn{
		width: 240px;
		height: 74px;
		margin-right: 20px;
	}
	.banner-grid .title{
		font-size: 78px;
		margin-bottom: 30px;
	}
	.banner-main{
		display: flex;
		flex-direction: row-reverse;
		padding: 240px 0 20px 0;
	}
	.banner-container .banner-photo{
		width: 670px;
		margin-right: -200px;
		margin-top: -100px;
	}
	.navbar-default{
		padding: 10px 0;
	}
	.navbar-nav{
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.about-cell{
		display: flex;
		align-items: center;
	}
	.about-content{
		font-size: 20px;
	}
	.about-grid{
		width: 660px;
	}
	.about-cell:nth-child(odd){
		flex-direction: row-reverse
	}
	.about-cell:nth-child(even) .about-grid{
		float: right;
	}
	.about-cell{
		padding: 70px 0;
	}
	.text-md{
		font-size: 36px;
	}
	.market-main{
		display: flex;
		flex-direction: row-reverse;
	}
	.market-body{
		min-width: 420px;
		flex: 1;
	}
	.market-photo{
		width: 670px;
		margin-left: 50px;
		margin-top: 50px;
	}
	.social-header{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	.social-box .title{
		font-size: 28px;
	}
	.social-header{
		margin-bottom: 60px;
	}
	.text-lg{
		font-size: 40px;
	}
	
	.download-main .download-lg{
		font-size: 46px;
	}
	.download-main .download-sm{
		font-size: 16px;
	}
	
	.download-foot .btn{
		
	}
	.download-foot{
		margin-top: 60px;
	}
	.download-main{
		height: 600px;
	}
	.download-section{
		padding: 70px 45px;
	}
	.foot-end{
		display: flex;
		align-items: flex-end;
	}
	.gua-photo{
		max-width: 480px;
	}
	.banner-inner-grid{
		max-width: 680px;
	}
	.banner-inner-grid .title{
		font-size: 70px;
	}
}
@media (max-width:1024px) {
	.download-foot{
		flex-wrap: wrap;
	}
	.banner-grid .title-md{
		font-size: 24px;
	}
	.index-section{
		padding: 30px 0;
		margin-bottom: 35px;
	}
	.market-photo{
		margin-bottom: 50px;
	}
	.lang-bar{
		padding: 15px 30px;
	}
	.navbar-button{
		padding: 15px 30px;
	}
	.navbar-nav>li>a{
		padding: 15px 30px;
	}
	.social-header .social-title{
		margin-bottom: 20px;
	}
	.foot-row{
		padding-bottom: 30px;
	}
	.banner-container{
		margin-bottom: 50px;
	}
	.about-photo{
		padding: 0 30px;
		margin-bottom: 40px;
	}
	.banner-button .btn{
		width: 220px;
		margin-bottom: 20px;
	}
	.gua-photo{
		margin-bottom: 40px;
	}
	.about{
		background-size: 200px 300px;
	}
	.download-foot .btn{
		margin-right: 0;
		margin-left: 0;
	}
	.navbar-collapse{
		background-color: rgba(30, 23, 57, .9);
	}
	.active .navbar-collapse{
		background-color: transparent;
	}
	.foot-photo{
		width: 100px;
	}
}


/* 内页 */
.index{
	overflow: hidden;
}
.banner-agent{
	padding: 140px 0;
}
.banner-agent .flex_bd{
	position: relative;
	z-index: 22;
}
.banner-iPhone{
	position: absolute;
	right: 0;
	max-width: 590px;
}
.agent-section{
	position: relative;
	z-index: 99;
	padding: 110px 0;
	background-color: #F0F1F7;
	border-radius: 32px;
}

.agent-data{
	margin-top: -200px;
	margin-bottom: 66px;
}
.data-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #E9AE3A;
	color: #fff;
	height: 210px;
	border-radius: 48px;
	text-align: center;
}

.data-container{
	margin-top: 70px;
}
.data-card{
	position: relative;
	border-radius: 32px;
	background-color: #fff;
	color: #000000;
	padding: 48px;
	overflow: hidden;
	box-shadow: 0 0 15px rgba(30, 23, 57, .1);
}
.first-photo{
	width: 100%;
	position: absolute;
	bottom: 0;
	text-align: center;
	left: 0;
}
.data-first{
	max-width: 480px;
	background-color: #312B4F;
	color: #ffffff;
	height: 470px;
}
.data-title{
	font-size: 24px;
	line-height: 1.2;
}
.data-sm-title{
	font-size: 14px;
	color: #3E3664;
	margin-top: 10px;
	line-height: 20px;
}
.data-lists .data-card{
	height: 220px;
}
.data-lists .data-card:first-child{
	margin-bottom: 30px;
}

.second-photo{
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 370px;
}

.data-row{
	margin-bottom: 30px;
}
.data-last{
	max-width: 480px;
}
.data-bottom{
	height: 344px;
}
.data-lists{
	flex: 1;
}

.third-photo{
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 510px;
}
.download-row{
	display: flex;
	align-items: center;
	margin-top: 60px;
}
.download-row li{
	margin-right: 10px;
}
.download-row .download-tag{
	background-color: #E6E5ED;
	color: #000000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 40px;
	border-radius: 8px;
}
.market-content{
	line-height: 1.8;
}
.ath-section{
	position: relative;
	padding-top: 200px;
	margin-top: -20px;
}
.ath-photo{
	position: absolute;
	left: 0;
	top: -400px;
}
.ath-section .container{
	position: relative;
	z-index: 99;
}









@media (min-width:1024px) {
	.data-first{
		margin-right: 30px;
	}
	.data-last{
		margin-left: 30px;
	}
	.data-row{
		display: flex;
	}
	.data-sm-title{
		font-size: 16px;
	}
	.banner-agent{
		padding: 200px 0;
	}
	.banner-iPhone{
		top: 100px;
	}
	.data-title{
		font-size: 32px;
	}
}
@media (min-width:1424px) {
	.banner-agent{
		padding-bottom: 300px;
	}
}
@media (max-width:750px) {
	.banner-iPhone{
		right: -120px;
		bottom: -260px;
	}
	.banner-iPhone img{
		width: 340px;
	}
	.data-box {
		border-radius: 30px;
		height: 160px;
	}
	.data-box .text-lg{
		font-size: 22px;
	}
	.text-label{
		font-size: 14px;
	}
	.about-grid .text-lg{
		line-height: 1.2;
	}
	.data-first{
		margin-bottom: 30px;
		height: 344px;
	}
	.data-last{
		margin-top: 30px;
	}
	.data-lists .data-card{
		height: 344px;
	}
	.download-photo{
		margin-bottom: 30px;
	}
	.download-photo img{
		max-width: 100%;
	}
	.download-main{
		padding: 40px;
		display: block;
		height: auto;
	}
	.download-foot .btn{
		width: 100%;
	}
	.agent-section{
		padding-bottom: 30px;
	}
}

/* how to use */
.signle-section{
	padding-top: 160px;
	padding-bottom: 120px;
}
.u-mb-32{
	margin-bottom: 32px;
}
.text-gray{
	color: #9792B2;
}
.text-xs{
	font-size: 14px;
}
.signle-content{
	font-size: 20px;
	line-height: 1.6;
}
.signle-grid{
	margin-bottom: 32px;
}
.signle-grid_title{
	font-size: 24px;
	margin-bottom: 10px;
	font-weight: bold;
}
.signle-grid .flex_bd{
	padding: 30px;
}

@media (max-width:750px) {
	.signle-grid .flex_bd{
		padding: 16px;
	}
	.signle-grid_title{
		font-size: 20px;
	}
	.signle-content{
		font-size: 16px;
	}
}
@media (min-width:1024px) {
	.social-title{
		font-size: 40px;
	}
	.how-photo{
		width: 430px;
	}
	.signle-grid_row{
		display: flex;
		align-items: center;
		min-height: 430px;
	}
	.use-main .market-body p{
		font-size: 20px;
	}
}

@media (min-width:1940px) {
	.container{
		width: 1440px;
	}
	.navbar-default .navbar-nav>li>a{
		font-size: 20px;
	}
	.navbar-default .navbar-nav>li{
		margin-left: 30px;
	}
	.download-main{
		max-width: 1440px;
	}
}



.video-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  z-index: 99999999999;
}
.video-box button {
  display: inline-block;
  padding: 0;
  border: 0 none;
  background: none;
  text-align: center;
  outline: none;
  cursor: pointer;
}
.video-box .video-button {
  display: inline-block;
  width: 36px;
  height: 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.video-box .video-button i {
  font-size: 56px;
}
.video-box .video-button.video-btn-volume i {
  font-size: 20px;
}
.video-box .video-button.video-tooltip-toggle i {
  font-size: 20px;
}
.video-box .video-video {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.video-box .video-video video {
  position: relative;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.video-box .video-container {
  width: 1100px;
  min-height: 650px;
  max-height: 90vh;
  background: #000000;
  overflow: hidden;
  opacity: 0;
}
.video-box .video-container.video-ready {
  opacity: 1;
}
.video-box.quanping .video-container {
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  left: 0;
  top: 0;
  transform: none;
}
.video-box.video-playing .video-div.video-hide-ui .video-ui {
  -webkit-transform: translateY(39px);
  -ms-transform: translateY(39px);
  transform: translateY(39px);
}
.video-box.heibian .video-container {
  padding: 40px 0;
}
.video-box.heibian .video-div.video-hide-ui .video-ui {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
.video-box.heibian.quanping .video-container {
  padding: 0;
}
.video-box.hideui .video-div .video-ui {
  -webkit-transform: translateY(39px);
  -ms-transform: translateY(39px);
  transform: translateY(39px);
}
.video-box .i {
  font-family: none;
  height: 100%;
  width: 100%;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}
.video-box .i:before,
.video-box i:after {
  display: none !important;
}
.video-box .i-voice-on {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2C10L2%2C20L5%2C20L13%2C25L13%2C5L5%2C10L5%2C10Z'%2F%3E%3Cpath%20d%3D'M18%2C10C%2022%2C12%2022%2C18%2018%2C20'%20%2F%3E%3Cpath%20d%3D'M22%2C6C%2028%2C10%2028%2C20%2022%2C24'%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-voice-off {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20%3E%3Cpath%20d%3D'M2%2C10L2%2C20L5%2C20L13%2C25L13%2C5L5%2C10L5%2C10Z'%2F%3E%3Cpath%20d%3D'M18%2C11L27%2C20'%20%2F%3E%3Cpath%20d%3D'M18%2C20L27%2C11'%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-bofang {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%3E%3Cg%20fill%3D'%23fff'%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2C7L10%2C23L24%2C15z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-zhanting {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%3E%3Cg%20fill%3D'%23fff'%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2C7L7%2C23L11%2C23L11%2C7z'%2F%3E%3Cpath%20d%3D'M20%2C7L20%2C23L24%2C23L24%2C7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-quanping {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20%3E%3Cpath%20d%3D'M6%2C10L6%2C6L10%2C6'%2F%3E%3Cpath%20d%3D'M6%2C21L6%2C25L10%2C25'%2F%3E%3Cpath%20d%3D'M20%2C6L24%2C6L24%2C10'%2F%3E%3Cpath%20d%3D'M20%2C25L24%2C25L24%2C21'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-suoxiao {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20%3E%3Cpath%20d%3D'M6%2C10L10%2C10L10%2C6'%2F%3E%3Cpath%20d%3D'M6%2C21L10%2C21L10%2C25'%2F%3E%3Cpath%20d%3D'M20%2C6L20%2C10L24%2C10'%2F%3E%3Cpath%20d%3D'M20%2C25L20%2C21L24%2C21'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: .9;
}
.video-div {
  background: #000;
  font-size: 0;
  letter-spacing: -1px;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.video-ui {
  position: absolute;
  width: 100%;
  height: 41px;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  bottom: 0;
  z-index: 6;
  letter-spacing: .25px;
  -webkit-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  -ms-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  -webkit-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}
.video-loading-pulse {
  position: absolute;
  width: 6px;
  height: 24px;
  top: 50%;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-animation: pulse 750ms infinite;
  animation: pulse 750ms infinite;
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
}
.video-loading-pulse:before,
.video-loading-pulse:after {
  content: '';
  position: absolute;
  display: block;
  height: 16px;
  width: 6px;
  background: rgba(255, 255, 255, 0.2);
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-animation: pulse 750ms infinite;
  animation: pulse 750ms infinite;
}
.video-loading-pulse:before {
  left: -12px;
}
.video-loading-pulse:after {
  left: 12px;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
@keyframes pulse {
  50% {
    background: white;
  }
}
.video-loading {
  opacity: 1;
  color: #2c97f6;
  font-size: 0;
  overflow: hidden;
  box-shadow: 0px 0px 0px 3600px #000;
  background: #000;
  width: 30px;
  height: 30px;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
.video-loading i {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: block;
  border: 0.25rem solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  -webkit-animation: adeg 1s infinite linear;
  -o-animation: adeg 1s infinite linear;
  -ms-animation: adeg 1s infinite linear;
  -moz-animation: adeg 1s infinite linear;
  animation: adeg 1s infinite linear;
}
.video-loading .i-loading:before {
  display: none;
  opacity: 0;
  visibility: hidden;
}
.video-loading.yihuanchun {
  opacity: 0;
}
@keyframes adeg {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.video-close {
  position: absolute;
  top: calc(52px + 2%);
  right: 5%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%3E%3Cg%20fill%3D'%23fff'%3E%3Cpath%20d%3D'M0%2C1L1%2C0L30%2C29L29%2C30z'%2F%3E%3Cpath%20d%3D'M29%2C0L29%2C0L30%2C1L1%2C30L0%2C29z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
}
.video-bofang.f-czspjuzhong {
  z-index: 2;
  font-size: 0;
}
.video-bofang.f-czspjuzhong i {
  display: block;
  border-radius: 50%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  width: 60px;
  height: 60px;
  cursor: pointer;
  line-height: 62px;
  font-size: 66px;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
  -ms-transition: transform 1s;
  -moz-transition: transform 1s;
  transition: transform 1s;
}
.video-hide {
  z-index: 0 !important;
}
.video-hide i {
  opacity: 0;
  -webkit-transform: scale(3);
  -o-transform: scale(3);
  -ms-transform: scale(3);
  -moz-transform: scale(3);
  transform: scale(3);
  will-change: transform, opacity;
  z-index: 0;
}
.video-progress {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 36px;
  height: 5px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 2;
}
.video-progress:hover .video-progress-hover,
.video-progress:hover .video-tooltip-time {
  opacity: 1;
}
.video-tooltip-time {
  width: 46px;
  position: absolute;
  height: 20px;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 8px;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.video-tooltip-time .video-tinytip-content {
  margin-left: -23px;
}
.video-tooltip-time .video-text {
  background: rgba(0, 0, 0, 0.5);
  padding: 2px;
  border-radius: 2px;
}
.video-tinytip .video-tooltip-content {
  display: inline-block;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  line-height: 20px;
  text-align: center;
}
.video-progress-padding {
  position: absolute;
  width: 100%;
  height: 16px;
  bottom: 0;
  z-index: 40;
  cursor: pointer;
}
.video-progress-list {
  position: relative;
  top: -1px;
  z-index: 39;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-transform: scaleY(0.6);
  -ms-transform: scaleY(0.6);
  transform: scaleY(0.6);
  transition: -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
}
.video-progress-play,
.video-progress-buffer,
.video-progress-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
}
.video-progress-buffer {
  z-index: 33;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.video-progress-hover {
  z-index: 34;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  -webkit-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
  -o-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
  transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
}
.video-progress-play {
  z-index: 35;
  background-color: #2c97f6;
}
.video-progress-handle {
  width: 13px;
  height: 13px;
  position: absolute;
  top: 50%;
  right: -6.5px;
  margin-top: -6.5px;
  border-radius: 50%;
  background-color: #2c97f6;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  transition: -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
}
.video-progress-padding:hover + .video-progress-list {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}
.video-progress-padding:hover + .video-progress-list .video-progress-handle {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.video-controls-buttons {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 36px;
  width: 100%;
  padding: 0 10px;
  z-index: 3;
}
.video-time-panel {
  font-size: 12px;
  color: #777;
  display: inline-block;
  vertical-align: top;
  height: 36px;
  padding: 0 5px;
  line-height: 36px;
  letter-spacing: .25px;
}
.video-time-panel-current {
  color: #DEDEDF;
}
.video-fullscreen {
  float: right;
}
.video-definition {
  float: right;
  width: 55px;
  height: 36px;
  position: relative;
}
.video-definition .video-button {
  width: 100%;
}
.video-definition .video-button span {
  background: #fff;
  color: #333;
  font-size: 14px;
  padding: 2px 5px;
}
.video-definition .video-tooltip-content {
  width: 80px;
  left: 50%;
  margin-left: -40px;
  display: none;
  background: rgba(0, 0, 0, 0.5);
}
.video-definition:hover .video-tooltip-content {
  position: absolute;
  bottom: 35px;
  color: #aaa;
  display: block;
  z-index: 6;
}
.video-menu .video-menu-item {
  display: block;
  width: 100%;
  line-height: 36px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  padding: 0 12px;
  cursor: pointer;
  position: relative;
  height: 38px;
  background: -webkit-linear-gradient(top, transparent 0, transparent 50%, rgba(255, 255, 255, 0.1) 50%) center bottom no-repeat;
  background-size: 80% 1px;
}
.video-menu .video-menu-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.video-menu .video-menu-item.video-active {
  color: #FF8F00;
}
.video-volume {
  float: right;
  position: relative;
}
.video-popup .video-popup-content {
  transform: scaleY(0);
  bottom: 41px;
  position: absolute;
}
.video-popup .video-popup-content:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.5);
}
.video-popup:hover .video-popup-content {
  -webkit-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -moz-transform: scaleY(1);
  transform: scaleY(1);
}
.video-volume-slider {
  left: 0;
  width: 36px;
  height: 100px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.8);
}
.video-tinytip-tiao {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-volume-range {
  position: absolute;
  left: 16px;
  top: 10px;
  width: 4px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.2);
}
.video-volume-range-current {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: #2c97f6;
}
.video-volume-handle {
  position: absolute;
  top: 0;
  left: -4px;
  width: 12px;
  height: 3px;
  background-color: #fff;
}
@media (max-width: 998px) {
  .video-box .video-container {
    width: 80vw;
    max-height: 80vh;
    min-height: 44.9vw;
  }
}
@media (max-width: 468px) {
  .video-box .video-container {
    width: 100vw;
    min-height: 54.9vw;
  }
  .video-loading i {
    font-size: 26px;
  }
  .video-definition {
    display: none;
  }
}
/*
 * 瑙嗛缁撳熬
 * */
.f-czspjuzhong {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}