*{-webkit-overflow-scrolling: touch}
/* cus start----------------------------------------------------------------------------------------------------------------------*/
body {color:#000}
/* line 21, ../sass/_layout.scss */
#wrap {
  background: none;
  position: relative;
  width: 100%;
  max-width: 560px;
  min-width: 320px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.hprize {
margin-top:-10px;	
position:absolute;
left:0px;
top:80px;
}


/* line 31, ../sass/_layout.scss */
.page {
  position: relative;
  width: 100%;
  min-width: 320px;
  max-width:640px;
  height: auto;
  margin: 0 auto;
  padding: 0;
}
/* line 38, ../sass/_layout.scss */
.page > .ctr {
  position: relative;
  width: 100%;
  max-width:640px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  display:block;
}







/* line 20, ../sass/web.scss */
.rsps {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  display: block;
}

/* line 30, ../sass/web.scss */
#hdr {
  position: fixed;
  width: 100%;
  height: auto;
  left: 0;
  top: 0;

}
#hdr {
z-index:998;	
}

/* line 36, ../sass/web.scss */
#hdr > .ctr, #logo > .ctr {
  display: block;
  position: relative;
  width: 100%;
  max-width: 640px;
  min-width: 320px;
  margin: 0 auto;
}

#hdr > .mid {
  display:block;	
  position: relative;
  width:100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  padding: 0;	
  border:0px solid #f00;
}

#hdr .logobtn {
width:50%;
height:100%;
left:0px;
top:0px;
position:absolute;	
}


#hdr .opn,#hdr .opnf {
right:0px;
top:0px;
position:absolute;	
z-index:4;
width:16.6%;
cursor:pointer;
}



/* line 47, ../sass/web.scss */




/* line 58, ../sass/web.scss */
#nav {
  background: #000 repeat;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  display: none; 
  	 
}

#nav > .mid {
 xbackground-image:url(../img/navbg.jpg);
 background-size:100%;
 background-position:bottom;
 background-repeat:no-repeat;
 border:0px solid #f00;
 width:100%;
 max-width:560px;
 height:100%;
 margin:auto;
 position:relative;
 overflow:auto;
}

#nav  #navclz {
 position:absolute;
 right:0px;
 top:0px;
 width:15%;
 cursor:pointer;
}


/* line 67, ../sass/web.scss */
#nav > .ctr {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 15% auto 0 auto;
}
/* line 73, ../sass/web.scss */
#nav > .ctr a {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
}


#nav  .hseg {
display:block;
width:50%;
border-bottom:1px solid #c3181f;
height:1px;	
margin:auto;
}
#nav .sbox {
text-align:center;	
}
#nav .sbox img {
margin:10px;
width:5%;
min-width:30px;	
}



/* line 111, ../sass/web.scss */

#gcard {
 position:fixed;
 right:50%;
 bottom:10px;
 width:300px;	
 z-index:4;
 margin-right:-430px;
}
#gcard .mid {
margin:auto;
max-width:560px;
width:100%;
text-align:right;
}
#gcard a {
width:50%;
display:inline;
}

.getcard {
}
#gcard .mb {
display:none;
}
#gcard .pc {
width:300px
}


#idx {

}



/*mvb*/
#mvb #mv1{
width:100%;
height:25%;	
top:10%	;
}
#mvb #mv2{
width:80%;
height:28%;	
top:45%	
}

#mvb #mv3{
width:69%;
height:20%;	
top:75%;
right:0px;	
}
/*itm*/
#itm .sldbox .owl-dots {
margin-bottom:-2.5%;
}
#itm .item div{
 box-sizing:border-box;	
 border:1px solid rgba(255,0,0,0);
 text-align:center;
}

#itm  .t {
height:14.5%;
}
#itm  .t h2 {
color:#fff;
font-size:26pt;
display:block;
height:19%;
box-sizing:border-box;
padding-top:10px;
font-weight:bold;
}
#itm  .t sb {
color:#D60000;
display:inline-block;
background-color:#000;
padding:0px 5%;
font-size:16pt;
height:10%;
font-weight:bold;
}

#itm  .i {
height:39%;
overflow:hidden;
position:relative;	
}
#itm  .in {
height:3%;
font-size:18pt;
font-weight:bold;
}
#itm  .in n {
padding-right:10px;
}


