@charset "utf-8";
/* CSS Document */
/**/			
#light_bx,#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_bx{z-index:19;}
#light_bx2{z-index:20;}
#light_bx > div,#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,.msbx1 > div .con_1a{
	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:#FFF;
	}
.msbx1 > div .con_1a > span{
	position:relative;
	width:100%;
	display:none;
	}
.nambx{
	position:relative;
	padding:8px 0 0;
	}
.nambx input{
	position:relative;
	width:70%;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:1.33rem;/*16*/
	color:#585858;
	height:2.5rem;/*38*/
	line-height:2.5rem;
	border-radius:3px;
	border: 1px solid #f3f3f3;
	padding:3px 5px;
	margin:0 auto;
	}
.fi{
	position:relative;
	font-size:1.2rem;/*15*/
	line-height:1.8rem;
	color:#ff5297;
	display:block;
	padding:10px  0 0 ;
	/*margin:0 auto 5px;*/
	}
.nam{
	position: relative;
	font-size: 1.8rem;/*15*/
	line-height: 2.5rem;
	display: block;
	margin: 15px auto 0;
	font-weight: 500;
	}
.bt1bx{
	position:relative;
	display:block;
	margin:0 auto;
	padding:5px 0 0;
	text-align:center;
	top:8px;
	z-index:1;
	}
.bt1bx a{
	position:relative;
	width:30%;
	display:inline-block;
	color:#FFF;
	margin:0 3%;
	}
.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;}
.bt1bx a p{
	position:absolute;
	width:100%;
	display:inline-block;
	color:#FFF;
	top: 50%;
	left:0%;
	transform: translateY(-50%);
	z-index:1;
	}	
	
.msbx1 .clos{
	position:absolute;
	width:60px;
	display: block;
	cursor:pointer;
	right:0;
	bottom:91%;
	z-index:1;
	}
.ytvd .clos{
	position:absolute;
	width:66px;
	display: block;
	cursor:pointer;
	right:2%;
	bottom:95%;
	z-index:1;
	}
.loginbx .clos{
	position:absolute;
	width:66px;
	display: block;
	cursor:pointer;
	right: 2%;
	bottom: 94%;
	z-index:1;
	}
.msbx1 .clos::before,.ytvd .clos::before,.loginbx .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);
	}	
.ytvd{
	position:relative;
	width:850px;/*850*/
	display:none;/**/
	}
.ytvd::after{
	position:relative;
	width:100%;
	padding-bottom:59.529%;/*506*/
	content:"";
	display: block;
	pointer-events:none;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/b_bx1.png);
	background-size:100% auto;
	}
