@charset "utf-8";
/* CSS Document */
.logo{
	position:fixed;/* absolute*/
	width:13.9%;/*278*/
	z-index:3;
	left:.5vw;/*10*/
	top:.5vw;/*10*/
	/**/
	transition: all .5s;
	}
.logo::before{
	position: relative;
	width:100%;/*278*/
	padding-bottom:43.165%;/*120*/
	content:"";
	display:block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/logo.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	}
.logo.on{width:10.5%;/*210*/}
/**/
.bg{
	position:relative;
	width: 100%;
	min-height:95vh;
	overflow: hidden;
	/**/
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	/**/
	background-attachment: scroll;
	background-repeat:repeat,no-repeat;
	background-position:50% 0%;
	background-image:url(../images/bga.png),url(../images/topupbg.jpg);
	background-size:auto auto,cover;
	}
/**/
.tpbx{
	position:relative;
	width:560px;
	margin:0 auto;
	display:block;
	/*padding:28px 0 0; */
	/**/
  	-webkit-filter: drop-shadow(0 10px 25px rgba(37, 39, 42, .8));
  	filter: drop-shadow(0 10px 25px rgba(37, 39, 42, .8));
	/**/
	transition: all .5s;
	}
.tpbx.on{width:1000px;}
.tpbx.on::before,.tpbx.on::after{
	position:relative;
	width:100%;
	content:"";
	display:block;
	}
.tpbx.on::before{padding-bottom:7%;}
.tpbx.on::after{padding-bottom:7%;}
.tpbx > div{
	position:relative;
	width:100%;
	min-height:200px;
	/**/
	transition: all .5s;
	}
.tpbx > div .br1{
	position:absolute;
	width:100%;
	height: 100%;
	display:block;
	pointer-events: none;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%,100% 0%,0% 100%,100% 100%;
	background-image:url(../images/tpbx_01.png),url(../images/tpbx_03.png),url(../images/tpbx_07.png),url(../images/tpbx_09.png);
	/*background-size:150px auto;*/
	top: 0;
	left: 0;
	z-index:1;
	}
.tpbx > div .br1::before{
	position:absolute;
	width:calc(100% - 296px);
	height:calc(100% - 296px);
	display:block;
	content:"";
	background-attachment:scroll;
	background-repeat:repeat;
	background-position:50% 50%;
	background-image:url(../images/tpbx_05.png);
	/*background-size:150px auto;*/
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	}
.tpbx > div::after,.tpbx > div::before{
	position:absolute;
	display:block;
	content:"";
	pointer-events: none;
	background-attachment:scroll;
	}
.tpbx > div::after{
	width:100%;
	height:calc(100% - 298px);
	background-repeat:repeat-y;
	background-position:0% 50%,100% 50%;
	background-image:url(../images/tpbx_04.png),url(../images/tpbx_06.png);
	/*background-size:150px auto,150px auto;*/
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	}
.tpbx > div::before{
	width:calc(100% - 298px);
	height: 100%;/*100.01*/
	display:block;
	background-repeat:repeat-x;
	background-position:50% 0%,50% 100%;
	background-image:url(../images/tpbx_02.png),url(../images/tpbx_08.png);
	/*background-size:auto 150px;*/
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	}
/**/
.tit_1{
	position: absolute;
	width:500px;/**/
	display: block;
	pointer-events: none;
	top:-28px;
	left: 50%;
	transform: translateX(-50%);
	z-index:1;
	/**/
	transition: all .5s;
	}
.tit_1::before{
	position: absolute;
	width:100%;/*500*/
	padding-bottom:32%;/*160*/
	display: block;
	content: "";
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/tit_1.png);
	background-size: 100% auto;
	top:0%;
	left:0%;
	/**/
	transition: all .5s;
	}
.con{
	position:relative;
	width:85%;
	min-height:300px;
	margin:0 auto;
	padding:5px 0;
	/**/
	font-size:1.33rem;/*15*/
	line-height:2rem;
	color:#2e313b;
	z-index: 1;
	}
.con::before,.con::after{
	position: relative;
	width: 100%;
	content: "";
	display: block;
		}
