﻿@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
	list-style-type:none;
	}
a,img {
	outline: none;/* for Firefox */
    hlbr:expression(this.onFocus=this.blur()); /* for IE */	
	}
input,textarea{outline:none;} /*消除chrome黃色框*/
textarea{resize:none;} /*不要縮放*/	
img, div {border:0px;}
a:link {
	color: #ff9000;
	text-decoration:none;
}
a:visited {
	text-decoration:none;
	color:#ff9000;
}
a:hover{
	text-decoration: none;
	color: #ffae00;
}
a:active {
	text-decoration: none;
	color: #ff9000;
}
html{font-size:75%;}
body{
	font-size:1rem;
	word-wrap:break-word;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	/**/
	-webkit-text-size-adjust:100%;
	background-color:#000;
	}
*{	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	}
.tas{
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}	
/**/
body{}
#kkb{
	position:absolute;
	width:100%;
	height:100%;
	/*display:none;*/
	left:0;
	top:0;
	/*z-index:3;*/
	pointer-events:none;
	overflow:hidden;
	}
.logo{
	position:absolute;
	width:18.3%;/*366*/
	padding-bottom:7.85%;/*157*/
	display:block;
	left:1.7%;/*34*/
	top:1.2vw;/*24 2.4%*/
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/logo.png);
	background-size:100% auto;
	/*z-index:1;*/
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
/*版宣*/
footer{
	position:relative;
	padding:3vw 0;
	font-family:Arial,'微軟正黑體',sans-serif;/*'Noto Sans TC',*/
	font-size:1rem;
	line-height:1.5rem;
	color:#fff;
	background-color:#000;
	overflow:hidden;
	text-align:center;
	/**/
    display: flex;
    justify-content: center;
    align-items: center;
	/**/
	transition: all .5s;
	}	
footer .cybx{
	position:relative;
	display:block;
	font-size:1rem;
	color:#FFF;
	text-align:left;
	margin:0 auto;
	/**/
	transition: all .5s;
	}
footer .cybx  span{
	position:relative;
	display:inline-block;
	margin:0 .25rem;
	padding:0 56px 0 0;
	}
footer .cybx  span > p{
	display:block;
	padding-bottom:.25rem;
	}
footer .cybx img{
	display:block;
	/**/
	transition: all .5s;
	}
footer .gf2{position:relative;height:45px;margin:0 10px 0 0;}
footer .gr15{
	position:absolute;
	width:46px;/*58*/
	right:0;
	}
footer .cybx > div{
     position:relative;
	 /**/
      display:flex;
      justify-content: center;
      align-items: center;
	}
/*右選單*/
.r_mubx{
	position:fixed;
	width:214px;/**/
	right:0;
	top:60%;
	transform:translateY(-50%);
	z-index:3;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.r_mubx.on{width:0;}

.p_mes{
	position:absolute;
	width:78.5%;/*168 78.5*/
	padding-bottom:34.1%;/*73*/
	display:block;
	/**/
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/p_mes.png);
	background-size:100% auto;
	bottom:95.8%;
	right:1.8%;
	}
.r_mu{
	position:relative;
	width:100%;
	overflow:hidden;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	/**/
  	-webkit-filter: drop-shadow(0 0 30px rgba(29, 13, 50, .6));
  	filter: drop-shadow(0 0 30px rgba(29, 13, 50, .6));
	}