#itm  .pz {
height:3%;
font-size:16pt;
font-weight:bold;
padding-top:6px
}
#itm  .if {
height:10%;
font-size:14pt;
padding-top:6px;
line-height:20pt;
}
#itm  .r {
height:3.5%;
color:#D60000;
font-size:18pt;
padding-top:6px
}
#itm .buy {
width:30%;
margin:1% auto;
}
#itm  .pk {
height:16%;
text-align:center;
padding-top:1.5%
}

#itm  .pk i{
display:inline-block;
width:5.5%;
padding-bottom:5.5%;
margin:.4% .8%;
cursor:pointer;
box-sizing:border-box;
}
#itm  .pk i[class~=active]{
box-shadow:inset 0 0 0 5px  #f00;
}



/*pro*/
#pro .abtn {
bottom:10.5%;
width:50%;
height:7%;	
}
#pro .t {
position:absolute;
top:5%;
width:100%;
}
#pro .ts {
position:absolute;
width:100%;
top:15%;
text-align:center;
font-size:16pt;
line-height:22pt;
letter-spacing:6px;
}
#pro .ts b{
font-weight:bold;
display:block;
letter-spacing:0px;
}


#pro .ss {
color:#fff;	
font-weight:bold;
position:absolute;
top:40%;
left:10%;
display:block;	
}
#pro .ss[class~=blk] {
color:#000;
}

#pro .ss en{
display:table;	
font-size:44pt;
padding-bottom:10px;
}
#pro .ss b{
display:block;	
font-size:90pt;
padding-bottom:10px;
line-height:96pt;
}
#pro .ss sb{
display:table;		
font-size:14pt;
padding-bottom:10px;
letter-spacing:2pt;
}

/*kol*/
#kol .abtn {
width:24%;
left:38%;
bottom:12%;	
}

#kol .inbox {
position:absolute;
top:16%;
left:20%;	
width:60%;	
display:block;	
text-align:center;
}
#kol .pi {
width:90%;
margin-left:5%;
}

#kol  t{
font-size:20pt;
line-height:40pt;
font-weight:bold;
display:block;
margin-top:16px;
margin-bottom:16px;
border-bottom:1px solid #f00;
}
#kol  sb{
font-size:13pt;
text-align:justify;
display:block;
line-height:22pt;
}

#kol .al,#kol .ar{
 transform:translateY(-200%);
 -webkit-transform:translateY(-200%);	
}
/*fair*/
#fair .finfo {
width:50%;
height:5%;	
left:25%;
bottom:1%;
}

#fair ul{
 width:100%;
 display:table;
 margin:0px;	
 padding:0px;
}
#fair ul li{
  display:table-cell;
  margin:0px;
  vertical-align:top;
}
#fair ul li.d{
  border-right:1px solid #f00; 
  padding-right:20px;
  line-height:40px;	 
  font-size:26pt;
  width:30%;
}

#fair ul li.d sb{
  font-size:12pt;
  vertical-align:top;
  padding-left:10px;
}
#fair ul li.t{
   font-size:14pt;	
 padding-left:20px;
}
#fair ul li.t b{
 display:block;
 font-weight:bold;
 padding-top:10px;
 
}


#fair ul li.d{
  border-right:1px solid #f00; 
  padding-right:20px;
  line-height:60px;	 
  font-size:26pt;
  width:30%;
}



#fair .f1 {
width:60%;
top:14%;
right:0%;	
}


#fair .f3 {
width:60%;
top:31%;
right:0%;	
}

#fair .f2 {
width:60%;
top:23%;
left:10%;	
}


#fair .f4 {
width:60%;
top:40%;
left:10%;	
}





/*reg*/
#reg .snd {
width:70%;
height:8%;	
left:15%;
bottom:21%;
}

#reg .chk {
width:25%;
height:3%;	
left:25%;
bottom:31%;
}

#reg .policy {
width:25%;
height:3%;	
left:50%;
bottom:31%;
}


#reg .tbox{
top:20%;
left:12%;	
width:75%;
font-size:14pt;
line-height:26pt;
text-align:justify;
}
#reg .rbox{
top:82%;
left:15%;	
width:70%;
font-size:14pt;
line-height:22pt;
text-align:justify;
}
#reg .rbox .reauth{
color:#f00;
font-weight:bold;
border-bottom:1px solid #f00
}

#reg .fbox {
top:38%;
left:15%;	
width:70%;	
border:0px solid #f00;
}

#reg .fbox iptbox {
position:relative;	
padding-bottom:15%;
border:1px solid #f00;
width:100%;
display:block;
overflow:hidden;
margin-bottom:6%	
}

