html,body,input,select {
margin:0px;
padding:0px;
font-family: 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs;
}

html {
color:#5f5855;
}

.wrap {
scroll-behavior: smooth;
}

.hide ,.none {
display:none;	
}

a,a:hover,a:active {
 text-decoration:none;
 color:inherit;
}

.csr,.ptr {
cursor:pointer;	
}


.relbox {
position:relative;
display:block;
width:100%;
height:100%;	
}

.abs {
position:absolute;	
}


.tleft {
 text-align:left;	
}
.tjustfy {
 text-align:justify;	
}
.tright {
 text-align:right;	
}
.tcenter {
 text-align:center;	
}

.full {
width:100%;
display:block;	
}

.alpha0{
opacity:0;	
}





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

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

	
  /*disable mobile click select*/	
  button,
  select,
  _input,
  a:active,a:focus,a:hover{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	tap-highlight-color: transparent;
	outline: none!important;
	  -webkit-touch-callout: none;
	  -webkit-user-select: none;
	  -khtml-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
  }
  
 
  
}
.footer {
background-color:#d6cfb8;		
width:100%;
text-align:center;
height:140px;
display:block;
}


@media screen and (max-width:640px){
	
.footer,.footer .flogo {
height:70px;
}	


}


html,body {
margin:0;
padding:0;

}

body {
width:100%;
display:block;
background-color:#a9c42f;
}


.wmid {
margin:auto;
width:100%;
max-width:1380px;	
box-sizing:border-box;
display:block;
height:100%;
min-height:0;
position:relative;
}

.okiwrap {
display:block;
width:100%;
max-width:750px;
margin:auto;
}


.wrap {
width:100%;
height:auto;
display:block;
position:absolute;
left:0;
top:0;
}

.bwrap {
position:fixed;
width:100%;
height:100%;
overflow:hidden;
left:0;
top:0;
background-color:#f2f2f2
}





.okiwrap .wbg {
overflow:hidden;
background-color:#fff;
}

.sec {
display:block;
width:100%;
height:100%;
}
.secbg {
background-size:100vw 100vh;
background-position:left center;	
}

/*scrollmsg*/
.scrollmsg {
display:none;
position:fixed;
left:10px;
top:10px;
background:rgba(0,0,0,.8);
color:#fff;
width:auto;
height:auto;	
min-width:100px;
min-height:100px;
font-size:9pt;
padding:20px;
}
.local .scrollmsg {
display:block;
z-index:9999;
}


/*debug */
.local .sec ,.local .wmid  {
border:1px solid #f00;	
box-sizing:border-box;
}
.local .bwrap {
border:1px solid #0f0;	
box-sizing:border-box;	
}

.abtn {display:block}
.abtn img {width:100%;height:100%}
.local .abtn {
background-color:rgba(255,0,0,.6);	
}




header {
display:block;	
position:fixed;
top:0px;
left:0px;
width:100%;
text-align:Center;
height:90px;	
z-index:10;
background-color:#fff;
}
header .wmid{
max-width:1280px;
width:100%;
text-align:left;
}

.show640 {
display:none	
}

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


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

header {
display:block;	
position:fixed;
top:0px;
left:0px;
width:100%;
text-align:Center;
height:45px;	
z-index:10;
background-color:#fff;
}
header .wmid .logo{
height:45px;	
max-height:100%;

}


	
}
@media screen  and (max-width: 640px) {
.show640 {
display:block	
}


	
}
/*oki*/
.okisiema {
box-sizing:border-box;
position:relative;	
}

.okisiema .siema img {
  width: 100%;
}


.okisiema .rb {
xborder:1px solid #f00;	
}

.okisiema .tab{
position:absolute;
top:50%;
width:100px;
height:100px;
display:block;
margin-top:-50px;
z-index:4;
cursor:pointer;
}
.okisiema .tab[class~=tleft]{
position:absolute;
left:0px;
}
.okisiema .tab[class~=tright]{
position:absolute;
right:0px;
}

.okisiema .tab img{
width:100%;
}



.okisiema .siema .relbox {
  position:relative;
}




.okisiema .pagerbox{
position:absolute;
left:0px;
bottom:0px;
height:50px;
display:block;
width:100%;
text-align:center;
z-index:4;
}

.okisiema .pagerbox i{
 width:8px;
 height:8px;
 border:3px solid rgba(0,0,0,0);
 margin:5px;
 display:inline-block;
 border-radius:10px;
 background-color:#999;
 cursor:pointer;
 
}

.okisiema .pagerbox i[class~=on]{
 width:8px;
 height:8px;
 border:3px solid rgba(0,0,0,0);
 margin:5px;
 display:inline-block;
 border-radius:10px;
 background-color:#333;
 cursor:pointer;
 
}