.ytvd > div{
	position:absolute;
	width:91.8%;/*781*/
	border: 1px solid #324651;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	}
.ytvd .vdx {
  	position: relative;
  	width: 100%;
  	padding-bottom: 56.25%;
  	background-color:#000;
  	overflow: hidden;
  	cursor: pointer;
	}
.ytvd .vdx video,
.ytvd .vdx iframe,.ytvd .vdx img{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99.9%;
	}
	
.loginbx{
	position:relative;
	width:550px;/*605*/
	display:none;
	}	
.loginbx > div{
	position:relative;
	width:100%;
	display:block;
	/**/
	background-attachment: scroll;
	background-repeat:repeat-y;
	background-position:50% 50%;
	background-image:url(../images/b_bx2_02.png);
	background-size:100% auto;
	z-index:1;
	}
.loginbx > div .con_2{
	position:relative;
	width:70%;
	min-height:50px;
	margin:0 auto;
	padding:5px 0;
	/**/
	font-size:1.33rem;/*15*/
	line-height:2rem;
	color:#FFF;
	}
.loginbx > div .con_2 input{
	position:relative;
	width:100%;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:1.33rem;/*16*/
	color:#585858;
	height:3rem;/*38*/
	line-height:3rem;
	border-radius:3px;
	border: 1px solid #f3f3f3;
	padding:3px 5px;
	margin:0 auto;
	}
.loginbx > div .con_2 ::-webkit-input-placeholder{color:#979797;}
.loginbx > div .con_2 :-ms-input-placeholder{color:#979797;}
.loginbx > div .con_2 ::placeholder{color:#979797;}
	
.loginbx .np2{
	position: absolute;
	width: 100%;
	padding-bottom:63.96%;/*387*/
	display: block;
	pointer-events:none;
	bottom: 0;
	left: 0;
	/**/
	background-attachment: scroll;
	background-repeat:repeat-y;
	background-position:50% 50%;
	background-image:url(../images/b_bx2_a.png);
	background-size:100% auto;
	z-index: 1;
	}
.loginbx .tit_k1{
	position: absolute;
	width: 100%;
	padding-bottom:24.793%;/*150*/
	display: block;
	pointer-events:none;
	top:0;
	left: 0;
	/**/
	background-attachment: scroll;
	background-repeat:repeat-y;
	background-position:50% 50%;
	background-image:url(../images/tit_k1.png);
	background-size:auto 100%;
	z-index: 1;
	}
.tk1{
	position:relative;
	width: 100%;
	padding-bottom: 13%;
	display: block;
	}
.loginbx > div .con_2 .tc_1{
	position:relative;
	padding:5px 0 10px;
	text-align:center;
	font-size:1.5rem;/*15*/
	}
.loginbx > div .con_2 .tc_2{
	position:relative;
	width:85%;
	padding:0 0 0 50px;
	text-align:center;
	margin:0 auto 15px;
	}
.loginbx > div .con_2 .tc_2 > p{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size:1.5rem;
	font-weight:500;
	color:#99d3f5;
	}
.loginbx > div .con_2 .tc_3{
	position:relative;
	text-align:center;
	padding:6px 0 0;
	}
.loginbx > div .con_2 .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);}
	
.loginbx::before,.loginbx::after{
	position:relative;
	width:100%;
	padding-bottom:14.87%;/*90*/
	content:"";
	display: block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-size:100% auto;
	}
.loginbx::before{
	background-position:50% 100%;
	background-image:url(../images/b_bx2_01.png);
	}
.loginbx::after{
	background-position:50% 0%;
	background-image:url(../images/b_bx2_03.png);
	}
.inbt{
	position:relative;
	width:230px;
	display: block;
	margin:auto;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/inbt_1.png);
	background-size:100% auto;
	top:20px;
	}
.inbt::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;
	}
.inbt:hover::before{opacity:1;}
	
	

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

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

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

}
@media only screen and (max-width:1000px){	
/**/
.ytvd{width:80%}
}
@media only screen and (max-width:800px){
/**/
.ytvd{width:100%}
}	
@media only screen and (max-width:780px){
/**/
}
@media only screen and (max-width:685px){ 
/**/
.loginbx{
	width:80%
	right: 2%;
	bottom: 93%;
	}
}
@media only screen and (max-width:580px){
/**/
.loginbx{
	width:100%
	right: 1%;
	bottom: 95%;
	}	
.loginbx > div .con_2 .tc_2{width:100%;}
.loginbx > div .con_2 .tc_1{
	padding:3px 0 8px;
	font-size:1.35rem;/*15*/
	}
.loginbx > div .con_2 .tc_2{
	padding:0 0 0 42px;
	margin:0 auto 12px;
	}
.loginbx > div .con_2 .tc_2 > p{
	font-size:1.35rem;
	}
.loginbx > div .con_2 .tc_3 a{
	width: 50px;
	padding-bottom: 50px;
	}
	
}
@media only screen and (max-width:560px){
/**/

}
@media only screen and (max-width:480px){
/**/
.loginbx .tit_k1{
	padding-bottom:25%;/*150*/
	}
.tk1 {padding-bottom: 15%;}
}

@media only screen and (max-width:380px){
/**/
.msbx1{width:100%;/*488*/}
.msbx1 > div .con_1,.msbx1 > div .con_1a{
	/**/
	font-size:1.25rem;/*15*/
	line-height:1.8rem;
	}
.fi{
	font-size:1.1rem;
	line-height:1.3rem;
	}
.nam{
	font-size: 1.6rem;
	line-height: 2.2rem;
	}
.bt1bx a{
	position:relative;
	width:36%;}
	
.msbx1 .clos{width:50px;}
.ytvd .clos{width:50px;}
.loginbx .clos{
	width:50px;
	right: 2%;
	bottom: 95%;
	}
.loginbx > div .con_2{
	/**/
	font-size:1.25rem;/*15*/
	}
.loginbx > div .con_2 input{
	font-size:1.25rem;/*16*/
	height:2.8rem;
	line-height:2.8rem;
	}


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

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

}