.r_mu2{
	position:relative;
	width:214px;
	height:429px;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/r_mu_bg.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.rt_mubx{
	position:relative;
	width:79.906%;/*171*/
	padding-bottom:34.5792%;/*74*/
	display:block;
	margin:0 0 0 20.09%;/*43*/
	}
.rt_mubx > a{
	position:absolute;
	height:100%;
	top:0;
	display:block;
	}
.rt_mubx > a.fbbt_r{
	position:absolute;
	width:40%;
	left:0;
	/*background-color:#0C0;*/
	}
.rt_mubx > a.homebt_r{
	position:absolute;
	width:40%;
	left:40%;
	/*background-color:#09F;*/
	}
.rc_mubx{
	position:relative;
	width:70.09%;/*150*/
	display:block;
	margin:0 0 0 20.09%;/*43*/
	}
.rc_mubx > a{
	position:relative;
	width:100%;
	display:block;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	}
.rc_mubx > a::before{
	position:absolute;
	width:100%;
	height:100%;
	display: block;
	content: "";
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-size:100% auto;
	transition: all .5s;
	top:0;
	left:0;
	opacity:0;
	}
.rc_mubx > a:hover::before{opacity:1;}
.rc_mubx > a.r_mu_1{
	padding-bottom:35.33%;/*53*/
	background-image:url(../images/r_mu_1.png);
	}
.rc_mubx > a.r_mu_1::before{
	background-image:url(../images/r_mu_1a.png);
	}
.rc_mubx > a.r_mu_2{
	padding-bottom:32.6%;/*49*/
	background-image:url(../images/r_mu_2.png);
	}	
.rc_mubx > a.r_mu_2::before{
	background-image:url(../images/r_mu_2a.png);
	}
.rc_mubx > a.r_mu_3{
	padding-bottom:34%;/*51*/
	background-image:url(../images/r_mu_3.png);
	}	
.rc_mubx > a.r_mu_3::before{
	background-image:url(../images/r_mu_3a.png);
	}
.rc_mubx > a.r_mu_ios{
	padding-bottom:32%;/*48*/
	background-image:url(../images/r_mu_ios.png);
	}
.rc_mubx > a.r_mu_google{
	padding-bottom:34%;/*51*/
	background-image:url(../images/r_mu_google.png);
	}	
.rc_mubx > a.r_mu_go{
	padding-bottom:44.6%;/*67*/
	background-image:url(../images/r_mu_go.png);
	}
.rc_mubx > a.r_mu_go::before{
	background-image:url(../images/r_mu_goa.png);
	}
.rtp_bt{
	position:absolute;
	width:70%;/*171*/
	padding-bottom:16.822%;/*36*/
	display:block;
	cursor: pointer;
	margin:0 0 0 20.09%;/*43*/
	right:9.906%;
	bottom:0;
	/*background-color:#09F;*/
	}
.r_cl{
	position:absolute;
	width:23.36%;/*50*/
	padding-bottom:18.688%;/*40*/
	cursor: pointer;
	left:0;
	top:48.351%;/*207*/
	/*background-color:#09F;*/
	}
.r_cl{display:block;}
.r_op{
	position:absolute;
	width:50px;/*50*/
	padding-bottom:40px;/*40*/
	cursor: pointer;
	left:0;
	top:48.351%;/*207*/
	display:none;
	pointer-events:none; 
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/r_op.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.r_mubx.on .r_op{display:block;}
.r_op.on{
	pointer-events:auto;
	left:-40px;
	}
/**/			
#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,.9);
	z-index:20;
	text-align:center;
	overflow:auto;
	display:none;/**/
	}
#light_bx::-webkit-scrollbar,#light_bx2::-webkit-scrollbar{
  width: 3px; /*右側捲軸寬度*/
  height:3px; /*下方捲軸高度*/
	}
#light_bx::-webkit-scrollbar-track,#light_bx2::-webkit-scrollbar-track{background: #000; } /* 軌道背景底色 */
#light_bx::-webkit-scrollbar-thumb,#light_bx2::-webkit-scrollbar-thumb{background: #191919;border-radius:5px;}/* 滑桿顏色 */
#light_bx::-webkit-scrollbar-thumb:hover,#light_bx2::-webkit-scrollbar-thumb:hover{background: #2b2b2b;}/* 滑桿滑鼠滑入時的顏色 */
#light_bx::-webkit-scrollbar-button,#light_bx2::-webkit-scrollbar-button{/*background-color: #1d1d1d;*/}/* 捲軸兩側頂端的按鈕*/
/**/
#light_bx > div,#light_bx2 > div{
	position:relative;
	width:100%;
	min-height:100vh;
	/**/
      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;
	}