/*
.okisiema .pagerbox i[class~=on]{
 width:10px;
 height:10px;	
 border:3px solid #3DBDBF;
 background-color:#fff;
 xbox-shadow:3px 3px 3px rgba(0,0,0,.6); 
 transform:translateY(1px);
 -webkit-transform:translateY(1px); 
}
*/
/*add fbg*/

.okisiema .siema {
  width: 100%;
  opacity:1;
}

.okisiema .siema[class~=on] {
  width: 100%;
  opacity:1;
  z-index:2;
  position:relative;
}


.okisiema .fbg {
 position:relative;
 z-index:1;
 display:none;
}
/*
.okisiema .fbg img {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;	
 z-index:0;
 opacity:0;
 transition:all .3s;

}


.okisiema .fbg img[class~=on] {
 opacity:1;
 z-index:1;
}
*/

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

.okisiema .tab{
position:absolute;
top:50%;
width:60px;
height:50px;
display:block;
margin-top:-25px;
z-index:4;
cursor:pointer;
}
 
.okisiema .pagerbox{
xdisplay:none;
bottom:0px;
height:30px;
}



.okisiema .pagerbox i{
 width:4px;
 height:4px;
 
 margin:3px;
 display:inline-block;
 border-radius:10px;
 background-color:#999;
 cursor:pointer;
 
}

.okisiema .pagerbox i[class~=on]{
 width:4px;
 height:4px;
 margin:3px;
 display:inline-block;
 border-radius:10px;
 background-color:#333;
 cursor:pointer;
 
}



}
/*oki*/
.okisiema-m {
box-sizing:border-box;
position:relative;	
}

.okisiema-m .siema img {
  width: 100%;
}


.okisiema-m .rb {
xborder:1px solid #f00;	
}

.okisiema-m .tab{
position:absolute;
top:50%;
width:50px;
height:50px;
display:block;
margin-top:-25px;
z-index:4;
cursor:pointer;
}
.okisiema-m .tab[class~=tleft]{
position:absolute;
left:0px;
}
.okisiema-m .tab[class~=tright]{
position:absolute;
right:0px;
}

.okisiema-m .pagerbox{
position:absolute;
left:0px;
bottom:0px;
height:50px;
display:block;
width:100%;
text-align:center;
z-index:4;
}

.okisiema-m .pagerbox i{
 width:8px;
 height:8px;
 border:3px solid rgba(0,0,0,0);
 margin:5px;
 display:inline-block;
 border-radius:10px;
 background-color:#333;
 cursor:pointer;
 
}
.okisiema-m .pagerbox i[class~=on]{
 width:10px;
 height:10px;	
 border:3px solid #3DBDBF;
 background-color:#fff;
 xbox-shadow:3px 3px 3px rgba(0,0,0,.6); 
 transform:translateY(1px);
 -webkit-transform:translateY(1px); 
}

/*add fbg*/

.okisiema-m .siema {
  width: 100%;
  opacity:0;
}

.okisiema-m .siema[class~=on] {
  width: 100%;
  opacity:1;
  z-index:2;
  position:relative;
}


.okisiema-m .fbg {
 position:relative;
 z-index:1;
}
.okisiema-m .fbg img {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;	
 z-index:0;
 opacity:0;
 transition:all .3s;
}
.okisiema-m .fbg img[class~=on] {
 opacity:1;
 z-index:1;
}


@media screen  and (max-width: 640px) {
 
.okisiema-m .pagerbox{
display:none;
}
}
/*=== .ani.css ===*/

/*快至慢transition: .5s all cubic-bezier(.09,.75,.64,1.04)前後回頓cubic-bezier(.66,-0.49,.51,1.49)中間回頓cubic-bezier(.3,1.45,.79,-0.25)跳動@keyframes bounce {  0% { transform: scale(1) ; }  10% { transform: scale(1) ;  }  20% { transform: scale(1)  }  30% { transform: scale(1) }        45% { transform: scale(1.2) ;  }  50% { transform: scale(0.8) ; }  60% { transform: scale(1.1)  }  70% { transform: scale(0.9) }  80% { transform: scale(1.05)  }  90% { transform: scale(0.95) }    100% { transform: scale(1) }}*//*=== .smooth-scrollbar.css ===*/