#reg .fbox input,#reg .fbox select{
position:absolute;	
line-height:100%;
width:100%;
height:100%;
left:0px;
top:0px;
border:0px;
text-indent:2%;
border:0px;
font-size:20pt
}


#reg .fbox iptbox dbox{
position:absolute;	
background-size:cover;
background-position:center center;
width:15%;
height:102%;
right:0px;
display:block
}


#reg .chkicn {
top:66%;
left:30%;
width:5%;	
}



/*law*/
#law {
color:#fff;	
}
#law .abtn {
width:60%;
height:10%;	
left:20%;
bottom:5%;
}
#law .tbox {
top:30%;
left:8%;	
width:50%;
font-size:12pt;
line-height:24pt;
text-align:center;	
}

#law .bbox {
top:55%;
left:15%;	
width:80%;
font-size:12pt;
line-height:20pt;
}
#law .bbox ul{
 width:100%;
 display:table;
 margin:0px;	
 padding:0px;
}
#law .bbox ul li{
 display:table-cell;
  margin:0px;	
}
#law .bbox ul li.cap{
 width:15%;
}


/*htg*/
#htg .tbox {
color:#fff;	
top:50%;
left:10%;	
width:80%;
font-size:15pt;
line-height:23pt;
text-align:center;	
}

#htgctm {
background-color:#B81A1B;
display:block;
padding-bottom:5px;
}

#htgctm .oki_htag .item {
display:inline-block;
width:33.3%;
overflow:hidden;
padding-bottom:33.3%;
position:relative;
background-size:cover;
background-position:center center;
margin-top:-1%;
xbox-shadow:inset 0 0 0 3px #B91B1C; 
}
#htgctm .oki_htag .item .imgbox{
position:absolute;		
width:100%;
height:100%;

}

#htgctm .oki_htag .item .imgbox img{
width:100%;
height:100%;
}


#htgctm .oki_htag h2,#htgctm .oki_htag h3,#htgctm .oki_htag .time{
display:none;
	
}
#htgctm .tnext{
  padding:10px;
  border:1px solid #fff;
  color:#fff;
  margin:auto;
  text-align:center;
  margin:5px;
  cursor:pointer;	
  font-size:14pt;
}

#htg b {
display:block;
font-weight:bold;	
}


/*finbox*/
.finbox,.showbox,.lstbox {
position:fixed;
left:0px;
top:0px;
width:100%;
display:block;
background-color:#000;/*rgba(0,0,0,.8);*/
z-index:1001;
color:#666;
}



.finbox .mid,.showbox .mid,.lstbox .mid {
width:100%;
height:100%;
max-width:560px;
margin:auto;
overflow:auto;	
box-sizing:border-box;
}
.finbox .mid {
padding:10px;	
}


.finbox .relbox {
border:0px solid #f00;	
min-height:100%;
}
.finbox .close {
position:absolute;
width:10%;
right:0px;	
}

.finbox .fsub {
margin-top:-19%	
}


.finbox .imore {
position:absolute;
top:37%;
left:0px;
width:50%;
height:5%;	
}

/*showbox*/
#showclose {
position:absolute;
right:0px;
width:15%;	
}



/*lstbox*/
.lstbox .msgbox {
animation-name: manin;
animation-duration: .5s;
}
@keyframes manin {
    from {opacity:0;margin-top:50px;}
    to {opacity:1;margin-top:0px;}
}


.lstbox .close {
position:absolute;	
right:0px;
top:0px;
width:15%;	
}


.lstbox .msgbox {
position:fixed;
left:50%;
top:5%;
background:#fff;
height:90%;
width:540px;
margin-left:-310px;
}

.lstbox[class~=mvbb] .msgbox {
position:fixed;
left:50%;
top:5%;
background:#fff;
height:90%;
width:800px;
margin-left:-400px;
}
.lstbox .msgbox[class~=mvbb] {
position:fixed;
left:50%;
top:5%;
background:#fff;
height:90%;
width:800px;
margin-left:-400px;
}



.lstbox .msgbox[class~=auto] {
top:50%;
height:auto;
font-size:18pt;
line-height:32pt;
color:#888;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}


.lstbox .msgbox[class~=auto] r {
color:#f00;
font-weight:bold;
font-size:24pt;
line-height:44pt;
}
.lstbox .msgbox[class~=auto] .cinfo {
box-sizing:border-box;
padding:20px 15%;
}

#reauthbox .msgbox[class~=auto]{
padding-bottom:3%;
}