#light_bx > div{
	background-attachment: fixed;
	background-position: -100% 50%;
	background-repeat: no-repeat;
	background-image: url(../images/p2.png);
	background-size:50vw auto;
	/**/
	transition: all .8s;
	}
#light_bx > div.on{background-position:0% 50%;}
	
.clo2,.clo3,.clo3a{
	position:absolute;
	display:block;
	cursor: pointer;
	top:0;
	right:0;
	z-index:1;
	}
.clo2{
	width:22.1%;/*100*/
	padding-bottom:22.1%;/*100*/
	}
.clo3{
	width:11.6%;/*100 */
	padding-bottom:11.6%;/*100*/
	}
.r_bx{
	position:relative;
	width:452px;
	margin-left:7%;
	display:none;
	}
.r_bx::before{
	position:absolute;
	width:300px;/*407 350*/
	padding-bottom:407px;/*507 436 399*/
	content: "";
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;	
	background-image: url(../images/p4.png);
	background-size:100% auto;
	top:23%;
	right:30%;
	transform:translateY(-50%);
	opacity:0;
	/**/
	transition: all .5s;
	}
.r_bx.on::before{opacity:1;right:76%;}/**/
.r_b2{
	position:relative;
	width:100%;
	}
.r_b2 > .rco{
	position:relative;
	width:100%;
	display:block;
	background-attachment:scroll;
	background-repeat:repeat-y;
	background-position:50% 50%;	
	background-size:100% auto;
	background-image: url(../images/red_bx_02.png);
	z-index:1;
	}
.r_b2 > .rco > div{
	position:relative;
	width:71.5%;
	min-height:30px;
	margin-left:10.8%;
	/*background-color:#0F0;*/
	text-align:center;
	display:none;
	}
.r_b2::before,.r_b2::after{
	position:relative;
	width:100%;
	content: "";
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;	
	background-size:100% auto;
		}
.r_b2::before{
	padding-bottom:24.336%;/*110*/
	background-position:50% 100%;
	background-image: url(../images/red_bx_01.png);
	}
.r_b2::after{
	padding-bottom:16.592%;/*75*/
	background-position:50% 100%;
	background-image: url(../images/red_bx_03.png);
	}
.r_b2 > .rco,.b_b2 > .bco,.b_b3 > .bco3{
	font-size:1.5rem;/*18*/
	line-height:2.2rem;/*2*/
	color:#FFF;
	}
.r_bt{
	position:relative;
	width:100%;
	text-align:center;
	
	}
.r_bt a{
	position: relative;
	padding: 2% 8%;
	display: inline-block;
	cursor: pointer;
	border-radius: 50px;/*5*/
	text-align: center;
	margin: 1rem 2.5% 0;
	top: .8rem;
	border: 2px solid #da00b9;/*ee00ca*/
	/**/
	transition: all .5s;
	/**/  
	-webkit-filter: drop-shadow(0 0 10px rgba(238, 0, 202, 1));
	filter: drop-shadow(0 0 10px rgba(238, 0, 202, 1));
	}