[data-scrollbar],[scrollbar],scrollbar{display:block;position:relative}[data-scrollbar] .scroll-content,[scrollbar] .scroll-content,scrollbar .scroll-content{-webkit-transform:translateZ(0);transform:translateZ(0)}[data-scrollbar].sticky .scrollbar-track,[scrollbar].sticky .scrollbar-track,scrollbar.sticky .scrollbar-track{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track,[scrollbar] .scrollbar-track,scrollbar .scrollbar-track{position:absolute;opacity:0;z-index:1;transition:opacity .5s ease-out,background .5s ease-out;background:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-scrollbar] .scrollbar-track.show,[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track.show,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track.show,scrollbar .scrollbar-track:hover{opacity:1}[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track:hover{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track-x,[scrollbar] .scrollbar-track-x,scrollbar .scrollbar-track-x{bottom:0;left:0;width:100%;height:8px}[data-scrollbar] .scrollbar-track-y,[scrollbar] .scrollbar-track-y,scrollbar .scrollbar-track-y{top:0;right:0;width:4px;height:100%}[data-scrollbar] .scrollbar-thumb,[scrollbar] .scrollbar-thumb,scrollbar .scrollbar-thumb{position:absolute;top:0;left:0;width:4px;height:8px;background:rgba(0,0,0,.5);border-radius:4px}[data-scrollbar] .overscroll-glow,[scrollbar] .overscroll-glow,scrollbar .overscroll-glow{position:absolute;top:0;left:0;width:100%;height:100%}

/*=== home === in*/

.ctr-home {
  /*ctr-home*/ }
  .ctr-home .sec-1 .pbox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    xborder: 1px solid #0f0;
    xbackground: rgba(0, 0, 0, .6);
    position: absolute;
    left: 0;
    top: 0; }
  .ctr-home .s1t1 {
    width: 100%;
    left: 0%;
    top: 0%;
    opacity: 0;
    transform: translate(0%, -20%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1t1 {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .ctr-home .s1t2 {
    width: 100%;
    left: 0%;
    top: 0%;
    opacity: 0;
    transform: translate(0%, -20%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1t2 {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.7s; }
  .ctr-home .s1p {
    width: 64%;
    right: -18%;
    top: 35%;
    opacity: 0;
    transform: translate(10%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1p {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.3s; }
  .ctr-home .s1p1 {
    width: 100%;
    left: 0%;
    bottom: 0%;
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1p1 {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .ctr-home .s1p2 {
    width: 100%;
    left: 0%;
    bottom: 0%;
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1p2 {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s; }
  .ctr-home .s1b {
    width: 100%;
    left: 0%;
    bottom: 0%;
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .ctr-home .animated .s1b {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.5s; }
  .ctr-home .s1b1 {
    width: 33%;
    height: 10%;
    left: 0;
    bottom: 2%; }
  .ctr-home .s1b2 {
    width: 31%;
    height: 10%;
    left: 33.5%;
    bottom: 2%; }
  .ctr-home .s1b3 {
    width: 33%;
    height: 10%;
    left: 65%;
    bottom: 2%;
    /*sec-3*/ }
  .ctr-home .s3t {
    position: relative; }
  .ctr-home .s3t .arr {
    position: absolute;
    width: 7%;
    right: 15%;
    top: 35%;
    transform: rotate(0deg); }
  .ctr-home .s3t[class~=on] .arr {
    transform: rotate(180deg); }
  .ctr-home .s3p {
    display: none;
    /*sec-4*/ }
  .ctr-home .sec-4 .bsch {
    width: 43%;
    height: 8%; }
  .ctr-home .s4b1 {
    left: 4%;
    top: 15%; }
  .ctr-home .s4b2 {
    left: 52%;
    top: 15%; }
  .ctr-home .s4b3 {
    left: 4%;
    top: 25%; }
  .ctr-home .s4b4 {
    left: 52%;
    top: 25%; }
  .ctr-home .s4b5 {
    left: 4%;
    top: 35%; }
  .ctr-home .s4b6 {
    left: 52%;
    top: 35%; }
  .ctr-home .s4b7 {
    left: 4%;
    top: 45%; }
  .ctr-home .s4b8 {
    left: 52%;
    top: 45%; }
  .ctr-home .s4b9 {
    left: 4%;
    top: 55%; }
  .ctr-home .s4b10 {
    left: 52%;
    top: 55%; }
  .ctr-home .s4b11 {
    left: 4%;
    top: 65%; }
  .ctr-home .s4b12 {
    left: 52%;
    top: 65%; }
  .ctr-home .s4b13 {
    left: 4%;
    top: 75%; }
  .ctr-home .s4b14 {
    left: 52%;
    top: 75%; }
  .ctr-home .s4bjoin {
    width: 90%;
    height: 10%;
    left: 5%;
    top: 85%;
    /*sec-5*/ }
  .ctr-home .s5st {
    width: 66%;
    margin: auto;
    margin-left: 17%; }
  .ctr-home .sec-5 .iptbox, .ctr-home .sec-7 .iptbox {
    display: block;
    margin-top: 1%;
    margin-left: 20%;
    border: 2px solid #5ba0e1;
    border-radius: 10px;
    width: 60%;
    padding-bottom: 6%;
    position: relative; }
  .ctr-home .sec-5 .iptbox[class~=schbox] {
    border: 2px solid #e7346e; }
  .ctr-home .sec-5 .iptbox[class~=err] {
    border: 2px solid #f00; }
  .ctr-home .sec-5 .iptbox input, .ctr-home .sec-7 .iptbox input {
    xdisplay: none;
    position: absolute;
    left: 2%;
    top: 6%;
    width: 95%;
    height: 80%;
    font-size: 14pt;
    border: 1px solid rgba(0, 0, 0, 0); }
  .ctr-home .sec-5 .iptbox select, .ctr-home .sec-7 .iptbox select {
    position: absolute;
    left: 2%;
    top: 6%;
    width: 95%;
    height: 80%;
    font-size: 14pt;
    border: 1px solid rgba(0, 0, 0, 0); }
  .ctr-home .sec-5 .iptbox .icn, .ctr-home .sec-7 .iptbox .icn {
    position: absolute;
    right: 2%;
    top: 6%;
    width: auto;
    height: 80%; }
  .ctr-home .sec-5 .chkrow {
    width: 60%;
    display: block;
    margin-left: 25%;
    position: relative;
    margin-bottom: 3%;
    font-size: 14pt; }
  .ctr-home .sec-5 .chkrow img {
    width: 5%;
    position: absolute;
    left: -7%;
    top: 10%; }
  .ctr-home .sec-5 .s5regbtn {
    width: 33%;
    display: block;
    margin-left: 33%; }
  .ctr-home .sec-5 .gorule {
    color: #5ba0e1;
    /*sec-7 prize*/ }
  .ctr-home .weekbox {
    width: 70%;
    margin-left: 15%; }
  .ctr-home .weekbox .pzbox {
    margin-bottom: 10%; }
  .ctr-home .weekbox .pztitle {
    border-radius: 10px;
    background-color: #e1f0bc;
    display: block;
    padding: 2%;
    box-sizing: border-box; }
  .ctr-home .pztitle .dt {
    display: inline-block;
    width: 25%;
    color: #093;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    vertical-align: top; }
  .ctr-home .pztitle .dp {
    display: inline-block;
    width: 75%;
    color: #666;
    font-size: 12pt;
    vertical-align: top; }
  .ctr-home .winner {
    padding: 2%;
    box-sizing: border-box;
    letter-spacing: 2px; }
  .ctr-home .winner .wn {
    display: inline-block;
    width: 20%;
    padding-left: 10%; }
  .ctr-home .winner .wr {
    display: inline-block;
    width: 65%; }
  .ctr-home .weekbox .nodata {
    font-size: 16pt;
    margin: 40px 0px;
    text-align: center; }
  @media screen and (max-width: 750px) {
  .ctr-home .sec-5 .iptbox input, .ctr-home .sec-5 .iptbox select {
    font-size: 3.6vw; }
  .ctr-home .sec-7 .iptbox input, .ctr-home .sec-7 .iptbox select {
    font-size: 3.6vw; }
  .ctr-home .sec-5 .chkrow {
    font-size: 3.2vw;
    /*sec-7 winner*/ }
  .ctr-home .pztitle .dt {
    font-size: 3.2vw; }
  .ctr-home .pztitle .dp {
    font-size: 2.8vw; }
  .ctr-home .winner {
    font-size: 4.2vw;
    letter-spacing: 0.5vw; } }
  @media screen and (max-width: 640px) {
  .ctr-home .sec-5 .iptbox, .ctr-home .sec-7 .iptbox {
    margin-left: 15%;
    width: 70%;
    padding-bottom: 9%; }
  .ctr-home .sec-5 .chkrow img {
    width: 10%;
    position: absolute;
    left: -12%;
    top: 10%; } }

@keyframes fire {
  0% {
    opacity: 0;
    transform: scale(0, 0); }

  25% {
    opacity: 1;
    transform: scale(0.2, 0.2); }

  90% {
    opacity: 1;
    transform: scale(1, 1); }

  100% {
    opacity: 0;
    transform: scale(1, 1); } }

@keyframes bblr {
  0% {
    transform: translate(-60%, 0%); }

  50% {
    transform: translate(60%, 0%); }

  100% {
    transform: translate(-60%, 0%); } }

@keyframes bbtop {
  0% {
    top: 110vh; }

  100% {
    top: -30vh; } }