@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Lato');
body {
	font-family: 'Lato', "?????", 'Microsoft JhengHei', sans-serif;
	font-size: 16px;
	line-height: 180%;
	color: #333333;
	padding: 0;
	margin: 0 auto;
	background-color: #505D99;
	text-align: left;
	vertical-align: bottom;
	min-width: 1000px;
}
#body_i {
	background-image: url("../images/new/bg01.jpg");
	background-position: center bottom;
	background-repeat: no-repeat;
}
#body_c {
	background-image: url("../images/new/bg02.jpg");
	background-position: center bottom;
	background-repeat: no-repeat;
}
table {
	margin: 0 auto;
}
img {
	border: 0;
}
a {
	color: #fff
}
a:hover {
	color: #fff
}
p {
	margin: 0;
}
.header {
	font-size: 13px;
	line-height: 16px;
	color: #FFFFFF;
	background-color: #333333;
}
.header a {
	font-size: 13px;
	line-height: 16px;
	color: #FFFFFF;
	text-decoration: none;
}
.header a:hover {
	color: #FFF000;
	text-decoration: underline;
}
.content {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
#footer {
	padding: 16px 0;
	font-size: 12px;
	text-align: center;
	color: #ffffff;
	line-height: 140%;
	background-color: #333;
}
#info {
	margin: 0 auto;
	padding: 0;
	background-image: url("../images/new/lamp.png");
	background-position: top;
	background-repeat: repeat-x;
	padding-bottom: 40px;
}
#kv {
	min-width: 1000px;
	height: 980px;
	text-align: center;
}
#video {
	min-width: 1000px;
	height: 644px;
	background-image: url("../images/blackboard.png");
	background-position: center center;
	background-repeat: no-repeat;
	text-align: center;
}
#title {
	padding-top: 100px;
	width: 754px;
    margin: 0 auto;
}
#go {
	width: 200px;
    position: relative;
	top: -140px;
    left: 420px;
    z-index: 1;
}
#video01 {
	position: absolute;
	top: 171px;
	left: 74px;
}
#video02 {
	position: absolute;
	top: 172px;
	left: 636px;
}
#video03 {
	position: absolute;
	top: 385px;
	left: 636px;
}
#challenge {
	margin: 0 auto;
	padding: 30px 0 40px 0;
	background-image: url("../images/new/lamp.png");
	background-position: top;
	background-repeat: repeat-x;
	padding-bottom: 40px;
}
#challengetitle {
	text-align: center;
	margin: 50px auto 30px;
}
#boardtop {
	height: 89px;
	background-image: url("../images/new/board_up.png");
	background-position: center center;
	background-repeat: no-repeat;
	margin-bottom: -1px;
}
#boardmiddle {
	background-image: url("../images/new/board_middle.png");
	background-position: center center;
	background-repeat: repeat-y;
}
#boardbottom {
	height: 52px;
	background-image: url("../images/new/board_bottom.png");
	background-position: center center;
	background-repeat: no-repeat;
}
#challengecontent {
	padding-bottom: 130px;
	width: 1000px;
	margin: 0 auto;
}
#step01 {
	min-width: 1000px;
	display: none;
}
#start {
	position: absolute;
	top: 435px;
	left: 766px;
}
#step02 {
	padding: 10px 100px;
}
#QATitle {
	margin-left: -25px;
	margin-bottom: 30px;
	text-align: center;
}
#QA {
	padding-left: 30px;
    padding-right: 30px;
	/* height: 600px;
	overflow-y: hidden; */
}
#QAInner{
	/* width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden !important; */
}
#gform {
	transition: all 100ms linear;
}
#lastForm{
	width: 60%;
	margin: 0 auto;
	padding: 180px 100px 10px 100px;
	height: 600px;
	overflow-y: hidden;
}
#lastFormInner{
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	padding:  0 20px;
	overflow-x: hidden !important;
}
#step03 {
	padding: 0 100px 10px 100px;
	display: none;
}
#couponTitle {
	text-align: center;
}
#couponList {
	margin: 50px auto;
}
.couponBtn {
	float: left;
	margin-right: 15px;
}
.coupon {
	width: 600px;
	height: 301px;
	background-image: url("../images/new/bgCoupon.jpg");
	background-position: center center;
	background-repeat: no-repeat;
}
.got {
	text-align: center;
    padding-top: 80px;
    font-size: 120%;
    letter-spacing: 3px;
}
.got > span {
	color: #E94A3C;
}
.got > span > b {
	font-size: 200%;
}
.got2 {
	text-align: center;
}
.got3 {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.couponCode {
	border: #000 1px solid;
	font-size: 150%;
}
.buy {
	width: 133px;
	float: left;
	margin-top: -50px;
    margin-left: 15px;
}
.coupon ol {
	margin: 5px 0 5px -20px;
    float: left;
    font-size: 90%;
    line-height: 150%;
}
#scoreToNext {
	width: 113px;
	height: 10px;
    position: relative;
    top: -90px;
    left: 510px;
    z-index: 1;
}
#score01 {
}
#score02 {
	min-width: 1000px;
	height: 644px;
	background-image: url("../images/score02.png");
	background-position: center center;
	background-repeat: no-repeat;
	display: none;
}
#score03 {
	min-width: 1000px;
	height: 644px;
	background-image: url("../images/score03.png");
	background-position: center center;
	background-repeat: no-repeat;
	display: none;
}
#step04 {
	min-width: 1000px;
	height: 644px;
	background-image: url("../images/keyin.png");
	background-position: center center;
	background-repeat: no-repeat;
	display: none;
}
#step05 {
	min-width: 1000px;
	height: 644px;
	background-image: url("../images/end.png");
	background-position: center center;
	background-repeat: no-repeat;
	display: none;
}
.scrollup {
	width: 60px;
	height: 60px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	text-indent: -9999px;
	background: url(../images/top.png) no-repeat;
	z-index: 9999;
}

  .radio {
	position: relative;
	cursor: pointer;
	line-height: 17.5px;
	font-size: 18px;
	margin: 15px;
  }
  .radio .label {
	position: relative;
	display: block;
	float: left;
	margin-right: 10px;
	width: 20px;
	height: 20px;
	border: 2px solid #c8ccd4;
	border-radius: 100%;
	-webkit-tap-highlight-color: transparent;
  }
  .radio .label:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background: #000;
	transform: scale(0);
	transition: all 0.2s ease;
	opacity: 0.08;
	pointer-events: none;
  }
  .radio:hover .label:after {
	transform: scale(3.6);
  }
  input[type="radio"]:checked + .label {
	border-color: #000;
  }
  input[type="radio"]:checked + .label:after {
	transform: scale(1);
	transition: all 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);
	opacity: 1;
  }
  .answer {
	line-height: 25px;
    font-size: 15px;
	margin-left: 25px;
	color: #00a884;
  }
  .cntr {
	/* position: absolute; */
	/* top: calc(50% - 10px); */
	/* left: 0; */
	width: 100%;
	/* text-align: center; */
	font-size: 22px;
  }
  .hidden {
	display: none;
  }
  .credit {
	position: fixed;
	right: 20px;
	bottom: 20px;
	transition: all 0.2s ease;
	-webkit-user-select: none;
	user-select: none;
	opacity: 0.6;
  }
  .credit img {
	width: 72px;
  }
  .credit:hover {
	transform: scale(0.95);
  }

  @import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

  .combined {
	font-family: Microsoft YaHei;
	color:#000;
	/* color: grey; */
  /* border white with light shadow
  text-shadow: 
     2px   0  0   #777777, 
    -2px   0  0   #777777, 
     0    2px 0   #777777, 
     0   -2px 0   #777777, 
     1px  1px 0   #777777, 
    -1px -1px 0   #777777, 
     1px -1px 0   #777777, 
    -1px  1px 0   #777777,
     1px  1px 5px #777777; */
 }
  
 .combinedRadios{
	margin: 5px 0px 20px 0px;
 }
  