#reauthbox .msgbox[class~=auto] .cinfo {
box-sizing:border-box;
margin-top:-5.5%;
font-size:20pt;
line-height:32pt;
}


#reauthbox .msgbox[class~=auto] iptbox {
position:relative;	
padding-bottom:15%;
border:1px solid #999;
width:100%;
display:block;
overflow:hidden;
margin-bottom:6%;
}

#reauthbox .msgbox[class~=auto] input{
position:absolute;	
line-height:100%;
width:100%;
height:100%;
left:0px;
top:0px;
border:0px;
text-indent:2%;
border:0px;
font-size:20pt;;
}

#reauthbox .msgbox[class~=auto] form {
margin-top:5%;	
}

#reauthbtn {
cursor:pointer;	
margin-top:2px;
}


.lstbox .msgbox .cbox {
position:absolute;
width:90%;
height:60%;
left:5%;
bottom:5%;
border:1px solid rgba(0,0,0,0);
overflow:auto;
}


.lstbox .msgbox[class~=mv]{
background-color:#000;	
}

.lstbox .msgbox[class~=mv] .mvbox {
position:absolute;
width:100%;	
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}


.lstbox .msgbox .mvbox {
position:absolute;
width:100%;	
padding-bottom:66%;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}

.lstbox .msgbox .mvbox iframe {
position:absolute;
width:100%;	
height:100%;

}
.lstbox .msgbox[class~=mv] .close {
z-index:3;
margin-top:-15%;
}


.lstbox .msgtitle {
left:15%;
top:10%;
width:70%;	
}

.lstbox .msgbox[class~=auto] .msgtitle {
left:15%;
top:20%;
width:70%;	
}




.lstbox .rinfo {
font-size:12pt;	
line-height:20pt;
text-align:justify;
box-sizing:border-box;
padding:10px;
}

.lstbox .rinfo b{
font-weight:bold;
color:#000;
}


.lstbox  c{
display:block;
width:100%;	
font-weight:bold;
text-align:center;
padding:10px 0px;
} 

.lstbox  .cb{
font-weight:bold;
font-size:16pt;
} 


.lstbox  ol{
padding:0px;
margin:0px;
list-style:decimal;
margin-left:20px;
} 
.lstbox  ol li{
padding-bottom:10px;
list-style:decimal;
} 

.lstbox  ol.zf,.lstbox  ol.zf li{
list-style:decimal-leading-zero;
}

.lstbox r {
color:#f00;
display:block;
}

/*fairbox*/
#fairbox .rinfo,#lstbox .rinfo {
font-size:16pt;	
}

ol.zf {
margin-left:40px	
}

ol.zf li{
position:relative;
padding-left:10px;
}
ol.zf li d{
position:absolute;
right:10px
}


.nojust{
text-align:left	
}


/*cus scroll*/

::-webkit-scrollbar {
      width: 5px;	  
} /* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
      background-color: #cccccc;
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: #666666;   
} /* this will style the thumb, ignoring the track */

 
::-webkit-scrollbar-button {
      background-color: #cccccc;
	  height:1px;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
      background-color: #cccccc; 
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */




/*cus form ------------------------------------------------------------------------*/
/*

*/

/*android bottom fix scroll bottom no cover android 往上捲時下半部會露出 */
.lstbox,#nav {
height:115%;
}


#foot {
width:100%;
background-color:#000;
display:block;
position:relative;
}

#foot .ctr{
display:block;	
width:100%;
height:100%;
line-height:100%;
color:#fff;
text-align:center;
vertical-align:middle;
padding:5% 0px;
font-size:10pt;
}

#foot a{
color:#fff;
}

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


#wrap {
	
}
#navbtn, #navclz {
 width:15.6%;	
}


.hprize {
top:100%;
width:16%;	
}



#hdr .fb,#hdr .ln {
width:12%;	
}

#hdr .fb {
right:28.6%;
}

#hdr .ln {
right:15.6%;
}

/*
.form .chkbox{
left:6%;
margin-top:312%;
}


.form .addrbox select,.form .addrbox option{
padding:1%
}
*/
#gcard {
 position:fixed;
 right:0%;
 bottom:0px;
 width:35%;	
 z-index:4;
 margin-right:0px;
}
#gcard .mb {
display:block;
}

#gcard .pc {
display:none;
}
#getcard .mid {
text-align:right;
}
.getcard {
width:100%;
margin-right:0px;
position:absolute;
right:0px;
bottom:0px;
}


