@charset "utf-8";
/* CSS Document */
html { font-size:16px;}
body{background-size: cover!important;color:#202020;height:100%;width:100%;}
body,input,select,textarea { font-size:20px; font-size:1.25rem; vertical-align:middle; }
.holded { color:#7273a2; }

img { border:0; max-width:100%; }
body,div, ul, ol, li, dl, dt, dd, a, img, form, p,span { margin:0; padding:0; border:0px; }
h1, h2, h3, h4, h5, h6{ margin:0; padding:0; border:0px;color:#202020;}

input,select{ outline:none; }
a:link,a:visited{ color:#f4cb6a; text-decoration:none; }
a:hover{ color:#fcdb56; text-decoration:underline;}
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
.hidden{opacity: 0;}

/*去除手机端按钮默认样式*/
input{
	-webkit-appearance: none;
	outline: none;
}
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 10 00px white inset;
}
/*去除 select 背景*/
select::-ms-expand {
	display: none;
}
select {
	border: none;
	outline: none;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
}


/* layout */
.column_content{ position: relative;width:100%;}

/*#body_background_box:after { display:block; content:""; position:absolute; bottom:0; left:0; right:0; height:200px; background:url(../images/footer_bg.png) repeat-x bottom; z-index:5;opacity: 0.45;
filter: alpha(opacity=45); }*/
#wrapper { width:100%; }
#header {position: relative;  margin:0 auto; padding:0;width: 100%; text-align: center; margin:0 auto 0;    display: flex;box-sizing: border-box;padding:8px 5%;justify-content: space-between;
 align-items: center;-webkit-animation: fadeInDown 0.5s both;  animation: fadeInDown 0.5s both;z-index: 9;}
#header_logo {text-align: center; max-width:246px; }
#header_logo img{ max-width: 250px; }
.main{position: relative;}
.signin { font-size:14px; margin: 0; text-align: right;letter-spacing: 0.8px;color: #eee; }
.reg_wrap{margin-top:40px;}
.reg_text{margin-bottom: 40px;text-align: center;}
.reg_text h1{ text-align: center;font-size: 05px;font-size: 2rem; font-family: 'Open Sans';font-weight: 600;color: #7273a2;}
.reg_text span{ color:#ff3172; font-weight: 600;}
.reg_text_m{display: none;}
.reg_text img{ margin:0 auto;}
.tip-text{width: 100%;text-align: left; margin-top: 40px;padding-left: 30px;}
.tip-text ul li{padding: 8px 0; text-align: left; color: #7273a2;font-size: 16px;font-size: 1rem; font-weight: 300; line-height: 1;  list-style: none;}
.tip-text ul li img{ display: inline-block;vertical-align: middle;padding-right: 12px;box-shadow: none; }
.tip-text ul li strong{ font-weight: 600;}
.question{margin:20px auto;text-align: center;max-width: 720px; }
.ques-title{font-size: 36px;font-weight: 600;    transition: all 0.75s ease 0s;-webkit-animation: fadeInDown 0.75s both;  animation: fadeInDown 0.5s both; animation-delay: 0.2s;}
.step_1 .ques_text{color:#BFC0E6; -webkit-animation: fadeInDown 0.5s both;  animation: fadeInDown 0.5s both;animation-delay: 0.3s;}

.ques_text{font-size: 24px;line-height: 1.4; font-weight: 400;color:#FDF3E5;padding:18px 0 0px;}
.ques_text.strong{font-size:32px;font-size: 2rem /* 36/16 */;}
.btn_box{
	-webkit-animation: fadeInDown 0.s both;  animation: fadeInDown 0.35s both;
	text-align: center;
	margin:30px auto 10px;
}
.btn_box .female:link{background: #ffaa96;}
.step_1 .btn_box{
	animation-delay: 0.35s;
}
.btn_box.btn-double a.btn:first-child{
	margin-bottom:25px;
}
.btn_box.btn-double a.btn:nth-child(2){
	/* opacity: 0.6; */
}

a.btn,.btn,.btn:link{
	position: relative;
	max-width: 320px;
	height: 56px;
	display:block;
	text-align: center;
	color:#fff;
	text-decoration: unset;
	font-size:18px;
	font-size: 1.125rem /* 24/16 */;
	margin:0 auto;
	z-index: 39;
	font-weight: 400;
	line-height: 56px;
	background: #6449ff;
	border-radius: 10px;
  	transition: all 0.25s ease-in-out;
}
.btn:hover{
	transform: scale(1.03);
}
.btn-multi a.btn:link,.btn-multi a.btn{
	width:30%;margin:12px 12px 20px;max-width: 200px;
	background: none; border:2px solid #FF7250;
	box-sizing: border-box;
	display: inline-block;
	height: 56px;
	line-height: 56px;
	font-weight: 400;
}
.btn-multi a.btn:hover{
	background: #FF7250;
}

#regForm{width:100%;}
.terms_privacy {margin: 0 auto;width: 100%;max-width: 320px; color:#999; font-size:14px;line-height:1.4em;  font-weight: 400; text-align: center;}
#footer {width: 100%;margin:20px auto 10px;position: fixed;bottom:2px;left:0;right:0;
    }
.footer_text {width:100%; font-size:12px; position:relative; margin:0 auto; text-align:center;color: #eee;  }
.security_mark { float:left; padding:0; }
.security_mark a { display:inline-block; font-size:0; margin:0 2px; text-decoration:none; border:1px solid #ccc; border-radius:4px; }
.security_mark a img { height: 36px; border-radius: 4px;}


/* TabbedPanels */
.TabbedPanels { margin: 0px; padding: 0; }
.TabbedPanelsTabGroup { margin: 0px; padding: 0; text-align: center; position: relative; z-index: 3; *padding-left: 60px; *display: block; *width: 100%; *height: auto; }
.TabbedPanelsTab { display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; -moz-user-select: none; -khtml-user-select: none; cursor: default; margin: -30px 4px 0px 4px; font-size: 24px;  background-color: #ffe4ae; *float: left; }
.TabbedPanelsTabSelected { background-color: #ffb92e;  }
.TabbedContent { color: #333; font-size: 14px; background-position: center top; background-repeat: no-repeat; margin-top: 0px; }
.TabbedPanelsContent { position: relative;; padding: 0; }
.reg_area{position: relative;}
.reg_mask{ width: 100%; height: 100%; position: absolute;top: 0;left: 0;}



/* form */
#regForm { width: 100%; margin: 0 auto; border-radius: 30px;}
#regForm .form-item { margin: 10px auto; }
#regForm .form-label { font-size: 30px; font-size: 1.875rem;font-weight: 500;  width: 100%; padding-bottom: 12px; text-align: center;margin-top:24px; }
#regForm .form-con {width: 100%; margin-top:14px; max-width: 340px;margin:18px auto 0; position: relative;  position: relative; border-radius: 34px;background:#fff;}
.input-group { width: 100%; height: 64px; line-height:60px; box-sizing: border-box; border: 2px solid #121212; border-radius: 30px; height: 100%; font-size: 1.125rem; background: none; position: relative; height: 100%; overflow: hidden; height: 64px; }
.input-group .input_test { font-size: 14px; font-size: 1.125rem;  height: 100%; height: 60px; width: 100%; background: none;  text-align: center;}
.input_test { padding-left: 5px; border: 0; position: relative; }
#passwd1{z-index: 3;position: relative;}
.select-wrapper { width: 100%; position: relative; overflow: hidden;  height: 100%;  box-sizing: border-box;border: 2px solid #121212; border-radius: 35px; line-height: 1; }
.select-wrapper:after { display: block; content: ""; position: absolute; width: 10px; height: 5px; right: 4px; top: 40%; }
.select-wrapper select { font-size: 16px; font-size: 1.125rem; float: left; width: 100%; margin-top: 0px; text-indent: 4px; height: 64px;  line-height:60px; padding-left: 5px; border: none; background: url(../images/icon_arrow.png) no-repeat 96% center; *background: url(../images/icon_arrow.png) no-repeat 100% center; color:#222;}
.select-wrapper select option { font-size: 13px; }
.input-group .input_test, .input-group .select-wrapper { float: left; border: none; line-height:60px; }
.input-group .select-wrapper { width: 33%; height: 64px; height: 100%; }
.input-group .select-wrapper select { width: 100%; }
.input_desc { font-size: 12px; line-height: 1.8em; text-align: right; color: #888; display: none; }
.button_box { padding-top:20px; }
 #regForm .submit-button{
	margin:0 auto; max-width: 400px; display: block; width: 80%; border:none;cursor: pointer;
	font-size: 1.5rem; 
	font-weight: 600 ;
} 
.terms_privacy { color: #666; font-size:13px;  margin-top: 12px;  text-align: center;}
.terms_privacy a{ color:#1caf46;text-decoration: underline;}
.term_privacy a:hover{ color:#b91860;}
.popup-container, .intsva{}
/* intsva */
.intsva { position: absolute; z-index: 98; line-height: 1em; height: auto; font-size: 11px; /*font-size:0.7rem;*/ margin-top: -29px; padding: 4px 6px; padding: 0.25rem 6px; background-color: #19970d; border: 1px solid #19970d; border-radius: 0.2rem; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);color:#fff;/*white-space: nowrap;*/ }
.intsva .arrow { display: block; content: ""; position: absolute; margin-left: 10px; bottom: -6px; width: 0px; height: 0px; border-color: transparent; border-style: solid; border-width: 6px 6px 0 6px; border-top-color: #19970d; left: 0; /* use for arrow bgColor */ }
.intsva .arrow:after { display: block; content: ""; position: absolute; margin-top: -5px; margin-left: -6px; width: 0px; height: 0px; z-index: -1; border-color: transparent; border-style: solid; border-width: 6px 6px 0 6px; border-top-color: #19970d;/* use for arrow border */ }
.error-tips { line-height: 2em; color: #CE4844; }
.error-tips.block { margin: 6px 0 10px; padding: 5px 10px; margin: 0.375rem 0 0.625rem; padding: 0.375rem 0.625rem; border: 1px solid #f3c6cc; background: #ffedef; border-radius: 0.2rem; }
.error-tips.block h1 { font-size: 14px; margin-bottom: 0.2em; }
.error-tips.block p { line-height: 1.2em; margin-bottom: 0.4em; }
/*for ie*/
.ie9 .select-wrapper select { margin-top: 10px; height: 1.5rem; width: 98%; }
.ie8 .select-wrapper select { margin-top: 10px; height: 20px; width: 98%; border: none; background: url(../images/icon_arrow.png) no-repeat 100% center; }
/* 如果没有定义这个，有可能在加载时一瞬间显示弹层 */
.popup-container { display: none; }


.TabbedPanelsContent.animated {
	-webkit-animation-duration: 0.65s;
	animation-duration: 0.65s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
  }


/* step  */

/* Responsive */
@media (max-width:1200px) {/* 宽屏布局 */

}
@media (max-height:812px) {/* 宽屏布局 */
	.reg_wrap{margin-top:0;}
	.display-wrapper{padding-bottom:10px;}
}

@media (max-width:767px) {
	html { font-size:16px; }
	.reg_wrap{display: flex;justify-content: center;align-items: center;}
	#header{margin-top:0;position: relative;}
	#footer{position: relative;}

}

@media (max-width:600px){
	html{font-size: 15px;}
	#header{padding:8px 2.5% 0;}
	#header_logo img{ max-width: 140px; }
	.ques-title{font-size:8vw;}
	.ques_text {font-size: 5vw;padding: 10px 15px 0;}
	.notice-title{display: none;}
	#regForm{width: 100%;}
	.form-item {max-width: 420px; }
	#regForm .form-con{max-width: 320px;}
}
@media (max-width:576px) {
    .display-wrapper{background: none;padding-top:0px;}
    .reg_wrap{padding:40px 0 0;}
    .btn-multi a.btn:link, .btn-multi a.btn{
        width: 80%;
        margin: 12px 6px 18px;
        max-width: 240px;
        background: none;
        border: 2px solid #FF7250;
        box-sizing: border-box;
        display: inline-block;
        height: 48px;
        line-height: 46px;
		font-weight: 400;
	}
	a.btn, .btn, .btn:link{max-width: 85%;}
	.form-item{margin:25px auto; }
}
@media (max-width:420px){
	.signin i{display: none;}
}
@media (max-width:350px) {
	html { font-size:14px; }
	#header_logo img{ max-width: 120px; }

}
@media (min-width:450px) and (max-width:750px) and (orientation:landscape){

}

/* animations */
@-webkit-keyframes shining{
	0%{ box-shadow:0 0 4px rgba(239,157,15,0.4); }
	100%{ box-shadow:0 0 8px rgba(239,157,15,0.7); }
}
@keyframes shining{
	0%{ box-shadow:0 0 4px rgba(239,157,15,0.4); }
	100%{ box-shadow:0 0 8px rgba(239,157,15,0.7); }
}

.animated{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}

@-webkit-keyframes fadeInDown{
	0%{opacity:0;-webkit-transform:translate3d(0,-8%,0);transform:translate3d(0,-8%,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
	}
	@keyframes fadeInDown{
	0%{opacity:0;-webkit-transform:translate3d(0,-8%,0);transform:translate3d(0,-8%,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
	}
	.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}

	@keyframes bounce-down-2 {
		25% {
			transform: translate(10px,-12px);
		}
		50%, 100% {
			transform: translate(0px,0);
		}
		75% {
			transform: translate(-10px,12px);
		}
	}
	
	@-webkit-keyframes bounce-down-2 {
		25% {
			-webkit-transform:translate(10px,-12px);
		}
		50%, 100% {
			-webkit-transform: translate(0px,0);
		}
		75% {
			-webkit-transform: translate(-10px,12px);
		}
	}
	@-ms-keyframes bounce-down-2 {
		25% {
			-ms-transform:translate(10px,-12px);
		}
		50%, 100% {
			-ms-transform: translate(0px,0);
		}
		75% {
			-ms-transform: translate(-10px,12px);
		}
	}
	
	@keyframes waggle {
		25% {
			transform: translate(-8px,8px) rotate(-5deg);
		}
		50%, 100% {
			transform: translate(0px,0) rotate(0deg);
		}
		75% {
			transform: translate(8px,-8px) rotate(5deg);
		}
	}
	
	@-webkit-keyframes waggle {
		25% {
			-webkit-transform:translate(-8px,8px) rotate(-5deg);
		}
		50%, 100% {
			-webkit-transform: translate(0px,0) rotate(0deg);
		}
		75% {
			-webkit-transform:translate(8px,-8px) rotate(5deg);
		}
	}
	@-ms-keyframes waggle {
		25% {
			-ms-transform:translate(-8px,8px) rotate(-5deg);
		}
		50%, 100% {
			-ms-transform: translate(0px,0) rotate(0deg);
		}
		75% {
			-ms-transform:translate(8px,-8px) rotate(5deg);
		}
	}
	
	
	@keyframes waggle-2 {
		25% {
			transform: translate(5px,-4px) rotate(1deg);
		}
		50%, 100% {
			transform: translate(0px,0) rotate(0deg);
		}
		75% {
			transform: translate(-5px,4px) rotate(-3deg);
		}
	}
	
	@-webkit-keyframes waggle-2 {
		25% {
			-webkit-transform:translate(5px,-4px) rotate(1deg);
		}
		50%, 100% {
			-webkit-transform: translate(0px,0) rotate(0deg);
		}
		75% {
			-webkit-transform:translate(-5px,4px) rotate(-3deg);
		}
	}
	
	
	@-ms-keyframes waggle-2 {
		25% {
			-ms-transform:translate(5px,-4px) rotate(1deg);
		}
		50%, 100% {
			-ms-transform: translate(0px,0) rotate(0deg);
		}
		75% {
			-ms-transform:translate(-5px,4px) rotate(-3deg);
		}
	}
	
	
	
	@-webkit-keyframes pulse {
	  from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	  }
	
	  50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	  }
	
	  to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	  }
	}
	@keyframes pulse {
	  from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	  }
	
	  50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	  }
	
	  to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	  }
	}
	.animate__pulse {
	  -webkit-animation-duration: 0.8s;
	  animation-duration: .8s;
	  -webkit-animation-name: pulse;
	  animation-name: pulse;
	  -webkit-animation-timing-function: ease-in-out;
	  animation-timing-function: ease-in-out;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  animation-iteration-count: infinite;
	}
	
	
	.fadeInUp {
	  -webkit-animation-name: fadeInUp;
	  animation-name: fadeInUp;
	}
	
	@-webkit-keyframes fadeInUp {
	  from {
		opacity: 0;
		transform: translate3d(0, 8%, 0);
	 }
	  to {
		opacity: 1;
		transform: none;
	 }
	}
	@keyframes fadeInUp {
	  from {
		opacity: 0;
		transform: translate3d(0, 8%, 0);
	 }
	  to {
		opacity: 1;
		transform: none;
	 }
	}
	
	@-webkit-keyframes fadeInDown {
	  from {
		opacity: 0;
		transform: translate3d(0, -12%, 0);
	 }
	  to {
		opacity: 1;
		transform: none;
	 }
	}
	@keyframes fadeInDown {
	  from {
		opacity: 0;
		transform: translate3d(0, -12%, 0);
	 }
	  to {
		opacity: 1;
		transform: none;
	 }
	}
	.fadeInDown {
	  -webkit-animation-name: fadeInDown;
	  animation-name: fadeInDown;
	}

	.fadeOutUp {
		-webkit-animation-name: fadeOutUp;
		animation-name: fadeOutUp;
	  }
	  
	  @-webkit-keyframes fadeOutUp {
		from {
		  opacity: 1;
		  transform: none;
	
	   }
		to {
		  opacity: 0;
		  transform: translate3d(0, -12%, 0);
	   }
	  }
	  @keyframes fadeOutUp {
		from {
			opacity: 1;
			transform: none;
		 }
		  to {
			opacity: 0;
			transform: translate3d(0, -12%, 0);
		 }
	  }

	  .fadeOutDown {
		-webkit-animation-name: fadeOutDown;
		animation-name: fadeOutDown;
	  }
	  
	  @-webkit-keyframes fadeOutDown {
		from {
		  opacity: 1;
		  transform: translate3d(0, -12%, 0);
	   }
		to {
			opacity: 0;
		  transform: none;
	   }
	  }
	  @keyframes fadeOutDown {
		from {
			opacity: 1;
			transform: translate3d(0, -12%, 0);
		 }
		  to {
			  opacity: 0;
			transform: none;
		 }
	  }