.con::before{padding-bottom:26%;}
.con::after{padding-bottom:10.5%;}
/**/
/*.tpbx.on .con::before{padding-bottom:10%;}
.tpbx.on .con::after{padding-bottom:5.5%;}*/
/**/
.tpbx.on .con::before{padding-bottom:13.6%;}
.tpbx.on .con::after{padding-bottom:10%;}

.fr1,.fr2{
	position: absolute;
	width: 70px;
	padding-bottom: 70px;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% auto;
	z-index: 1;
	/**/
	}
.fr1{
	background-image: url(../images/fr1.png);
	left:87px;
	bottom: -25px;
	}
.fr2{
	background-image: url(../images/fr3.png);
	right: 87px;
	bottom: -25px;
	}



.cn1{
	position:relative;
	width: 100%;
	display: none;
	margin:0 auto;
	}
.con input,.con select{
	position:relative;
	width:100%;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:1.5rem;/*16*/
	color:#2e313b;
	height:3rem;/*38*/
	line-height:3rem;
	border-radius:3px;
	border:1px solid #dcdde1;
	padding:0 8px;
	margin:0 auto;
	/**/
	transition: all .5s;
	}
.con select{
	width:107%;
	left: -7%;
	outline:none;
	-webkit-appearance: none; /*Chrome*/
	-moz-appearance: none;/*FF*/
	-ms-appearance: none;
	-o-appearance: none;
	appearance:none;/*CSS3*/
	background-color:#FFF; 
	background-image: url(../images/se-down.svg);
	background-attachment:scroll;
	background-repeat: no-repeat;
	background-position:100% 50%;
	}
.con select::-ms-expand{display:none;}
.con input:focus,.con select:focus{border: 1px solid #f79a2c;}
.con ::-webkit-input-placeholder{color:#979797;}
.con :-ms-input-placeholder{color:#979797;}
.con ::placeholder{color:#979797;}
.con .tc_1,.con .tc_1a{
	position:relative;
	width:70%;
	padding:0 0 0 50px;
	text-align:center;
	margin:0 auto 15px;
	}
.con .tc_1a{
	padding:5px 0 5px 96px;
	font-size:1.6rem;
	text-align:left;
	overflow: hidden;
  	white-space: nowrap;
  	text-overflow: ellipsis;
	}
.con .tc_1 > p,.con .tc_1a > p{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size:1.6rem;
	font-weight:500;
	color:#515663;
	}
.con .tc_2{
	position:relative;
	padding:5px 0 10px;
	text-align:center;
	font-size:1.5rem;/*15*/
	}
.con .tc_3{
	position:relative;
	text-align:center;
	padding:8px 0 15px;
	}
.con .tc_3 a{
	position: relative;
	width: 55px;
	padding-bottom: 55px;
	display: inline-block;
	border-radius: 15px;
	margin: 0 6px;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% auto;
	}
.ios_lo{background-image:url(../images/ios_logo.jpg);}
.google_lo{background-image:url(../images/google_logo.jpg);}	
.fb_lo{background-image:url(../images/fb_logo.jpg);}
.loginbt{
	position:relative;
	width:230px;
	display:block;
	margin:0 auto;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/inbt_1.png);
	background-size:100% auto;
	}
.loginbt::before{
	position:relative;
	width:100%;/*500*/
	padding-bottom:24%;/*120*/
	content:"";
	display: block;
	opacity:0;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/inbt_1a.png);
	background-size:100% auto;
	transition: all .5s;
	}
.loginbt:hover::before{opacity:1;}
/**/
.bt1bx{
	position:relative;
	display:block;
	margin:0 auto;
	padding:8px 0 0;
	text-align:center;
	/**/
	transition: all .5s;
	}
.bt1bx a{
	position:relative;
	width:124px;
	display:inline-block;
	font-size:1.5rem;
	color:#FFF;
	margin:0 5%;
	}
.bt1bx a::before{
	position:relative;
	width:100%;/*270*/
	padding-bottom:44.4%;/*120*/
	content:"";
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/bt1a.png);
	background-size:100% auto;
	}
.bt1bx a::after{
	position:absolute;
	width:100%;/*270*/
	height:100%;
	content:"";
	display: block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/bt1b.png);
	background-size:100% auto;
	top:0;
	left:0;
	opacity:0;
	transition: all .5s;
	}
.bt1bx a:hover::after{opacity:1;}
.opy{opacity:0;}