.r_bt a:hover{border: 2px solid #ff25de;}
.r_bt a:nth-child(1){color:#fff;background-color:#da00b9;}
.r_bt a:nth-child(2){color:#da00b9;background-color:transparent;}
.r_bt a:hover:nth-child(1){background-color:#ff25de;}
.r_bt a:hover:nth-child(2){color:#ff31e0;}
	
.k_tit,.k_tit2{
	position:relative;
	display:block;
	font-size:2.3rem;/*28*/
	line-height:3rem;
	font-weight:700;
	text-align:center;
	top:-1.2rem;
	margin:0 0 1.2rem;
	/**/  
  	-webkit-filter: drop-shadow(0 5px 15px rgba(12, 183, 253, 1));/*8 20*/
  	filter: drop-shadow(0 5px 15px rgba(12, 183, 253, 1));
	}
.k_tit2{font-weight:500;}
.k_tit > span,.k_tit2 > span{
	position:relative;
	display:inline-block;
	}
.k_tit > span::before,.k_tit2 > span::before{
	position:absolute;
	width:80%;
	height:5px;
	content:"";
	display:block;
	background-color:#0cb7fd;
	top:106%;
	left:50%;
	transform:translateX(-50%);
	}
/**/
.b_bx{
	position:relative;
	width:857px;
	margin-left:8.5%;
	display:none;
	}
.b_bx::before{
	position:absolute;
	width:300px;/*460 */
	padding-bottom:395px;/*605*/
	content: "";
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;	
	background-image: url(../images/p3.png);
	background-size:100% auto;
	right:30%;
	/*margin-left:30%;*/
	bottom:1.5rem;/**/
	/*top:50%;
	transform:translateY(-50%);*/
	opacity:0;
	/**/
	transition: all .5s;
	}
/*
.b_bx > p{
	position: sticky;
	width:300px;
	height:395px;
	top:45%;
	}
.b_bx > p::before{
	position:absolute;
	width:300px;
	padding-bottom:395px;
	content: "";
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;	
	background-image: url(../images/p3.png);
	background-size:100% auto;
	right:-30%;
	top:0;
	opacity:0;
	transition: all .5s;
	}
	
	
.b_bx.on > p::before{opacity:1;right:65%;}	*/
.b_bx.on::before{opacity:1;right:88%;/*margin-left:-23%;*/}	
.b_b2{
	position:relative;
	width:100%;
	}
.b_b2 > .bco{
	position:relative;
	width:100%;
	display:block;
	background-attachment:scroll;
	background-repeat:repeat-y;	
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/blue_bx_02.png);
	}
.b_b2 > .bco > div{
	position:relative;
	width:82.8%;
	min-height:30px;
	margin-left:7%;
	text-align:left;
	/*background-color:#0F0;*/
	display:none;
	}	
.b_b2::before,.b_b2::after{
	position:relative;
	width:100%;
	content: "";
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;	
	background-size:100% auto;
		}
.b_b2::before{
	padding-bottom:12.835%;/*110*/
	background-position:50% 100%;
	background-image: url(../images/blue_bx_01.png);
	}
.b_b2::after{
	padding-bottom:8.751%;/*75*/
	background-position:50% 100%;
	background-image: url(../images/blue_bx_03.png);
	}
/**/
.b_bx2{
	position:relative;
	width:600px;
	margin-left:8.5%;
	display:none;
	}
.b_bx2::before{
	position:absolute;
	width:300px;/*460 */
	padding-bottom:395px;/*605*/
	content: "";
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;	
	background-image: url(../images/p3.png);
	background-size:100% auto;
	right:30%;
	bottom:-1.5rem;/**/
	/*top:20%;
	transform:translateY(-50%);*/
	opacity:0;
	/**/
	transition: all .5s;
	}
.b_bx2.on::before{opacity:1;right:88%;}	
.b_b3{
	position:relative;
	width:100%;
	}
.b_b3 > .bco3{
	position:relative;
	width:100%;
	display:block;
	background-attachment:scroll;
	background-repeat:repeat-y;	
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/blue_bx_m_02.png);
	}
.b_b3 > .bco3 > div{
	position:relative;
	width:78%;
	min-height:30px;
	margin-left:8%;
	text-align:left;
	/*background-color:#0F0*/
	/*display:none;;*/
	}	
.b_b3::before,.b_b3::after{
	position:relative;
	width:100%;
	content: "";
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;	
	background-size:100% auto;
		}
.b_b3::before{
	padding-bottom:18.3%;/*110*/
	background-position:50% 100%;
	background-image: url(../images/blue_bx_m_01.png);
	}
.b_b3::after{
	padding-bottom:12.5%;/*75*/
	background-position:50% 100%;
	background-image: url(../images/blue_bx_m_03.png);
	}
.clo3a{
	width:16.6%;/*100*/
	padding-bottom:16.6%;/*100*/
	}
.ph{
	position:relative;
	width:100%;
	display:block;
	text-align:center;
	margin:2rem auto 0;
	overflow:hidden;
	}
.ph img{position:relative;width:95%;display:block;margin:0 auto;}
.ph p{
	position:relative;
	width:calc(98%/3);
	display:inline-block;
	text-align:center;
	font-size:1.5rem;/*20*/
	color:#d8d8d8;
	}
.tc1{position:relative;text-align:center; padding:2rem 0 1rem; color:#ff3b85;}	

.ph2{
	position:relative;
	width:100%;
	display:block;
	text-align:center;
	margin:0 auto;
	overflow:hidden;
	border-radius:15px;
	}
.ph2 img{position:relative;width:100%;display:block;margin:0 auto;}
.ph2 img:nth-child(1){display:block;}
.ph2 img:nth-child(2){display:none;}

@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){	
/**/
.ph img{width:100%;}
.ph p{
	width:calc(100%/3);
	font-size:2.3vw;/*20*/}
}
@media only screen and (max-width:860px){
/**/
.b_bx{width:98%;}
}	
@media only screen and (max-width:780px){
/**/
.logo{
	width:49.23%;/*384*/
	padding-bottom:21.1535%;/*165*/
	left:2.5641%;/*20*/
	top:4.358974vw;/*34*/
	}
/**/
#light_bx > div{background-image:none;}
.r_bx{margin-left:2%;}
.r_bx::before{display:none;}
.b_bx{margin-left:2%;}
.b_bx::before{display:none;}
.b_bx2::before{display:none;}
/**/
.ph p{font-size:2.85vw;/*20*/}
.ph2{border-radius:1.9vw;/*15*/}
.ph2 img:nth-child(1){display:none;}
.ph2 img:nth-child(2){display:block;}
}

@media only screen and (max-width:685px){ 
/**/
footer{
	padding:6vw 0;/*60*/
    display:block;
	}
footer .cybx{margin:0 auto;}
footer .cybx img{display:inline-block;}
footer .cybx > div{
	 /**/
      display:block;
	  text-align:center;
      justify-content: center;
      align-items: center;
	}
footer .cybx span{margin:1vw auto;padding:0; text-align:left;}
footer .gf2{display:inline-block;width:auto;margin:0 5px 0 0;}
footer .cybx img.gr15{position:relative;width:auto;height:31px;top:-7px;margin:0 3px 0 0;}
	
}
@media only screen and (max-width:600px){
/**/
.clo2,.clo3{
	width:16.6%;/*100*/
	padding-bottom:16.6%;/*100*/
	}
.r_bx{width:95%;}
.r_b2 > .rco{
	background-image: url(../images/red_bx_m_02.png);
	}
.r_b2 > .rco > div{
	position:relative;
	width:76%;
	min-height:30px;
	margin-left:9%;
	}	
.r_b2::before{
	padding-bottom:18.3%;/*110*/
	background-image: url(../images/red_bx_m_01.png);
	}
.r_b2::after{
	padding-bottom:12.5%;/*75*/
	background-image: url(../images/red_bx_m_03.png);
	top:-1px;	
	}
.r_b2 > .rco,.b_b2 > .bco,.b_b3 > .bco3{
	font-size:1.38rem;/*18*/
	line-height:2rem;/*1.8*/
	}
.r_bt a{
	padding: 1% 8%;
	margin: 1.2rem 2.5% 0;
	top:.2rem;
	}
	
.k_tit,.k_tit2{
	font-size:2.1rem;/*28*/
	line-height:2.8rem;
	top:-2vw;/*12*/
	margin:0 0 1.2rem;
	/**/  
  	-webkit-filter: drop-shadow(0 5px 15px rgba(12, 183, 253, 1));/*8 20*/
  	filter: drop-shadow(0 5px 15px rgba(12, 183, 253, 1));
	}	
.k_tit > span::before,.k_tit2 > span::before{height:4px;}
	
/**/	
.b_b2 > .bco{
	background-image: url(../images/blue_bx_m_02.png);
	}	
.b_b2 > .bco > div{
	width:78%;
	margin-left:8%;
	}
.b_b2::before{
	padding-bottom:18.3%;/*110*/
	background-image: url(../images/blue_bx_m_01.png);
	}
.b_b2::after{
	padding-bottom:12.5%;/*75*/
	background-image: url(../images/blue_bx_m_03.png);	
	}
/**/
.b_bx2{width:98%;margin-left:2%;}	
}
@media only screen and (max-width:560px){
/**/
.ph{
	width:105%;
	left:-2.5%;
	}
.k_tit2{
	font-size:4.8vw;/*28*/
	line-height:6vw;/*33.6*/
	top:-2vw;/*12*/
	margin:0 0 2.3vw;/*14.4*/
	}	
.k_tit2 > span::before{height:.9vw;/*4*/}


/**/	
}
@media only screen and (max-width:470px){
/**/
footer{padding:12vw 0;}
footer .cybx{font-size:.956rem;}/**/
footer .cybx  span > p{padding-bottom:.15rem;}
/**/
.r_mubx{width:180px;}
.r_mu2{
	width:180px;
	height:361px;
	}
.r_op{
	width:43px;
	padding-bottom:34px;
	}
.r_op.on{left:-36px;}
/**/
.k_tit{
	top:-1vw;/*12*/
	margin:0 0 1.5rem;
	}
	
	
}

@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/

footer .cybx span{
	width:305px;
	margin:1vw auto;
	}
}
@media only screen and (max-width:340px){
/**/
footer .cybx span{width:93%;}
footer .cybx img.gf2{height:41px;margin:0;}
footer .cybx img.gr15{height:28px;top:-5px;}
}
 
/* 螢幕高 */
@media only screen and (max-width:780px) and (max-height:440px){
/* */
}

@media screen and (orientation:landscape){
    
    .spg2{display:block;}
}

@media all and (orientation : portrait){

    .spg2{ display: none;}
}

/**/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.finr{
	animation:fadeInRight .8s ease;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInRight .8s ease;
	-webkit-animation-fill-mode:forwards;
	}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.finl{
	animation:fadeInLeft .8s ease;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInLeft .8s ease;
	-webkit-animation-fill-mode:forwards;
	}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
	
@keyframes brilla {
    from {
        opacity: 0;
		filter:contrast(100%);
    }
    to {
        opacity: .8;
		filter:contrast(120 %);/*158*/
    }
}
@keyframes td1 {
    from {
        top:0%;
    }
    to {
        top:-6%;
    }
}
@keyframes td2 {
    from {
        top:0%;
    }
    to {
        top:5%;
    }
}
@keyframes lf1 {
    from {
        left:0%;
    }
    to {
        left:3%;
    }
}
@keyframes ma1{
	0% {
  	transform:rotate(3.5deg);
  	transform-origin: 50% 90%;
	}
	50% {
  	transform:rotate(-1.3deg);
  	transform-origin:50% 90%;
	}
	100% {
  	transform:rotate(3.5deg);
  	transform-origin:50% 90%;
	}
}
/**/
@keyframes rotate {
   0% {transform: rotate(0deg);}
   100% {transform: rotate(360deg);}
}
@keyframes rotate2 {
   0% {transform: rotate(360deg);}
   100% {transform: rotate(0deg);}
}