.buttonNextCenterParent{
	text-align: center;
	width: 100%;
}
 
.buttonNext{
	margin: 0px auto;
	cursor: pointer;
}

#scoreToNext{
	cursor: pointer;
	z-index: 1000;
}








.field{
	--uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #ffffff);
  }
  
  .field__input{ 
	background-color: transparent;
	border-radius: 0;
	border: none;
  
	-webkit-appearance: none;
	-moz-appearance: none;
  
	font-family: inherit;
	font-size: 1em;
  }
  
  .field__input:focus::-webkit-input-placeholder{
	color: var(--uiFieldPlaceholderColor);
  }
  
  .field__input:focus::-moz-placeholder{
	color: var(--uiFieldPlaceholderColor);
	opacity: 1;
  }
  
  /*
  =====
  LEVEL 2. CORE STYLES
  =====
  */
  
  .a-field{
	display: inline-block;
  }
  
  .a-field__input{ 
	display: block;
	box-sizing: border-box;
	width: 100%;
	color: #ffffff;
	font-size: 20px;
	font-family: Microsoft YaHei;
  }
  
  .a-field__input:focus{
	outline: none;
  }
  
  /*
  =====
  LEVEL 3. PRESENTATION STYLES
  =====
  */
  
  /* a-field */
  
  .a-field{
	--uiFieldHeight: var(--fieldHeight, 40px);  
	--uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
	--uiFieldBorderColor: var(--fieldBorderColor);
  
	--uiFieldFontSize: var(--fieldFontSize, 1em);
	--uiFieldHintFontSize: var(--fieldHintFontSize, 1em);
  
	--uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
	--uiFieldPaddingBottom: var(--fieldPaddingBottom, 15px);
	--uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);   
  
	position: relative;
	box-sizing: border-box;
	font-size: var(--uiFieldFontSize);
	padding-top: 1em;  
  }
  
  .a-field .a-field__input{
	height: var(--uiFieldHeight);
	padding: 0 var(--uiFieldPaddingRight) 0 var(--uiFieldPaddingLeft);
	border-bottom: var(--uiFieldBorderWidth) solid var(--uiFieldBorderColor);  
  }
  
  .a-field .a-field__input::-webkit-input-placeholder{
	opacity: 0;
	transition: opacity .2s ease-out;
  }
  
  .a-field .a-field__input::-moz-placeholder{
	opacity: 0;
	transition: opacity .2s ease-out;
  }
  
  .a-field .a-field__input:not(:placeholder-shown) ~ .a-field__label-wrap .a-field__label{
	opacity: 0;
	bottom: var(--uiFieldPaddingBottom);
  }
  
  .a-field .a-field__input:focus::-webkit-input-placeholder{
	opacity: 1;
	transition-delay: .2s;
  }
  
  .a-field .a-field__input:focus::-moz-placeholder{
	opacity: 1;
	transition-delay: .2s;
  }
  
  .a-field .a-field__label-wrap{
	box-sizing: border-box;
	width: 100%;
	height: var(--uiFieldHeight);	
  
	pointer-events: none;
	cursor: text;
  
	position: absolute;
	bottom: 0;
	left: 0;
  }
  
  .a-field .a-field__label{
	position: absolute;
	left: var(--uiFieldPaddingLeft);
	bottom: calc(50% - .5em);
  
	line-height: 1;
	font-size: var(--uiFieldHintFontSize);
  
	pointer-events: none;
	transition: bottom .2s cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity .2s ease-out;
	will-change: bottom, opacity;
  }
  
  .a-field .a-field__input:focus ~ .a-field__label-wrap .a-field__label{
	opacity: 1;
	bottom: var(--uiFieldHeight);
  }
  
  /* a-field_a1 */
  
  .a-field_a1 .a-field__input{
	transition: border-color .2s ease-out;
	will-change: border-color;
  }
  
  .a-field_a1 .a-field__input:focus{
	border-color: var(--fieldBorderColorActive);
  }
  
  /* a-field_a2 */
  
  .a-field_a2 .a-field__label-wrap:after{
	content: "";
	box-sizing: border-box;
	width: 0;
	height: var(--uiFieldBorderWidth);
	background-color: var(--fieldBorderColorActive);
  
	position: absolute;
	bottom: 0;
	left: 0;  
  
	will-change: width;
	transition: width .285s ease-out;
  }
  
  .a-field_a2 .a-field__input:focus ~ .a-field__label-wrap:after{
	width: 100%;
  }
  
  /* a-field_a3 */
  
  .a-field_a3{
	padding-top: 1.5em;
  }
  
  .a-field_a3 .a-field__label-wrap:after{
	content: "";
	box-sizing: border-box;
	width: 100%;
	height: 0;
  
	opacity: 0;
	border: var(--uiFieldBorderWidth) solid var(--fieldBorderColorActive);
  
	position: absolute;
	bottom: 0;
	left: 0;
  
	will-change: opacity, height;
	transition: height .2s ease-out, opacity .2s ease-out;
  }
  
  .a-field_a3 .a-field__input:focus ~ .a-field__label-wrap:after{
	height: 100%;
	opacity: 1;
  }
  
  .a-field_a3 .a-field__input:focus ~ .a-field__label-wrap .a-field__label{
	bottom: calc(var(--uiFieldHeight) + .5em);
  }
  
  /*
  =====
  LEVEL 4. SETTINGS
  =====
  */
  
  .field{
	width: 100%;
    margin-bottom: 15px;
	--fieldBorderColor: rgb(253, 251, 219);
	--fieldBorderColorActive: rgb(255, 252, 53);
  }
  
  textarea {
	font-family: Microsoft YaHei !important;
	width: 100%;
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
	resize: none;
  }

  #statement{
	font-family: Microsoft YaHei !important;
	  background: #EEF0E3;
	  border-radius: 2pt;
	  padding: 20pt;
	  width: 100%;
  }
  #questionNext{
	margin-top: 45px;
	margin-bottom: 15px;
  }
  #dataNext{
	  width: 100%;
      padding-bottom: 20px;

  }