.bt1bx a p{
	position:absolute;
	width:100%;
	display:inline-block;
	color:#FFF;
	top: 50%;
	left:0%;
	transform: translateY(-50%);
	z-index:1;
	}
.tc_a{
	position:relative;
	width:95%;
	display:none;
	background-attachment: scroll;
	background-repeat:repeat-x;
	background-position:50% 100%;
	background-image:url(../images/s1.png);
	margin:0 auto;
	text-align:center;
	padding:0 0 20px;
	opacity:0;
	/**/
	transition: all .8s;
	}
.tc_a.on{display:block;}
	
.tc_a > div{
	position:relative;
	width:310px;/*calc(100% / 3)*/
	display:block;
	margin:0 auto;
	text-align:left;/**/
	font-size:1.8rem;
	padding:9px 0;
	}
.tc_a > div > p{
	position:relative;
	display:inline-block;
	font-weight: 500;
	color: #515663;
	padding-right:5px;
	}
	
.mycardbx{
	position:relative;
	width:100%;
	display: none;
	margin:0 auto;
	text-align:center;
	padding:20px 0 20px;
	opacity:0;
	/**/
	transition: all .5s;
	}
.mycardbx.on{display:block;}
.mycardbx li{
	position:relative;
	display:inline-block;
	padding:5px;
	/**/
	transition: all .5s;
	}
.mycardbx input{display:none;}
.mycardbx .mcon{
	position:relative;
	width:180px;
	padding-bottom:188px;/*214*/
	display:block;
	cursor:pointer;
	/*overflow:hidden;*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/mybx_1.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	/**/
  	-webkit-filter: drop-shadow(0 0 0 rgba(37, 39, 42, 0));
  	filter: drop-shadow(0 0 0 rgba(37, 39, 42, 0));
	}
.mycardbx .mcon:hover{
	/**/
  	-webkit-filter: drop-shadow(0 5px 25px rgba(37, 39, 42, .2));
  	filter: drop-shadow(0 5px 25px rgba(37, 39, 42, .2));
	z-index:1;
	}
.mycardbx .mcon p{
	position: absolute;
	width:100%;
	height:100%;
	display:block;
	pointer-events:none;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/mybx_2.png);
	background-size:100% auto;
	opacity:0;
	/**/
	transition: all .5s;
	top:0;
	left:0;
	}
.mycardbx input[type="radio"]:checked+.mcon p{
           opacity:1;
        }
.nf1,.nf2{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	/**/
	font-size:1.33rem;/*16*/
	line-height:2rem;/*25*/
	color:#353a48;
	}
.nf1{
	width:80%;
	top:23%;
	text-align:center;
	}
.nf1 .nb{font-size:1.5rem;/*18*/}	
.nc{color:#9a5b24;}
.nf2{
	width:60.5%;
	bottom:13.5%;
	}
.nf2 > div{position:relative;}
.nf2 > div:nth-child(1){
	font-size:1.83rem;/*22*/
	line-height:2.6rem;/*30*/
	font-weight: bold;
	text-align:center;/*left*/
	}
.nf2 > div:nth-child(2){text-align:center;/*right*/}
.nf2 > div:nth-child(2) .nb2{font-size:2rem;/*25*/}
.first{
	position: absolute;
	width:46.6%;/*84*/
	padding-bottom:23.3%;/*42*/
	display: block;
	pointer-events:none;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/first.png);
	background-size:100% auto;
	top: -1.5%;
	left: 26%;
	z-index: 1;
	}
/**/			
#light_bx2{
	position:fixed;
	width:100%;
	height:100vh;
	height:calc(var(--vh, 1vh) * 100);
	backdrop-filter: blur(3px);
	top:0;
	left:0;
	background-color:rgba(0,0,0,.95);
	text-align:center;
	overflow:auto;
	display:none;/**/
	}
#light_bx2{z-index:20;}
#light_bx2 > div{
	position:relative;
	width:100%;
	min-height:100vh;
	min-height:calc(var(--vh, 1vh) * 100);
	/**/
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	}
.msbx1{
	position:relative;
	width:350px;/*488*/
	display:none;/**/
	}
