body { font: 13px/1.6em Arial, 'Microsoft JhengHei'; color: #333; }
a{ text-decoration: none;}
.header, .footer { background: #fff; }
.header{ width:950px; margin: auto}
.hd_pc { width: 950px; }
.hd_m { display: none; }
.main { background: url(../images/kv_bg.png) top center no-repeat, url(../images/main_bg.png) top center repeat-y;background-color: #51d5d8;   margin: auto; position: relative; min-width: 950px; padding-bottom: 50px; }
/**kv&step**/
.kv_wrapper { width: 950px; height: 580px; margin: auto; overflow: hidden; position: relative }
.kv_slogan { position: absolute; z-index: 5; top: 100px; left: 125px; }
.kv_hand { position: absolute; z-index: 10; top: 386px; right: 192px; }
.kv_wrapper:after { content: ''; display: table; clear: both }
.step_wrapper { width: 950px; margin: auto; }
.title_wrapper { width: 950px; margin: auto;  }
.space{padding-top: 70px;}
/**event**/
.event_wrapper { }
.event_wrapper.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 500; -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); }
.event_wrapper:after { content: ''; display: table; clear: both }
.event_wrapper ul { min-width: 950px; }
.event_wrapper li { width: 20%; float: left; background: #e5af17; text-align: center; font-size: 16px; position: relative; }
.event_wrapper li:nth-child(2n) { background: #ff7059 }
.event_wrapper li:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.event_wrapper li a { width: 100%; color: #fff; text-decoration: none; display: inline-block; vertical-align: middle; padding: 0.8em 0; }
.event_wrapper li:after { content: ""; position: absolute; z-index: 1; left: 51%; right: 51%; bottom: 0; background: #fff; height: 3px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.event_wrapper li:hover:after, .event_wrapper li:focus:after, .event_wrapper li:active:after { left: 0; right: 0; }
.eventBanner_wrapper{ width:890px; margin: auto;}
.eventBanner_wrapper02{ width:890px; margin: auto; }
.eventBanner_wrapper02 .right{float: right;margin-bottom: 50px;}
.eventBanner_wrapper02 .left{float: left;margin-bottom: 50px;}

/**float**/
.float_wrapper { position: fixed; top: 200px; left: 50%; right: 50%; display: none; z-index: 500; }
.float_main { margin-left: 480px;width: 75px; }
.float_how{ display:block; background: #fff; text-align: center; font-size: 18px; color: #e85f49;padding: 0 3px; padding: 10px 3px; line-height: 24px; border-radius: 0 0 20px 20px; font-weight: bold;}
.group_leftmenu {background: rgba(255,255,255,1);}
.group_leftmenu li { text-align: center; font-size: 14px; padding: 5px 0; cursor: pointer; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
.group_leftmenu li a { position: relative; z-index: 500; }
.group_leftmenu li:hover, .type_leftmenu li:focus, .type_leftmenu li:active { color: white; }
.group_leftmenu li:before { content: ""; position: absolute; z-index: 500; top: 0; left: 0; right: 0; bottom: 0; background: #ff7059; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.group_leftmenu li:hover:before, .type_leftmenu li:focus:before, .type_leftmenu li:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); }
/**moneyEarning**/
.moneyEarning_wrapper{ width: 890px; margin: auto; border-radius: 30px; background: #fff; padding: 20px 30px;}
.moneyEarning_rule{ background: #52b6b8; color: white; font-size: 22px; height: 60px; border-radius: 30px; text-align: center; font-weight: bold; vertical-align: middle}
.moneyEarning_rule:before{ content: ''; display:inline-block; height: 100%; vertical-align: middle;}
.moneyEarning_rule_btn{ display:inline-block; background: #ffbc00; padding: 5px 15px;text-decoration: none; color:white; border-radius: 30px; margin-left: 5px;transition: linear .3s; -webkit-transition: linear .3s;}
.moneyEarning_rule_btn:hover,.moneyEarning_rule_btn:focus,.moneyEarning_rule_btn:active{ background-color: #df7900; }
.moneyEarning_rule_btn i{-webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;}
.moneyEarning_rule_btn:hover i, .moneyEarning_rule_btn:focus i, .moneyEarning_rule_btn:active i {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}
/**/
.moneyEarningGroup_wrapper{ margin: 15px 0;}
.moneyEarningGroup_wrapper:after { content: ''; display: table; clear: both }
.moneyEarningGroup_title{ font-size: 22px; letter-spacing: 0.3em; border-bottom: 2px #ddd solid;  padding: 8px 0; margin-bottom: 10px;}
.moneyEarningGroup_title i{ background: #dddddd; dispaly:inline-block; float:left; width: 10px; height: 20px; margin-right: 5px; vertical-align: middle;}
.moneyEarningGroup_content{ }
.moneyEarningBrand_wrapper{width:160px; padding: 5px; float:left;box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);border-radius: 3px; margin: 10px 4px;}
.moneyEarningBrand_title{ color:#333; text-align: center;}
.moneyEarnigBrand_logo{ display:block;position: relative; width: 160px; height: 160px;}
.moneyEarnigBrand_logo img{ position: absolute; top:0; bottom:0; left: 0; right: 0; margin: auto;  max-height: 100%; max-width: 100%;}
.moneyEarningBrand_url{}
.moneyEarnigBrand_goBtn{ position: absolute; z-index: 2; text-align: center; font-weight: bold; vertical-align: middle;width: 90%; height: 50px; font-size: 16px; top: 0; bottom:0; left:0; right:0; margin: auto; background: #ff7059; border-radius: 5px; color: #fff;-webkit-transform: translateZ(0);  transform: translateZ(0);  opacity: 0;-webkit-transition-duration: 0.3s; transition-duration: 0.3s;	box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.3);}
.moneyEarnigBrand_goBtn:before{content:''; height: 100%; display: inline-block;vertical-align: middle;}
.moneyEarningBrand_url:hover .moneyEarnigBrand_goBtn,.moneyEarningBrand_url:focus .moneyEarnigBrand_goBtn,.moneyEarningBrand_url:active .moneyEarnigBrand_goBtn{-webkit-animation-name: wobble-vertical;
  animation-name: wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
opacity: 1;}
.moneyEarningBrand_PEZurl{ display:block; text-align: center; color:#d23b23; background-color:#ffded9;transition: linear .2s; -webkit-transition: linear .2s; padding: 5px 0; line-height: 20px;}
.moneyEarningBrand_PEZurl:hover,.moneyEarningBrand_PEZurl:focus,.moneyEarningBrand_PEZurl:active{ color:peachpuff; background-color:maroon}
/**animation**/
.upDown_animation { -webkit-animation: upDown_animation 0.5s ease-in-out infinite alternate; animation: upDown_animation 0.5s ease-in-out infinite alternate; }
.flash_animation { -webkit-animation: flash_animation 2s ease-in-out infinite alternate; animation: flash_animation 2s ease-in-out infinite alternate; }
@-webkit-keyframes upDown_animation {
 0% {
-webkit-transform: translate(0, -10px);
}
 100% {
-webkit-transform: translate(0, 0);
}
}
@keyframes upDown_animation {
 0% {
transform: translate(0, -10px);
}
 100% {
transform: translate(0, 0);
}
}
@-webkit-keyframes flash_animation {
 0%, 100%, 50% {
filter: brightness(100%);
}
25%, 75% {
filter: brightness(130%);
}
}
@keyframes flash_animation {
0%, 100%, 50% {
filter: brightness(100%);
}
25%, 75% {
filter: brightness(130%);
}
}
@-webkit-keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  33.3% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
  33.3% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  49.95% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@media screen and (max-width:767px) {
	*{ box-sizing:border-box;}
#doyoo_panel { display: none!important }
.header { width: 100vw }
.footer { display: none; }
.hd_pc { display: none; }
.hd_m { display: block }
.main { min-width: inherit; width: 100vw; height: auto; background-size: 205vw; background-position: center 5vw; padding-bottom:30vw }
.kv_wrapper { width: 100vw; height: 53vw; }
.kv_slogan { width: 82vw; top:18px; left: 0; right: 0; margin: auto; }
.kv_hand { width: 63vw; top: 133px; left: 0; right: 0; margin: auto; }
	.event_wrapper ul{ min-width: inherit;}
	.event_wrapper li{ font-size:13px;}
	.step_wrapper{width: 96vw;}
.step_wrapper img { width: 100%; }
	.title_wrapper{width: 96vw;}
.title_wrapper img { width: 100%; }
	.moneyEarning_wrapper{width: 96vw; border-radius: 15px; padding: 10px;}
	.moneyEarning_rule{font-size: 15px; border-radius: 10px; height: auto; padding: 5px;}
	.moneyEarningBrand_wrapper{ width: 48%; padding:5px; margin: 10px 1%;}
	.moneyEarning_rule{}
	.moneyEarnigBrand_logo{ width: calc(45.6vw - 19px);height: calc(45.6vw - 19px)}
	.float_wrapper{top:inherit; bottom:0; left:0; right: 0; box-shadow: 0px -5px 5px -5px rgba(0,0,0,0.3);}
	.float_main{ margin:auto; width: 100vw;}
	.group_leftmenu{ background: rgba(0, 0, 0, 0.8);}
	.group_leftmenu:after{ content:''; display:table; clear:both;}
	.group_leftmenu li{ width:50vw; float:left; color:white;}
	.float_hd{ display:none;}
	.float_how{ border-radius: 0; font-size: 18px;}
	.eventBanner_wrapper{ width:100%;}
	.eventBanner_wrapper img{ width: 100%}
	.eventBanner_wrapper02{ width:100%; height: auto;}
	.eventBanner_wrapper02 .left{width: 50%; margin-bottom: 0px;}
	.eventBanner_wrapper02 .right{width: 50%;margin-bottom: 0px;}
	.eventBanner_wrapper02 .left img{ width:100%; height: auto;}
	.eventBanner_wrapper02 .right img{ width:100%; height: auto;}
	.space{padding-top: 20px;}
}