/*itm*/
#itm  .t {
height:14.5%;
}
#itm  .t h2 {
color:#fff;
font-size:6vw;
display:block;
height:24%;
box-sizing:border-box;
padding-top:0px;
margin-bottom:2.4vw;
}
#itm  .t sb {
padding:0px 10px;
font-size:3.5vw;
height:auto;
margin-top:.8%;
}


#itm  .in {
font-size:4.4vw;
}
#itm  .in n {
padding-right:2%;
}


#itm  .pz {
font-size:4.2vw;
padding-top:1.5%
}
#itm  .if {
font-size:3.2vw;
padding-top:3%;
line-height:4vw;
}
#itm  .r {
font-size:3vw;
padding-top:0%;
vertical-align:top;
}

#itm  .pk {
padding-top:.8%
}


#itm  .pk i[class~=active]{
box-shadow:inset 0 0 0 3px  #f00;
}










/*pro*/
#pro .ts {
font-size:3vw;
line-height:4.5vw;
letter-spacing:1vw;
}
#pro .ts b{
letter-spacing:0px;
font-weight:bold;
}



#pro .ss en{
display:table;	
font-size:8vw;
padding-bottom:1.6vw;
}
#pro .ss b{
display:block;	
font-size:22vw;
padding-bottom:1.6vw;
line-height:22vw;
}
#pro .ss sb{
display:table;		
font-size:3.6vw;
padding-bottom:1.6vw;
letter-spacing:.6vw;
}

/*kol*/
#kol  t{
font-size:6vw;
line-height:12vw;
margin-top:5vw;
margin-bottom:3vw;
}
#kol  sb{
font-size:3vw;
line-height:6vw;
}

/*fair*/
#fair ul li {
  line-height:4vw;		
}
#fair ul li.d{
  border-right:1px solid #f00; 
  padding-right:4vw;
  line-height:8vw;	 
  font-size:5.2vw;
  width:6vw;
}

#fair ul li.d sb{
  font-size:2.4vw;
  vertical-align:top;
  padding-left:2vw;

}
#fair ul li.t{
   font-size:3.2vw;	
 padding-left:4vw;
}
#fair ul li.t b{
 display:block;
 font-weight:bold;
 padding-top:.5vw;
}


#fair .f3 ul li.d{

  line-height:12vw;	 

}



/*reg*/
#reg .tbox{
font-size:3.2vw;
line-height:5.8vw;
}
#reg .rbox{
font-size:3.2vw;
line-height:5vw;
}


#reg .fbox input,#reg .fbox select{
font-size:4vw;
}


/*law*/
#law .tbox {

font-size:3.2vw;
line-height:5vw;

}

#law .bbox {
left:10%;	
font-size:3.2vw;
line-height:5vw;
}

#htg .tbox {

font-size:3.6vw;
line-height:5.4vw;

}


#htg b {
display:block;
font-weight:bold;	
font-size:4vw;
}

/*lstbox*/





.lstbox .msgbox {
position:fixed;
left:5%;
top:5%;
background:#fff;
height:90%;
width:90%;
margin-left:0%;
}


.lstbox .msgbox[class~=mv] {
position:fixed;
left:0%;
top:5%;
background-color:#000;	
height:90%;
width:100%;
margin-left:0%;
}


.lstbox .msgbox .cbox {
height:65%;
}


.lstbox  .cb{
font-size:4.0vw;
line-height:6.0vw;
} 


.lstbox .rinfo {
font-size:3.6vw;
line-height:5.4vw;
}


.lstbox .msgbox[class~=auto] {
height:auto;
font-size:4vw;
line-height:6vw;
}
.lstbox .msgbox[class~=auto] r {
font-size:5vw;
line-height:7vw;	
}

/*fairbox*/
#fairbox .msgbox .cbox,#lstbox .msgbox .cbox {
height:75%;
}

#fairbox .rinfo,#lstbox .rinfo {
font-size:4vw;
line-height:6vw;
}

#fairbox .rinfo ol,#lstbox .rinfo ol {
margin-left:6vw
}


/*reauthbox*/
#reauthbox .msgbox[class~=auto] .msgtitle {
margin-top:-5%;
}

#reauthbox .msgbox[class~=auto] .cinfo {
font-size:4.5vw;
line-height:7.5vw;
text-align:justify;
margin-top:-5%;
}

#reauthbox .msgbox[class~=auto] iptbox input {
font-size:5vw;
}



#foot .ctr{

font-size:2.8vw;
}






}