.msbx1 > div{
	position:relative;
	width:100%;
	display:block;
	/**/
	background-attachment: scroll;
	background-repeat:repeat-y;
	background-position:50% 50%;
	background-image:url(../images/b_bx3_02.png);
	background-size:100% auto;
	}
.msbx1 > div .con_1{
	position:relative;
	width:82%;
	min-height:50px;
	margin:0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
	/**/
	font-size:1.33rem;/*15*/
	line-height:2rem;
	color:#2e313b;
	}
.msbx1 .clos{
	position:absolute;
	width:60px;
	display: block;
	cursor:pointer;
	right:0;
	bottom:91%;
	z-index:1;
	}
.msbx1 .clos::before{
	position:relative;
	width:100%;
	padding-bottom:100%;
	content:"";
	display: block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/clos.png);
	background-size:100% auto;
	top:0;
	left:0;
	}
.msbx1::before,.msbx1::after{
	position:relative;
	width:100%;
	padding-bottom:13.72%;/*67*/
	content:"";
	display: block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.msbx1::before{
	background-position:50% 100%;
	background-image:url(../images/b_bx3_01.png);
	}
.msbx1::after{
	background-position:50% 0%;
	background-image:url(../images/b_bx3_03.png);
	}
	
/**/
/*.mycardbx .mcon{
	width:150px;
	padding-bottom:178px;
	}
.nf1,.nf2{
	font-size:1.2rem;
	line-height:1.6rem;
	}
.nf1 .nb{font-size:1.35rem;}
.nf2{
	width:62.5%;
	bottom:14%;
	}
.nf2 > div:nth-child(1){
	font-size:1.6rem;
	line-height:2rem;
	}
.nf2 > div:nth-child(2) .nb2{font-size:1.6rem;}*/
.p1{
	position:absolute;
	width:750px;/*750px*/
	height:100%;
	display:block;
	pointer-events:none;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:100% 20%;
	background-image:url(../images/p1.png);
	background-size:100% auto;
	right: 0;
	bottom: 0;
	/**/
	transition: all .5s;
	}
.p1.on{
	background-position:100% 90%;
	background-size:auto 100%;
	right: -8%;
	}
#kkb{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:3;
	pointer-events:none;
	overflow:hidden;
	}	

