@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
html,
body,
{
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
  line-height: 1.5;
  font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
  background-color: #543a29;
}

a {
  text-decoration: none;
}
body a {
	-webkit-transition: all .3s;
	transition: all .3s;
}
.wrapper{
	position: relative;
	z-index: 100;
}
.main{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 55vw;
	z-index: 500;
	top: 0px;
	background: url("../img/bg_01.jpg") no-repeat;
	background-position: center;
	background-size: 100% auto;
}
.fblike {
	display: block;
	position: fixed;
	left: 0vw;
	top: 28vw;
	z-index: 1001;
	width: 13vw;
	height: 16vw;
	outline: none;
	cursor: pointer;
}
.fblike:hover{
	transition: 0.5s;
	filter: brightness(1.1);
	animation: shaking ease-out 0.6s;
	
}
@-webkit-keyframes shaking {
	0% {transform: translate(1px, -2px) rotate(-1deg);}
  10% {transform: translate(-1px, 2px) rotate(-1deg);}
  20% {transform: translate(1px, 2px) rotate(0deg);}
  30% {transform: translate(3px, 2px) rotate(0deg);}
  40% {transform: translate(1px, -1px) rotate(1deg);}
  50% {transform: translate(-1px, -2px) rotate(-1deg);}
  60% {transform: translate(-3px, 1px) rotate(0deg);}
  70% {transform: translate(3px, 1px) rotate(-1deg);}
  80% {transform: translate(-1px, -1px) rotate(1deg);}
  90% {transform: translate(-3px, 0px) rotate(1deg);}
  100% {transform: translate(1px, 1px) rotate(0deg);}
}
@keyframes shaking {
	0% {transform: translate(1px, -2px) rotate(-1deg);}
  10% {transform: translate(-1px, 2px) rotate(-1deg);}
  20% {transform: translate(1px, 2px) rotate(0deg);}
  30% {transform: translate(3px, 2px) rotate(0deg);}
  40% {transform: translate(1px, -1px) rotate(1deg);}
  50% {transform: translate(-1px, -2px) rotate(-1deg);}
  60% {transform: translate(-3px, 1px) rotate(0deg);}
  70% {transform: translate(3px, 1px) rotate(-1deg);}
  80% {transform: translate(-1px, -1px) rotate(1deg);}
  90% {transform: translate(-3px, 0px) rotate(1deg);}
  100% {transform: translate(1px, 1px) rotate(0deg);}
}
.btn-nav {
	position: fixed;
	right: 9vw;
	top: 30vw;
	z-index: 10000;
	width: 2vw;
	height: 15vw;
	cursor: pointer;
}
.btn-on, .btn-off {
	float: left;
	width: 2vw;
	height: 15vw;
}
.btn-on {
	display: none;
	background: url("../img/sidebar_open.png") no-repeat;
	background-size: 100% auto;
}
.btn-off {
	display: block;
	background: url("../img/sidebar_close.png") no-repeat;
	background-size: 100% auto;
}
.nav-box {
	position: fixed;
	right: 0;
	top: 30vw;
	z-index: 10000;
	width: 9vw;
	height: 13.3vw;
	background: url("../img/sidebar_bg.png") no-repeat;
	background-size:100% auto;
	padding-top: 1.5vw;
}
.btn-01, .btn-02, .btn-03, .btn-04, .btn-top {
	float: left;
	margin-left: 1.5vw;
	margin-top: 0vw;
	display: inline;
	width: 6vw;
	height: 2.5vw;
}
.btn-01 {
	background: url("../img/sidebar_01.png") no-repeat;
	background-size:100% auto;
	cursor: pointer;
}
.btn-01:hover {
	background: url("../img/sidebar_01a.png") no-repeat;
	background-size:100% auto;
	filter: brightness(1.3);
	transform: scale(1.08);
	transition: 0.5s;
}
.btn-02 {
	background: url("../img/sidebar_02.png") no-repeat;
	background-size:100% auto;
}
.btn-02:hover {
	background: url("../img/sidebar_02a.png") no-repeat;
	background-size:100% auto;
	cursor: pointer;
	filter: brightness(1.3);
	transform: scale(1.08);
	transition: 0.5s;
}
.btn-03 {
	background: url("../img/sidebar_03.png") no-repeat;
	background-size:100% auto;
	cursor: pointer;
}
.btn-03:hover {
	background: url("../img/sidebar_03.png") no-repeat;
	background-size:100% auto;
	filter: brightness(1.3);
	transform: scale(1.08);
	transition: 0.5s;
}
.btn-04 {
	background: url("../img/sidebar_04.png") no-repeat;
	background-size:100% auto;
	cursor: pointer;
}
.btn-04:hover {
	background: url("../img/sidebar_04.png") no-repeat;
	background-size:100% auto;
	filter: brightness(1.3);
	transform: scale(1.08);
	transition: 0.5s;
}
.btn-top {
	background: url("../img/sidebar_05.png") no-repeat;
	background-size:100% auto;
	cursor: pointer;
}
.btn-top:hover {
	background: url("../img/sidebar_05a.png") no-repeat;
	background-size:100% auto;
	filter: brightness(1.3);
	transform: scale(1.08);
	transition: 0.5s;	
}
.logo{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin:0 auto;
	margin-top: 21vw;
	width: 24vw;
	height: auto;
}
.slogan{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 22.5vw;
	margin-top: -2vw;
	width: 53vw;
	height: auto;
	animation: shine ease-out 0.6s;
	animation-iteration-count: 1;
}
@-webkit-keyframes shine {
	0% { transform: scale(200);opacity: 0;}
	70% { transform: scale(1);opacity: 1;}
	71% { transform: translate(-1px, -2px) rotate(-1deg); }
  	72% { transform: translate(-3px, 0px) rotate(1deg); }
  	73% { transform: translate(3px, 2px) rotate(0deg); }
  	74% { transform: translate(1px, -1px) rotate(1deg); }
  	75% { transform: translate(-1px, 2px) rotate(-1deg); }
  	76% { transform: translate(-3px, 1px) rotate(0deg); }
  	77% { transform: translate(3px, 1px) rotate(-1deg); }
  	78% { transform: translate(-1px, -1px) rotate(1deg); }
  	79% { transform: translate(1px, 2px) rotate(0deg); }
  	80% { transform: translate(1px, -2px) rotate(-1deg); }
	81% { transform: translate(-1px, -2px) rotate(-1deg); }
  	82% { transform: translate(-3px, 0px) rotate(1deg); }
  	83% { transform: translate(3px, 2px) rotate(0deg); }
  	84% { transform: translate(1px, -1px) rotate(1deg); }
  	85% { transform: translate(-1px, 2px) rotate(-1deg); }
  	86% { transform: translate(-3px, 1px) rotate(0deg); }
  	87% { transform: translate(3px, 1px) rotate(-1deg); }
  	88% { transform: translate(-1px, -1px) rotate(1deg); }
  	89% { transform: translate(1px, 2px) rotate(0deg); }
  	90% { transform: translate(1px, -2px) rotate(-1deg); }
	91% { transform: translate(-1px, -2px) rotate(-1deg); }
  	92% { transform: translate(-3px, 0px) rotate(1deg); }
  	93% { transform: translate(3px, 2px) rotate(0deg); }
  	94% { transform: translate(1px, -1px) rotate(1deg); }
  	95% { transform: translate(-1px, 2px) rotate(-1deg); }
  	96% { transform: translate(-3px, 1px) rotate(0deg); }
  	97% { transform: translate(3px, 1px) rotate(-1deg); }
  	98% { transform: translate(-1px, -1px) rotate(1deg); }
  	99% { transform: translate(1px, 2px) rotate(0deg); }
  	100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes shine {
	0% { transform: scale(100);opacity: 0;}  
	70% { transform: scale(1);opacity: 1;}
	71% { transform: translate(-1px, -2px) rotate(-1deg); }
  	72% { transform: translate(-3px, 0px) rotate(1deg); }
  	73% { transform: translate(3px, 2px) rotate(0deg); }
  	74% { transform: translate(1px, -1px) rotate(1deg); }
  	75% { transform: translate(-1px, 2px) rotate(-1deg); }
  	76% { transform: translate(-3px, 1px) rotate(0deg); }
  	77% { transform: translate(3px, 1px) rotate(-1deg); }
  	78% { transform: translate(-1px, -1px) rotate(1deg); }
  	79% { transform: translate(1px, 2px) rotate(0deg); }
  	80% { transform: translate(1px, -2px) rotate(-1deg); }
	81% { transform: translate(-1px, -2px) rotate(-1deg); }
  	82% { transform: translate(-3px, 0px) rotate(1deg); }
  	83% { transform: translate(3px, 2px) rotate(0deg); }
  	84% { transform: translate(1px, -1px) rotate(1deg); }
  	85% { transform: translate(-1px, 2px) rotate(-1deg); }
  	86% { transform: translate(-3px, 1px) rotate(0deg); }
  	87% { transform: translate(3px, 1px) rotate(-1deg); }
  	88% { transform: translate(-1px, -1px) rotate(1deg); }
  	89% { transform: translate(1px, 2px) rotate(0deg); }
  	90% { transform: translate(1px, -2px) rotate(-1deg); }
	91% { transform: translate(-1px, -2px) rotate(-1deg); }
  	92% { transform: translate(-3px, 0px) rotate(1deg); }
  	93% { transform: translate(3px, 2px) rotate(0deg); }
  	94% { transform: translate(1px, -1px) rotate(1deg); }
  	95% { transform: translate(-1px, 2px) rotate(-1deg); }
  	96% { transform: translate(-3px, 1px) rotate(0deg); }
  	97% { transform: translate(3px, 1px) rotate(-1deg); }
  	98% { transform: translate(-1px, -1px) rotate(1deg); }
  	99% { transform: translate(1px, 2px) rotate(0deg); }
  	100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.card_tiger{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 74.5vw;
	margin-top: -22.5vw;
	width: 20vw;
	height: auto;
	animation-delay: 1s;
}
.card_baphont{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 3vw;
	margin-top: -26.5vw;
	width: 22vw;
	height: auto;
	animation-delay: 0.8s;
}
.card_beauty{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 77vw;
	margin-top: -53vw;
	width: 22vw;
	height: auto;
	animation-delay: 0.5s;
}
.card_poring{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 80vw;
	margin-top: -6vw;
	width: 16vw;
	height: auto;
	animation: poring linear 4s infinite;
}
@-webkit-keyframes poring {
	0% { transform: translateY(5px); } 
	50% { transform: translateY(-5px); } 
	100% { transform: translateY(5px); }
}
@keyframes poring {
	0% { transform: translateY(5px); } 
	50% { transform: translateY(-5px); } 
	100% { transform: translateY(5px); }
}
.card_meow{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 89.5vw;
	margin-top: -9.5vw;
	width: 14vw;
	height: auto;
	animation-delay: 0.5s;
}
.card_maid{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: -1vw;
	margin-top: -30.5vw;
	width: 18vw;
	height: auto;
	animation-delay: 0.5s;
}
.card_devil{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 10vw;
	margin-top: -18vw;
	width: 9vw;
	height: auto;
	animation-delay: 0.5s;
	animation: devil linear 3s infinite;
}
@-webkit-keyframes devil {
	0% { transform: translateY(2px); } 
	50% { transform: translateY(-2px); } 
	100% { transform: translateY(2px); }
}
@keyframes devil {
	0% { transform: translateY(2px); } 
	50% { transform: translateY(-2px); } 
	100% { transform: translateY(2px); }
}
.down{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 46vw;
	margin-top: 0vw;
	width: 6vw;
	height: auto;
	cursor: pointer;
	animation: float 2s ease-out infinite;
}
@keyframes float {
  50% {
     transform: translate(0, -10px);
  }
}
.btn_gp1{
	display: none;
}
.btn_ios1{
	display: none;
}
.btn_now{
	display: none;
}
.section_register{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 47vw;
	background: url("../img/bg_02.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
}
.title01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 29.5vw;
	margin-top: 4vw;
	width: 41vw;
	height: 10vw;
	background: url("../img/title_01.png") no-repeat center;
	background-size: 100% auto;
}
.title02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 20vw;
	margin-top: 0vw;
	width: 60vw;
	height: 10vw;
	background: url("../img/title_02.png") no-repeat center;
	background-size: 100% auto;
}
.title03{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 26vw;
	margin-top: 1vw;
	width: 48vw;
	height: 10vw;
	background: url("../img/title_03.png") no-repeat center;
	background-size: 100% auto;
}
.sec01_text{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 26vw;
	margin-top: 14.5vw;
	width: 48vw;
	height: 3vw;
	background: url("../img/sec01_text.png") no-repeat center;
	background-size: 100% auto;
}
.box01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 100;
	margin-left: 26vw;
	margin-top: 18vw;
	width: 24vw;
	height: 10vw;
	background: url("../img/sec01_box01.png") no-repeat center;
	background-size: 100% auto;
}
.plateform{
	width: 30vw;
    margin-top: 6vw;
	margin-left: 1vw;
    background-size: cover;
    position: absolute;
    line-height: 2vw;
    color: #000000;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    font-size: 1.5vw;
    float: left;
    letter-spacing: 0vw;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.googleplay{
	display: block;
	width: 1.1vw;
	height: 1.1vw;
	margin-right: 0.5vw;
	margin-left: 0.5vw;
}
.ios{
	display: block;
	width: 1.1vw;
	height: 1.1vw;
	margin-right: 0.5vw;
	margin-left: 1.5vw;
}
.box02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 100;
	margin-left: 50vw;
	margin-top: 18vw;
	width: 24vw;
	height: 10vw;
	background: url("../img/sec01_box02.png") no-repeat center;
	background-size: 100% auto;
}
.numberbox {
  width: 30vw;
  margin-top: 6vw;
}
.numberbox #login-svr {
  padding: 0.3vw;
  margin-left: 1.5vw;
  font-family: "Noto Sans TC";
  font-size: 1.1vw;
  line-height: 2.2vw;
  width: 7vw;
  border: 0;
  color: #bababa;
  background-color: #ffffff;
}
.numberbox .enternumber {
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 1.1vw;
  color: #bababa;
  line-height: 2.2vw;
  background-color: #ffffff;
  margin-left: 0.5vw;
  text-align: center;
  width: 13vw;
}
.numberbox ::placeholder {
  /* CSS 3 標準 */
  color: #bababa;
}
.numberbox ::-webkit-input-placeholder {
  /* Chrome, Safari */
  color: #bababa;
}
.numberbox :-ms-input-placeholder {
  /* IE 10+ */
  color: #bababa;
}
.numberbox ::-moz-placeholder {
  /* Firefox 19+ */
  color: #bababa;
  opacity: 1;
}
.numberbox p.infop {
  font-size: 15px;
  clear: both;
  text-align: center;
  margin-top: 5px;
}
.numberbox p.infop .infoyl a {
  color: #fff14f;
  text-decoration: underline;
}
.numberbox p.infop .infook {
  margin: 0 5px 0 0;
}
.giftcodebox {
  display: block;
  position: absolute;
  top: 28vw;
  left: 21vw;
  width: 14vw;
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 1vw;
  color: #bababa;
  line-height: 2.6vw;
  background-color: #ffffff;
  text-align: center;
}
.btn_copy{
  display: block;
  position: absolute;
  top: 28vw;
  left: 35vw;
  width: 3vw;
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 1vw;
  color: #ffffff;
  line-height: 2.6vw;
  background-color: #675fb1;
  text-align: center;
  cursor: pointer;
}
.btn_share{
  display: block;
  position: absolute;
  top: 28.4vw;
  left: 39vw;
  width: 4vw;
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 1vw;
  color: #ffffff;
  line-height: 2.6vw;
  background-color: #675fb1;
  text-align: center;
  cursor: pointer;
  border-radius: 0.6vw;
}
.btn_share:hover{
	transform: scale(1.02);
	color: #fffb9a;
	cursor: pointer;
}
.cha01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 50;
	margin-left: 12vw;
	margin-top: -2vw;
	width: 23.5vw;
	height: 47vw;
	background: url("../img/cha01.png") no-repeat center;
	background-size: 100% auto;
}
.cha02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 50;
	margin-left: 65vw;
	margin-top: 30vw;
	width: 12vw;
	height: 10vw;
	background: url("../img/cha02.png") no-repeat center;
	background-size: 100% auto;
	animation: poring2 linear 4s infinite;
}
@-webkit-keyframes poring2 {
	0% { transform: translateY(5px); } 
	50% { transform: translateY(-5px); } 
	100% { transform: translateY(5px); }
}
@keyframes poring2 {
	0% { transform: translateY(5px); } 
	50% { transform: translateY(-5px); } 
	100% { transform: translateY(5px); }
}
.pre_agree{
	width: 30vw;
    margin-top: 29vw;
	margin-left: 41vw;
    background-size: cover;
    position: absolute;
    line-height: 2vw;
    color: #000000;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    font-size: 1.1vw;
    float: left;
    letter-spacing: 0vw;
}
.magic{
	display: block;
	width: 1.1vw;
	height: 1.1vw;
	margin-right: 0.5vw;
}
.register_web{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 50;
	margin-left: 38.5vw;
	margin-top: 32vw;
	width: 23vw;
	height: 6vw;
	background: url("../img/login_btn.png") no-repeat center;
	background-size: 100% auto;
	cursor: pointer;
	animation: big linear 2s infinite;
}
.register_mobile{display: none;
}

