a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-weight:400;-webkit-tap-highlight-color:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{margin: 0;padding: 0;}
@font-face{
     font-family: 'pingfang_sc'; 
     src: url('../../../fonts/pingfang_sc.eot');
     src:url('../../../fonts/pingfang_sc.woff') format('woff'),
         url('../../../fonts/pingfang_sc.ttf') format('truetype'),
         url('../../../fonts/pingfang_sc.svg') format('svg');
}
@font-face{
     font-family: 'DINALTERNATE22'; 
     src: url('../fonts/DINALTERNATE22.ttf');
     src:url('../fonts/DINALTERNATE22.woff') format('woff'),
         url('../fonts/DINALTERNATE22.woff2') format('woff2'),
         url('../fonts/DINALTERNATE22.ttf') format('truetype'),
         url('../fonts/DINALTERNATE22.svg') format('svg');
}

body{
	font-family: 'pingfang_sc';
	background: #117BFD;
	min-height: 100vh;
	padding-bottom: 40px;
}
a{
	text-decoration: none;
}
.header{
	position: relative;
	width: 90%;height: auto;
	padding-top: 24px;
	max-width: 1200px;
	margin: 0 auto;
	zoom: 1;
}
.header::after{
	content: "";
	display:block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.header .logo{
	display: block;
	margin-top: 2px;
	float: left;
}
.header .logo img{
	width: 100px;
}
.header .back{
	position: relative;
	z-index: 1;
	display: block;
	padding: 0 20px;
	min-width: 100px;
	height: 36px;
	float: right;
	border: 2px solid #FFFFFF;
	border-radius: 26px;
	font-size: 13px;
	color: #FFFFFF;
	line-height: 36px;
	text-align: center;
}
.desc{
	width: 96%;
	max-width: 780px;
	text-align: center;
	padding:80px 0 0;
	margin: 0 auto;
}
.desc img{
	width: 128px;
}
.desc h1{
	width: 100%;
	font-size: 44px;
	color: #FFFFFF;
	letter-spacing: 1.11px;
	margin-top: 35px;
}

.desc p{
	margin-top: 48px;
	width: 100%;
	font-size: 16px;
	color: #FFFFFF;
	letter-spacing: 0;
}
.main{
	width: 96%;
	max-width: 780px;
	margin: 48px auto 0;
	background: #FFFFFF;
	border-radius: 28px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.item-wrap{
	position: relative;
	width: 90%;
	margin:0 auto;
	padding: 37px 0;
	text-align: center;
}

.item-wrap .item{
	display: inline-block;
	width: 33%;
	height: 80px;
	border-width: 2px;
	text-align: center;
	border: 2px solid #117BFD;
	cursor: pointer;
}
.item-wrap .item.pl{
	float: left;
	margin-left: -10px;
	border-radius:20px 0 0 20px ;
}
.item-wrap .item.pc{

}
.item-wrap .item.pr{
	float: right;
	margin-right: -10px;
	border-radius:0 20px 20px 0 ;
}
.item-wrap p{
	padding: 14px 0 0 6px;
	font-size: 16px;
	color: inherit;
}
.item-wrap span{
	display: block;
	width: 100%;
	font-size: 22px;
	color: inherit;
}

.item-wrap .item.ed{
	border-color: #CCCCCC;
	color: #BBBBBB;
}
.item-wrap .item.ing,
.item-wrap .item.will{
	color: #117BFD;;
	border-color: #117BFD;
}
.item-wrap .item.active {
	border-color: #117BFD;
	background-color: #117BFD;
	color: #FFFFFF;
}
.item-wrap .item .e,
.item-wrap .item .i,
.item-wrap .item .w{display: none;}
.item-wrap .item.ed .e{display: block;}
.item-wrap .item.ing .i{display: block;}
.item-wrap .item.will .w{display: block;}

.state-wrap{
	width: 100%;
	text-align: center;
	padding-top: 10px;
}
.state-wrap .title-lg{
	position: relative;
	width: 100%;height: 42px;
	line-height: 42px;
	font-size: 30px;
	color: #333333;
	font-weight: bold;
	margin-bottom: 37px;
}

.state-wrap .title-lg::after{
	position: absolute;
	left: 50%;bottom: -15px;
	margin-left: -22px;
	content: "";
	width: 44px;height: 4px;
	border-radius: 20px;
	background-color: #117BFD;
}
.state-wrap h6{
	width: 100%;
	height: 84px;
	font-size: 72px;
	color: #117BFD;
	line-height: 84px;
	font-weight: bold;
	padding-bottom: 4px;
	font-family: 'DINALTERNATE2';
}
.state-wrap span{
	font-size: 14px;
	color: #117BFD;
}
.state-wrap .applyBtn{
	display: block;
	width: 195px;height: 55px;
	margin: 35px auto 0;
	text-align: center;
	line-height: 55px;
	background: #117BFD;
	border-radius: 45px;
	font-size: 18px;
	color: #FFFFFF;
}
.state-wrap .applyBtn.disable{
	background-color: #CCCCCC;
}
.main>p{
	width: 100%;
	padding: 32px 0 48px;
	text-align: center;
	font-size: 14px;
	color: #666666;
}
.main>p a{
	text-decoration: underline;
	color:#117BFD;
}
.down-wrap{
	width: 90%;
	margin: 0 auto;
	max-width: 380px;
	padding: 67px 0;
}
.down-wrap .title-lg{
	position: relative;
	width: 100%;
	height: 42px;
	text-align: center;
	line-height: 42px;
	text-align: center;
	font-size: 30px;
	color: #FFFFFF;
}
.down-wrap .title-lg::after{
	content: "";
	width: 44px;height: 4px;
	background-color: #FFFFFF;
	position: absolute;
	left: 50%;
	bottom: -15px;
	margin-left: -22px;
	border-radius: 20px;
}
.code-wrap{
	position: relative;
	width: 100%;
	height: 150px;
	margin-top: 60px;
}
.code-wrap .links{
	height: 100%;
	position: absolute;
	left: 0;top: 0;
}
.code-wrap .links a{
	display: block;
	width: 197px;
	height: 64px;
	position: absolute;
	left: 0;
	border-radius: 10px;
}
.code-wrap .links img{width: 100%;}
.code-wrap .links a:nth-child(1){
	top: 0;
}
.code-wrap .links a:nth-child(2){
	bottom: 0;
}
.code{
	position: absolute;
	right: 0;top: 0;
	width: 140px;
	height: 140px;
	border-radius: 20px;
	background-color: #FFFFFF;
	border-radius: 4px;
	overflow: hidden;
	border: 5px solid #FFFFFF;
}
.code img{width: 100%;}




.popup{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;top: 0;
	z-index: 999;
	background-color: rgba(0,0,0,0.4);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.popup-inner{
	width: 96%;
	max-width: 440px;
	height: auto;
	padding-bottom: 35px;
	position: absolute;
	left: 50%;top: 50%;
	-webkit-transform: translate(-50%,-51%);
	transform: translate(-50%,-51%);
	background-color: #FFFFFF;
	border-radius: 20px;
	
}
.popup-main{
	width: 96%;
	max-width: 300px;
	margin: 0 auto;
}

.popup .title{
	position: relative;
	width: 100%;
	height: auto;
	padding:35px 0;
	text-align: center;
	font-size: 30px;
	color: #111111;
	font-weight: bold;
}
.popup .title i{
	display: block;
	width: 40px;height: 40px;
	position: absolute;
	right: 24px;top: 35px;
	background-image: url(../img/close.png);
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}
.popup .btn{
	display: block;
	width: 195px;height: 55px;
	background: #117BFD;
	border-radius: 45px;
	margin: 35px auto 0;
	font-size: 18px;
	color: #FFFFFF;
	letter-spacing: 1px;
	line-height: 55px;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(17,123,253,0.4)
}
.btn.disable{
	background-color: #CCCCCC !important;
	box-shadow: 0 4px 8px 0 rgba(204,204,204,0.4)
}
.ipt-wrap{
	width: 100%;
	margin-bottom: 38px;
}
.ipt-wrap h6{
	width: 100%;
	font-size: 16px;
	color: #666666;
}
.ipt-wrap h6 span{
	vertical-align: bottom;
	font-size: 12px;
	color: #999999;
	padding-left: 10px;
}
.ipt-wrap div{
	position: relative;
	width: 100%;
	margin-top: 6px;
	font-size: 20px;
}
.ipt-wrap.drag div{
	margin-top: 0;
	font-size: 16px;
}
.ipt-wrap div input{
	width: 100%;
	height: 30px;
	padding: 10px 0;
	background: #F5F5F5;
	line-height: 30px;
	color: #333333;
	text-indent: 1em;
	border: 1px solid transparent;
	border-radius: 8px;
	outline: none;
	font-size: 16px;
}
.ipt-wrap.type2 div input{
	width: 64%;
}
.ipt-wrap div.error input{
	border-color: #FE3D3D;
}
.ipt-wrap div.ok input{
	border-color: #00D519;
}
.ipt-wrap div .tip{
	display: none;
	position: absolute;
	left: 0;bottom: -16px;
	font-size: 12px;
	color: #FF0000;
}
.ipt-wrap div.error .tip{
	display: block;
}
.ipt-wrap.type2 div input{
	width: 66%;
}
.ipt-wrap.type2 div a{
	position: absolute;
	right: 0;top: 0;
	width: 30%;
	height: 48px;
	border: 2px solid #117BFD;
	border-radius: 8px;
	line-height: 48px;
	text-align: center;
	font-size: 14px;
	color: #117BFD ;
}
.ipt-wrap.type2 div a.disable{
	border-color: #F5F5F5;
	color: #999999;
}

.popup.success h6{
	width: 100%;
	height: auto;
	text-align: center;
	padding: 10px 0;
	font-size: 28px;
	color: #111111;
	background-color: #F5F5F5;
	border-radius: 8px;
	font-weight: bold;
	font-family: 'DINALTERNATE2';
}
.popup.success span{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #999999;
	margin: 14px 0;
}
.popup.success h3{
	position: relative;
	width: 160px;
	height: 56px;
	margin: 0 auto 50px;
	text-align: center;
	line-height: 56px;
	font-size: 48px;
	color: #117BFD;
	letter-spacing: 2.67px;
	font-weight: bold;
	font-family: 'DINALTERNATE2';
}
.popup.success h3::after{
	content: "";
	display: block;
	width: 44px;height: 4px;
	border-radius: 20px;
	position: absolute;
	left: 50% ;bottom: -16px;
	margin-left: -22px;
	background-color: #117BFD;
}
.popup.success p{
	width: 90%;
	margin: 0 auto;
	font-size: 14px;
	line-height: 24px;
	color: #999999;
	text-align: center;
}
.popup.empty p{
	width: 100%;
	font-size: 14px;
	color: #333333;
	letter-spacing: 0.78px;
	line-height: 25px;
	text-align: center;
}
.popup.success h3,
.popup.success h6{
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
.tip-wrap{
	opacity: 0;
	position: fixed;
	left: 0;top: 0;
	width: 100%;
	z-index: 1000;
	background: #117BFD;
	padding: 18px 0;
	font-size: 20px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.tip-wrap.show{
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.tip-container{
	position: relative;
	z-index: 1001;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.tip-container p{
	padding: 0 50px 0 20px;
	color: #FFFFFF;
	vertical-align: text-top;
	line-height: 26px;
	text-align: center;
}
.tip-close{
	display: block;
	position: absolute;
	z-index: 1002;
	right: 20px;
	top: 22px;
}
.tip-close img{
	max-width: 16px;
}
.small-tip{
	position: fixed;
	left: 50%;top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: 1999;
	width: auto;
	height: auto;
	max-width: 160px;
	padding:14px 20px;
	border-radius: 8px;
	background-color: #FFFFFF;
	font-size: 14px;
	text-align: left;
	line-height: 20px;
	color: #333333;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.bold{
	font-weight: bold;
	color: #1e1e1e !important;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.slide-enter-active, .slide-leave-active {
  transition: all .5s ease-in-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.slide-enter, .slide-leave-to {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
@media only screen and (min-width: 100px) and (max-width: 480px) {
	.item-wrap span{font-size: 15px;}
	.item-wrap p{font-size: 13px;}
	.item-wrap .item{height: 66px;}
	.desc h1{font-size: 32px;}
	.item-wrap{padding: 18px 0;}
	.state-wrap h6{height: 80px;line-height: 70px;}
	.state-wrap .applyBtn{height: 45px;line-height: 45px}
	.main>p{padding: 32px 0 38px;}
	.down-wrap{padding: 40px 0;}
	.popup .title{padding: 22px 0;font-size: 26px;}
	.popup .title i{top: 22px;}
	.ipt-wrap div input{padding: 4px 0;}
	.ipt-wrap{margin-bottom: 32px;}
	.ipt-wrap.type2 div a{height: 36px;line-height: 36px;}
	.popup .btn{height: 45px;line-height: 45px;}
	.desc h1{max-width: 360px;margin: 32px auto 0;}
	.desc p{margin-top: 32px;}
	.code-wrap{height: 124px; margin: 60px auto 0;}
	.code{width: 114px;height: 114px;}
	.code-wrap .links a{width: 156px;height: 52px;}
	.code-wrap{max-width: 310px;}
}