@media only screen and (max-width:1800px){
/**/

}
@media only screen and (max-width:1600px){
/**/
.p1.on{right: -16%;}
}
@media only screen and (max-width:1400px){
/**/
.p1.on{right: -25%;}
/*.tpbx.on{width:1200px;}*/
/*
.tpbx.on .con::before{padding-bottom:11%;}
.tpbx.on .con::after{padding-bottom:5.5%;}*/
.p1{
	width:700px;
	right: -5%;
	}
}
@media only screen and (max-width:1200px){
/**/
.p1.on{ opacity:0;right: -30%;}
/*.tpbx.on{width:1000px;}	*/
/*
.tpbx.on .con::before{padding-bottom:12%;}
.tpbx.on .con::after{padding-bottom:6%;}*/
.tc_a{ padding:10px 0;}
.tc_a > div{
	display:block;
	margin:0 auto;
	text-align:left;
	padding:9px 0;
	}
.p1{
	width:700px;
	right: -10%;
	}
}
@media only screen and (max-width:1000px){	
/**/
.tpbx.on{width:800px;}
/**/
.tpbx.on .con::before{padding-bottom:14%;}
.tpbx.on .con::after{padding-bottom:7%;}
.mycardbx .mcon{
	width:150px;
	padding-bottom:157px;
	}
.nf1,.nf2{
	font-size:1.2rem;
	line-height:1.6rem;
	}
.nf1 .nb{font-size:1.35rem;}
.nf2{
	width:62.5%;
	bottom:14%;
	}
.nf2 > div:nth-child(1){
	font-size:1.6rem;/*22*/
	line-height:2rem;/*30*/
	}
.nf2 > div:nth-child(2) .nb2{font-size:1.6rem;/*25*/}
	
	
	
}
@media only screen and (max-width:900px){
/**/
.p1,.p1.on{ display:none;}
}
@media only screen and (max-width:800px){
/**/
.tpbx.on{width:700px;}
/**/
.tpbx.on .con::before{padding-bottom:16%;}
.tpbx.on .con::after{padding-bottom:8%;}	
}	
@media only screen and (max-width:780px){
/**/
.logo{
	position:absolute;
	width:37.435%;/*292*/
	left:0;
	top:1.282vw;/*10*/
	}
.logo.on{
	width:26.923%;/*210*/
	left:.512vw;/*4*/
	top:1.794vw;/*14*/
	}
/**/
.tpbx.on::before{padding-bottom:25%;}
.tpbx.on::after{padding-bottom:25%;}	
.mycardbx {
  	width: 110%;
	left:-5%;
	}
	
.fr1,.fr2{
	width: 60px;
	padding-bottom: 60px;
	}
.fr1{
	left:78px;
	bottom: -18px;
	}
.fr2{
	right: 78px;
	bottom: -18px;
	}
	
}
@media only screen and (max-width:600px){ 
/**/
.tpbx,.tpbx.on{
	width:98vw;/*600px*/
	margin:0 auto;
	padding:4.6vw 0 0; /*28*/
	/**/
  	-webkit-filter: drop-shadow(0 .38vw 4.16vw rgba(37, 39, 42, .8));/*10 25*/
  	filter: drop-shadow(0 .38vw 4.16vw rgba(37, 39, 42, .8));
	}
/**/
.tpbx.on .con::before{padding-bottom:20%;}
.tpbx.on .con::after{padding-bottom:12%;}
	
.tpbx > div .br1{background-size:25vw auto;}/*150*/
.tpbx > div .br1::before{
	width:calc(100% - 49.5vw);/*299*/
	height:calc(100% - 49.5vw);
	background-size:25vw auto;/*150*/
	}
.tpbx > div::after{
	height:calc(100% - 49.5vw);
	background-size:25vw auto;/*150*/
	}
.tpbx > div::before{
	width:calc(100% - 49.5vw);
	background-size:auto 25vw;/*150*/
	}	
.tit_1{width:83.3vw;/*500*/top:-4.6vw;/*28*/}
/**/
.tpbx.on::before{padding-bottom:13%;}
.tpbx.on::after{padding-bottom:13%;}	
/**/
.fr1,.fr2{
	width: 12vw;
	padding-bottom: 12vw;
	}
.fr1{
	left:16vw;
	bottom: -4vw;
	}
.fr2{
	right: 16vw;
	bottom: -4vw;
	}
	
}
@media only screen and (max-width:580px){
/**/
.con input, .con select {font-size: 1.4rem;}
.con select {
  	width: 110%;
	left: -10%;
	}
.con .tc_1,.con .tc_1a{width:80%;}
.con .tc_2{
	padding:3px 0 8px;
	font-size:1.35rem;/*15*/
	}
.con .tc_1{
	padding:0 0 0 42px;
	margin:0 auto 12px;
	}
.con .tc_1 > p,.con .tc_1a > p{font-size:1.4rem;}
.con .tc_1a{
	padding:0 0 0 85px;
	font-size:1.4rem;
	}	
.loginbt {width: 200px;}
.bt1bx a{
	width:108px;
	font-size:1.4rem;
	margin: 0 3.5%;
	}
.tc_a > div{
	width:245px;
	font-size:1.4rem;
	padding:8px 0;
	}
	
}
@media only screen and (max-width:560px){
/**/
.tit_1{
	width: 88.3vw;
	top: -5vw;
	}
}
@media only screen and (max-width:470px){
/**/
.mycardbx li {padding:5px 3px;}
.mycardbx .mcon{
	width:130px;
	padding-bottom:136px;/*155*/
	}
	
.nf1,.nf2{
	font-size:1.2rem;
	line-height:1.45rem;
	}
.nf1 .nb{font-size:1.3rem;}
.nf2 > div:nth-child(1){
	font-size:1.5rem;/*22*/
	line-height:1.8rem;/*30*/
	}
.nf2 > div:nth-child(2) .nb2{font-size:1.5rem;/*25*/}
}

@media only screen and (max-width:380px){
/**/
.msbx1{width:100%;/*488*/}
.msbx1 > div .con_1{
	/**/
	font-size:1.25rem;/*15*/
	line-height:1.8rem;
	}
.msbx1 .clos{width:50px;}
	
	
}
@media only screen and (max-width:360px){
/**/

}
@media only screen and (max-width:340px){
/**/
.con .tc_1,.con .tc_1a{width:90%;}

}