@-webkit-keyframes big {
	0% { transform: scale(0.95); filter: brightness(1); } 
	50% { transform: scale(1); filter: brightness(1.3); } 
	100% { transform: scale(0.95); filter: brightness(1); }
}
@keyframes big {
	0% { transform: scale(0.95); filter: brightness(1); } 
	50% { transform: scale(1); filter: brightness(1.3); } 
	100% { transform: scale(0.95); filter: brightness(1); }
}
.section_reward{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 64vw;
	background: url("../img/bg_03.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
}
.goalcard01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 24vw;
	margin-top: 16.2vw;
	width: 9vw;
	height: 20vw;
	background: url("../img/goalcard01.png") no-repeat center;
	background-size: 100% auto;
}
.goalcard02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 34.3vw;
	margin-top: 18.2vw;
	width: 9vw;
	height: 20vw;
	background: url("../img/goalcard02.png") no-repeat center;
	background-size: 100% auto;
}
.goalcard03{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 44.7vw;
	margin-top: 16.2vw;
	width: 9vw;
	height: 20vw;
	background: url("../img/goalcard03.png") no-repeat center;
	background-size: 100% auto;
}
.goalcard04{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 54.9vw;
	margin-top: 18.2vw;
	width: 9vw;
	height: 20vw;
	background: url("../img/goalcard04.png") no-repeat center;
	background-size: 100% auto;
}
.goalcard05{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 65vw;
	margin-top: 16.2vw;
	width: 9vw;
	height: 20vw;
	background: url("../img/goalcard05.png") no-repeat center;
	background-size: 100% auto;
}
.goal01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 22vw;
	margin-top: 14vw;
	width: 6vw;
	height: 6vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.goal02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 32.5vw;
	margin-top: 16vw;
	width: 6vw;
	height: 6vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.goal03{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 43vw;
	margin-top: 14vw;
	width: 6vw;
	height: 6vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.goal04{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 53.5vw;
	margin-top: 16vw;
	width: 6vw;
	height: 6vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.goal05{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 64vw;
	margin-top: 14vw;
	width: 6vw;
	height: 6vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.iphone_bg{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 20;
	margin-left: 24.2vw;
	margin-top: 40.5vw;
	width: 50vw;
	height: 11vw;
	background: url("../img/sec_iphone_bg.png") no-repeat center;
	background-size: 100% auto;
}
.iphone_text{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 20;
	margin-left: 27vw;
	margin-top: 41.1vw;
	width: 21.5vw;
	height: 10vw;
	background: url("../img/iphone_text_02.png") no-repeat center;
	background-size: 100% auto;
}
.poringtoy{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 22;
	margin-left: 46.7vw;
	margin-top: 40vw;
	width: 15vw;
	height: 12vw;
	background: url("../img/sec_items_01.png") no-repeat center;
	background-size: 100% auto;
	animation-delay: 0.2s;
}
.iphone{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 20;
	margin-left: 57.5vw;
	margin-top: 39vw;
	width: 15.5vw;
	height: 12vw;
	background: url("../img/sec_iphone_01.png") no-repeat center;
	background-size: 100% auto;
	animation-delay: 0.4s;
}
.section_features{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 41vw;
	background: url("../img/bg_04.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
}

.game-banner {
    position: absolute;
	margin-top: 12vw;
	margin-left: 26vw;
    width: 48vw;
	height: 20vw;
	z-index: 900;
}

.game-bg{
	z-index: 800;
	display: block;
	position: absolute;
	width: 50vw;
	height: 26vw;
	margin-top: 10vw;
	margin-left: 25vw;
	background: url("../img/sec03_box.png") no-repeat center;
	background-size: 100% auto;
}
.game-banner .gameSlider {
    width: 100%;
    height: 0;
    position: absolute;
	display: block;
    padding-bottom: 56%;
}

.game-banner .gameSlider ul {
    width: 100%;
}

.game-banner .gameSlider ul .gameSlider-li img {
    width: 100%;
    display: block;
}

.game-banner .gameSlider-pagination {
    margin-top: 25vw;
}


.section_notice{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 42vw;
	background: url("../img/bg_05.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
}
.notice_text{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 20;
	margin-left: 25vw;
	margin-top: 3vw;
	width: 50vw;
	height: 40vw;
	background: url("../img/notice.png?v=220406") no-repeat center;
	background-size: 100% auto;
}


footer {
  background-color: #4a3527;
}

@media screen and (min-width: 1280px) and (max-width: 1600px) {

.numberbox #login-svr {
  padding: 0.3vw;
  margin-left: 1.5vw;
  font-family: "Noto Sans TC";
  font-size: 1vw;
  line-height: 2.2vw;
  width: 6.5vw;
  border: 0;
  color: #bababa;
  background-color: #ffffff;
}
.numberbox .enternumber {
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 1vw;
  color: #bababa;
  line-height: 2.2vw;
  background-color: #ffffff;
  margin-left: 0.5vw;
  text-align: center;
  width: 13.5vw;
}
	
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
.section_features{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 41vw;
	background: url("../img/bg_04.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
	margin-top: -1px;
}
}


@media screen and (min-width: 769px) and (max-width: 1023px) {
.numberbox #login-svr {
  padding: 0px;
  margin-left: 10px;
  font-family: "Noto Sans TC";
  font-size: 12px;
  line-height: 20px;
  width: 70px;
  border: 0;
  color: #bababa;
  background-color: #ffffff;
}
.numberbox .enternumber {
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 12px;
  color: #bababa;
  line-height: 18px;
  background-color: #ffffff;
  margin-left: 0vw;
  text-align: center;
  width: 12vw;
}
.section_register{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 47vw;
	background: url("../img/bg_02.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
	margin-top: -1px;
}
.section_reward{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 64vw;
	background: url("../img/bg_03.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
	margin-top: -1px;
}
.section_features{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 41vw;
	background: url("../img/bg_04.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
	margin-top: -4px;
}
.section_notice{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 42vw;
	background: url("../img/bg_05.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
	margin-top: -1px;
}

}


@media screen and (max-width: 768px) {

.main{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 157vw;
	z-index: 500;
	top: 0px;
	background: url("../img/bg_m01.jpg") no-repeat;
	background-position: center;
	background-size: 100% auto;
}
.fblike {
	display: none;
}
.btn-nav {
	display: none;
}
.nav-box {
	display: none;
}

.logo{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin:0 auto;
	margin-top: 64vw;
	margin-left: 22vw;
	width: 56vw;
	height: auto;
}
.slogan{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: -5vw;
	margin-top: 96vw;
	width: 110vw;
	height: auto;
}
.card_tiger{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 80vw;
	margin-top: 108vw;
	width: 28vw;
	height: auto;
	animation-delay: 1s;
}
.card_baphont{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: -5vw;
	margin-top: 118vw;
	width: 30vw;
	height: auto;
	animation-delay: 0.8s;
}
.card_beauty{
	display: none;
}
.card_poring{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 77vw;
	margin-top: 2vw;
	width: 22vw;
	height: auto;
}
.card_meow{
	display: none;
}
.card_maid{
	display: none;
}
.card_devil{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 4vw;
	margin-top: 2vw;
	width: 16vw;
	height: auto;
	animation-delay: 0.5s;
}
.down{
	display: none;
}
.btn_gp1{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 4vw;
	margin-top: 137vw;
	width: 30vw;
	height: 12vw;
	background: url("../img/icon_gp1.png") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	animation-delay: 0.3s;
}
.btn_ios1{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 35vw;
	margin-top: 137vw;
	width: 30vw;
	height: 12vw;
	background: url("../img/icon_apple1.png") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	animation-delay: 0.3s;
}
.btn_fb1{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 66vw;
	margin-top: 137vw;
	width: 30vw;
	height: 12vw;
	background: url("../img/icon_fb1.png") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	animation-delay: 0.5s;
}
.btn_gp2{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 12vw;
	margin-top: 137vw;
	width: 36vw;
	height: 12vw;
	background: url("../img/icon_gp2.png") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	animation-delay: 0.3s;
}
.btn_ios2{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 12vw;
	margin-top: 137vw;
	width: 36vw;
	height: 12vw;
	background: url("../img/icon_apple2.png") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	animation-delay: 0.3s;
}
.btn_fb2{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 52vw;
	margin-top: 137vw;
	width: 36vw;
	height: 12vw;
	background: url("../img/icon_fb2.png") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	animation-delay: 0.5s;
}
.btn_now{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 50;
	margin-left: 20vw;
	margin-top: 118vw;
	width: 60vw;
	height: 14vw;
	background: url("../img/btn_now.png") no-repeat center;
	background-size: 100% auto;
	cursor: pointer;
	animation: big linear 2s infinite;
}
.section_register{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 150vw;
	background: url("../img/bg_m02.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
}
.title01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 0vw;
	margin-top: 7vw;
	width: 100vw;
	height: 24vw;
	background: url("../img/title_01.png") no-repeat center;
	background-size: 100% auto;
}
.title02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 0vw;
	margin-top: 18vw;
	width: 100vw;
	height: 22vw;
	background: url("../img/title_02_m.png") no-repeat center;
	background-size: 100% auto;
}
.title03{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 0vw;
	margin-top: 3vw;
	width: 100vw;
	height: 22vw;
	background: url("../img/title_03_m.png") no-repeat center;
	background-size: 100% auto;
}
.sec01_text{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1000;
	margin-left: 0vw;
	margin-top: 33vw;
	width: 100vw;
	height: 12vw;
	background: url("../img/sec01_text_m.png") no-repeat center;
	background-size: 100% auto;
}
.box01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 100;
	margin-left: 26vw;
	margin-top: 48vw;
	width: 70vw;
	height: 28vw;
	background: url("../img/sec01_box01.png") no-repeat center;
	background-size: 100% auto;
}
.plateform{
	width: 60vw;
    margin-top: 16vw;
	margin-left: 5vw;
    background-size: cover;
    position: absolute;
    line-height: 4vw;
    color: #000000;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    font-size: 4vw;
    float: left;
    letter-spacing: 0vw;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.googleplay{
	display: block;
	width: 4vw;
	height: 4vw;
	margin-right: 0.5vw;
	margin-left: 0.5vw;
}
.ios{
	display: block;
	width: 4vw;
	height: 4vw;
	margin-right: 0.5vw;
	margin-left: 5.5vw;
}
.box02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 100;
	margin-left: 26vw;
	margin-top: 80vw;
	width: 70vw;
	height: 28vw;
	background: url("../img/sec01_box02.png") no-repeat center;
	background-size: 100% auto;
}
.numberbox {
  width: 70vw;
  margin-top: 15vw;
}
.numberbox #login-svr {
  padding: 0.8vw;
  margin-left: 4vw;
  font-family: "Noto Sans TC";
  font-size: 3vw;
  line-height: 6vw;
  width: 20vw;
  border: 0;
  color: #bababa;
  background-color: #ffffff;
}
.numberbox .enternumber {
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 3vw;
  color: #bababa;
  line-height: 6vw;
  background-color: #ffffff;
  margin-left: 0.5vw;
  text-align: center;
  width: 40vw;
}
.numberbox ::placeholder {
  /* CSS 3 標準 */
  color: #bababa;
}
.numberbox ::-webkit-input-placeholder {
  /* Chrome, Safari */
  color: #bababa;
}
.numberbox :-ms-input-placeholder {
  /* IE 10+ */
  color: #bababa;
}
.numberbox ::-moz-placeholder {
  /* Firefox 19+ */
  color: #bababa;
  opacity: 1;
}
.numberbox p.infop {
  font-size: 15px;
  clear: both;
  text-align: center;
  margin-top: 5px;
}
.numberbox p.infop .infoyl a {
  color: #fff14f;
  text-decoration: underline;
}
.numberbox p.infop .infook {
  margin: 0 5px 0 0;
}
.giftcodebox {
  display: block;
  position: absolute;
  top: 134vw;
  left: 12vw;
  width: 45vw;
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 3vw;
  color: #bababa;
  line-height: 8vw;
  background-color: #ffffff;
  text-align: center;
}
.btn_copy{
  display: block;
  position: absolute;
  top: 134vw;
  left: 57vw;
  width: 12vw;
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 3vw;
  color: #ffffff;
  line-height: 8vw;
  background-color: #675fb1;
  text-align: center;
  cursor: pointer;
}
.btn_share{
  display: block;
  position: absolute;
  top: 130.5vw;
  left: 77vw;
  width: 14vw;
  border: 0;
  font-family: "Noto Sans TC";
  font-size: 3vw;
  color: #ffffff;
  line-height: 8vw;
  background-color: #675fb1;
  text-align: center;
  cursor: pointer;
  border-radius: 2vw;
}
.cha01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 50;
	margin-left: -22vw;
	margin-top: 45vw;
	width: 60vw;
	height: 105vw;
	background: url("../img/cha01.png") no-repeat center;
	background-size: 100% auto;
}
.cha02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 99999;
	margin-left: 82vw;
	margin-top: 14vw;
	width: 18vw;
	height: 18vw;
	background: url("../img/cha02.png") no-repeat center;
	background-size: 100% auto;
}
.pre_agree{
	width: 54vw;
    margin-top: 112vw;
	margin-left: 40vw;
    background-size: cover;
    position: absolute;
    line-height: 3vw;
    color: #000000;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    font-size: 3vw;
    float: left;
    letter-spacing: 0vw;
}
.magic{
	display: block;
	width: 3vw;
	height: 3vw;
	margin-right: 0.5vw;
}
.register_web{
	display: none;
}
	
.register_mobile{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 50;
	margin-left: 34vw;
	margin-top: 119vw;
	width: 60vw;
	height: 14vw;
	background: url("../img/login_btn.png") no-repeat center;
	background-size: 100% auto;
	cursor: pointer;
	animation: big linear 2s infinite;
}

@-webkit-keyframes big {
	0% { transform: scale(0.95); filter: brightness(1); } 
	50% { transform: scale(1); filter: brightness(1.3); } 
	100% { transform: scale(0.95); filter: brightness(1); }
}
@keyframes big {
	0% { transform: scale(0.95); filter: brightness(1); } 
	50% { transform: scale(1); filter: brightness(1.3); } 
	100% { transform: scale(0.95); filter: brightness(1); }
}
.section_reward{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 252vw;
	background: url("../img/bg_m03.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
}
.goalcard01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 6vw;
	margin-top: 56vw;
	width: 26vw;
	height: 58vw;
	background: url("../img/goalcard01.png") no-repeat center;
	background-size: 100% auto;
}
.goalcard02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 36vw;
	margin-top: 56vw;
	width: 26vw;
	height: 58vw;
	background: url("../img/goalcard02.png") no-repeat center;
	background-size: 100% auto;
}
.goalcard03{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 66vw;
	margin-top: 56vw;
	width: 26vw;
	height: 58vw;
	background: url("../img/goalcard03.png") no-repeat center;
	background-size: 100% auto;
}
.goalcard04{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 21vw;
	margin-top: 117vw;
	width: 26vw;
	height: 58vw;
	background: url("../img/goalcard04.png") no-repeat center;
	background-size: 100% auto;
}
.goalcard05{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 30;
	margin-left: 51vw;
	margin-top: 117vw;
	width: 26vw;
	height: 58vw;
	background: url("../img/goalcard05.png") no-repeat center;
	background-size: 100% auto;
}
.goal01{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 0vw;
	margin-top: 50vw;
	width: 17vw;
	height: 17vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.goal02{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 30vw;
	margin-top: 50vw;
	width: 17vw;
	height: 17vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.goal03{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 60vw;
	margin-top: 50vw;
	width: 17vw;
	height: 17vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.goal04{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 15vw;
	margin-top: 111vw;
	width: 17vw;
	height: 17vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.goal05{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 40;
	margin-left: 45vw;
	margin-top: 111vw;
	width: 17vw;
	height: 17vw;
	background: url("../img/goal.png") no-repeat center;
	background-size: 100% auto;
}
.iphone_bg{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 20;
	margin-left: 5vw;
	margin-top: 178vw;
	width: 90vw;
	height: 41vw;
	background: url("../img/sec_iphone_bg_m.png") no-repeat center;
	background-size: 100% auto;
}
.iphone_text{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 20;
	margin-left: 5vw;
	margin-top: 179vw;
	width: 90vw;
	height: 38vw;
	background: url("../img/iphone_text_02_m.png") no-repeat center;
	background-size: 100% auto;
}
.iphone{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 20;
	margin-left: 5vw;
	margin-top: 178vw;
	width: 90vw;
	height: 41vw;
	background: url("../img/sec_iphone_01_m.png") no-repeat center;
	background-size: 100% auto;
}
.poringtoy{
	display: none;
}
.cha03{
	display: none;
}
.section_features{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 96.8vw;
	background: url("../img/bg_m04.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
}

.game-banner {
    position: absolute;
	margin-top: 31vw;
	margin-left: 9vw;
    width: 82vw;
	height: 34vw;
	z-index: 900;
}

.game-bg{
	z-index: 800;
	display: block;
	position: absolute;
	width: 86vw;
	height: 46vw;
	margin-top: 27vw;
	margin-left: 7vw;
	background: url("../img/sec03_box.png") no-repeat center;
	background-size: 100% auto;
}
.game-banner .gameSlider {
    width: 100%;
    height: 0;
    position: absolute;
	display: block;
    padding-bottom: 47%;
}

.game-banner .gameSlider ul {
    width: 100%;
}

.game-banner .gameSlider ul .gameSlider-li img {
    width: 100%;
    display: block;
}

.game-banner .gameSlider-pagination {
    margin-top: 44vw;
}


.section_notice{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 201vw;
	background: url("../img/bg_m05.jpg") no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	z-index: 2;
}
.notice_text{
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 20;
	margin-left: 5vw;
	margin-top: 5vw;
	width: 90vw;
	height: 185vw;
	background: url("../img/notice_m.png?v=220406") no-repeat center;
	background-size: 100% auto;
}	
	
	
	
}
@media screen and (max-width: 320px) {

}


.clearfix{
	overflow: hidden;
}

/*pop start*/
.pop_open01, .pop_open02, .career_test_web, .career_test_mobile, .career_test_ans_web, .career_test_ans_mobile {
    position:fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/noteback.png);
	background-repeat: repeat;
}
.pop_open03 {
    position:fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/noteback.png);
	background-repeat: repeat;
}

@media screen and (min-width: 769px) {
.picblock {
        width: 40vw;
		height: 24vw;
        position: absolute;
        left: 30vw;
        top: 10vw;
        overflow: hidden;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        transition-delay: .5s;
}
.pop_btn_cancel{
		display: block;
		float: left;
		width: 5vw;
		height: 5vw;
		margin-left: 35vw;
		margin-top: 0vw;
		position: absolute;
		cursor: pointer;
		transition: transform 1s;
}
.pop_btn_cancel:hover{
		transform: rotate(180deg);
	}
.pop_btn_cancel2{
		display: block;
		float: left;
		width: 5vw;
		height: 5vw;
		right: 2vw;
		top: 0vw;
		position: absolute;
		cursor: pointer;
		z-index: 99;
		transition: transform 1s;
}
.pop_btn_cancel2:hover{
		transform: rotate(180deg);
	}
.bg_04{
		background: url("../img/pop04.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.bg_01{
		background: url("../img/pop01.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.bg_12{
		background: url("../img/pop12.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.bg{
		background: url("../img/pop01.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.picblock1 {
        width: 50vw;
		height: 40vw;
        position: absolute;
        left: 25vw;
        top: 4vw;
        overflow: hidden;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        transition-delay: .5s;
}
	
.career_test_bg{
		background: url("../img/career_test_bg.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.career_test_q{
		width: 50vw;
		height: 40vw;
        position: absolute;
        left: 0vw;
        top: 0vw;
    	-moz-background-size: cover;
    	background-size: cover;
}
.career_sel{
		width: 32vw;
		height: 4vw;
        position: absolute;
        left: 9vw;
    	-moz-background-size: cover;
    	background-size: cover;
		cursor: pointer;
}
.career_sel:hover{
		transform: scale(1.02);
		filter: brightness(1.2);
		transition: 0.3s;
		cursor: pointer;
}
.sela{top: 24vw;}
.selb{top: 28vw;}
.selc{top: 32vw;}	

.career_ans_bg{
		background: url("../img/career_ans_bg.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.career_test_a{
		width: 50vw;
		height: 40vw;
        position: absolute;
        left: 0vw;
        top: 0vw;
    	-moz-background-size: cover;
    	background-size: cover;
}
.btn_retake_web{
		display: block;
		width: 14vw;
		height: 4vw;
        position: absolute;
        top: 32.5vw;
		left: 10vw;
    	-moz-background-size: cover;
    	background-size: cover;
		cursor: pointer;
}
.btn_retake_web:hover{
		transform: scale(1.02);
		filter: brightness(1.2);
		transition: 0.3s;
		cursor: pointer;
}
.btn_confirm_web{
		display: block;
		width: 14vw;
		height: 4vw;
        position: absolute;
		top: 32.5vw;
        left: 26vw;
    	-moz-background-size: cover;
    	background-size: cover;
		cursor: pointer;
}
.btn_confirm_web:hover{
		transform: scale(1.02);
		filter: brightness(1.2);
		transition: 0.3s;
		cursor: pointer;
}
.answer_text{
		display: block;
		width: 40vw;
		height: 3vw;
        position: absolute;
        top: 32.5vw;
		left: 5vw;
    	-moz-background-size: cover;
    	background-size: cover;
}
.pop_btn_confirm{
		display: block;
		width: 16vw;
		height: 4vw;
        position: absolute;
		top: 17vw;
        left: 13vw;
    	-moz-background-size: cover;
    	background-size: cover;
		cursor: pointer;
}
	
	
}

@media screen and (max-width: 768px) {
.picblock {
        width: 100vw;
		height: 56vw;
        position: absolute;
        left: 0vw;
        top: 40vw;
        overflow: hidden;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        transition-delay: .5s;
}
.pop_btn_cancel{
		display: inline-block;
		float: left;
		width: 10vw;
		height: 10vw;
		margin-left: 86vw;
		margin-top: 0vw;
		position: relative;
		cursor: pointer;
}
.pop_btn_cancel2{
		display: block;
		float: left;
		width: 12vw;
		height: 12vw;
		right: 0vw;
		top: 0vw;
		position: absolute;
		cursor: pointer;
		z-index: 99;
}
.bg_04{
		background: url("../img/pop04.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.bg_01{
		background: url("../img/pop01.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.bg_12{
		background: url("../img/pop12.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.bg{
		background: url("../img/pop01.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
	
.picblock1 {
        width: 100vw;
		height: 165vw;
        position: absolute;
        left: 0vw;
        top: 8vw;
        overflow: hidden;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        transition-delay: .5s;
}
	
.career_test_bg{
		background: url("../img/career_test_bg_m.png") center no-repeat;
    	-moz-background-size: cover;
    	background-size: cover;
}
.career_test_q{
		width: 100vw;
		height: 165vw;
        position: absolute;
        left: 0vw;
        top: 0vw;
    	-moz-background-size: cover;
    	background-size: cover;
}
.career_sel{
		width: 84vw;
		height: 10vw;
        position: absolute;
        left: 8vw;
    	-moz-background-size: cover;
    	background-size: cover;
		cursor: pointer;
}
.career_sel:hover{
		transform: scale(1.02);
		filter: brightness(1.2);
		transition: 0.3s;
		cursor: pointer;
}
.sela{top: 82vw;}
.selb{top: 104vw;}
.selc{top: 126vw;}

.btn_retake_web{
		display: none;
}
.btn_confirm_web{
		display: none;
}	
	
.btn_retake_mobile{
		display: block;
		width: 40vw;
		height: 10vw;
        position: absolute;
        top: 146vw;
		left: 9vw;
    	-moz-background-size: cover;
    	background-size: cover;
		cursor: pointer;
}
.btn_confirm_mobile{
		display: block;
		width: 40vw;
		height: 10vw;
        position: absolute;
        top: 146vw;
		left: 51.5vw;
    	-moz-background-size: cover;
    	background-size: cover;
		cursor: pointer;
}
.answer_text{
		display: block;
		width: 86vw;
		height: 12vw;
        position: absolute;
        top: 143vw;
		left: 7vw;
    	-moz-background-size: cover;
    	background-size: cover;
		cursor: pointer;
}
.pop_btn_confirm{
		display: block;
		width: 44vw;
		height: 8vw;
        position: absolute;
		top: 39vw;
        left: 30vw;
    	-moz-background-size: cover;
    	background-size: cover;
		cursor: pointer;
}
	
}
/*pop end*/