@charset "utf-8";
/* CSS Document */

/************************************************************************************
RESET
*************************************************************************************/
* {
	margin: 0;
	padding: 0;
}
/************************************************************************************
樣式
*************************************************************************************/
body {
	background: #FFC url(../images/main_bg.png) no-repeat center top;

}
#wrapper {
	width: 960px;
	margin:0 auto;
	}
#header {
	margin:0 auto;
	height:230px;
}
#header img{
	margin:0 auto;
    width:400px;
	height:auto;
	}
#cont{
	word-wrap: break-word; 
    word-break: normal;
	margin:0 auto;
    width:950px;
	height:auto;
	background:url(../images/cont_bg.png) repeat-y center top;
	clear:both;
	}
#cont p{
	background:url(../images/cont_bg.png) repeat-y center top;
	clear:both;
	width:600px;
	word-wrap: break-word; 
    word-break: normal;
	margin:0 auto;
	padding-top:5px;
	font-size:16px;
	color:#243E4A;
	padding-top:25px;
}
#cont p img{
	clear:both;
	width:580px;
	margin:0 auto;
	height:auto;
	padding-left:15px;
	padding-bottom:5px;
	}
h1{ text-align:center;
	}
#con_mycard{
	float:left;
	margin:10px 40px;
    width:233px;
	height:234px;
    background:  url(../images/card_frame.png) no-repeat center ;
	}
#con_gash{
	float:left;
	margin:10px 40px;
    width:233px;
	height:234px;
    background:  url(../images/card_frame.png) no-repeat center ;
	}
#con_wasabii{
	float:right;
	margin:10px 40px;
    width:233px;
	height:234px;
    background:  url(../images/card_frame.png) no-repeat center ;
	}
h2{ 
	}
#con_mycard h2 a{ 
    display:block;
    height:180px;
	text-indent:-9999px;
	background:url(../images/card_mycard.png) center no-repeat;
	}
#con_mycard h2 a:hover{ 
	background:url(../images/card_mycard_over.png) center no-repeat;
	}
#con_gash h2 a{ 
    display:block;
    height:180px;
	text-indent:-9999px;
	background:url(../images/card_gash.png) center no-repeat;
	}
#con_gash h2 a:hover{ 
	background:url(../images/card_gash_over.png) center no-repeat;
	}
#con_wasabii h2 a{ 
    display:block;
    height:180px;
	text-indent:-9999px;
	background:url(../images/card_wasabii.png) center no-repeat;
	}
#con_wasabii h2 a:hover{ 
	background:url(../images/card_wasabii_over.png) center no-repeat;
	}
h3{	
    text-align:center;
	margin-top:12px;
	text-decoration:none;
	}	
h3 a{
	text-align:center;
	margin-top:12px;
	color:#FFF;	
	text-decoration:none;
	}
h3 a:hover{
	text-align:center;
	margin-top:12px;
	color:#0CF;	
	}
#footer{

	margin:0 auto;
	text-align:center;
	}
#notice{
	word-wrap: break-word; 
    word-break: normal; 
	clear:both;
	margin:0 auto;
	background:url(../images/notice_bg.png) repeat-y center top;
	}
#notice ul{
	width:720px;
	clear:both;
	padding-top:10px;
	padding-left:120px;
	font-size:18px;
	color:#333;
	}
.red{
	color:#F00;	
}
.green{
	color:#00A88E
	}
#notice li{
	width:720px;
	clear:both;
	padding-top:10px;

	}
#ios{
	margin-top:20px;
	float:left;
	margin-left: 100px;
	padding-top:18px;
	}
#andr{
	margin-top:20px;
	float:left;
	margin-left: 50px;
	padding-top:18px;
	}
#topup{
	margin-top:20px;
    float:left;
	margin-left:50px;
	}

@media screen and ( max-width:640px) {
img { width:100%; height:auto; }

#wrapper {
	width: 100%;
	height:auto;
	}

#header {
    width:100%;
	height:220px;
	background-size:100%;
}
#headertxt {
	display:none;

}
h1{
	width:100%;
	}
#cont{
	width:100%;
	height:auto;
    background: url(../images/cont_bg.png) repeat-y center ;
	background-size:100%;

}
#cont p{
	background:url(../images/cont_bg.png) repeat-y center top;
	clear:both;
	width:80%;
	word-wrap: break-word; 
    word-break: normal;
	margin:0 auto;
	padding-top:15px;
	font-size:16px;
	color:#243E4A;
}
#cont br{
	
	}
#cont p img{
	clear:both;
	width:80%;
	margin:0 auto;
	height:auto;
	padding-left:15px;
	padding-bottom:5px;
	}

#con_mycard{
	margin:0 auto;
	float:none;
	}
#con_gash{
	margin:0 auto;
	float:none;
	}
#con_wasabii{
	margin:0 auto;
	float:none;
	}
#footer{
	clear:both;
	}
#notice{
	word-wrap: break-word; 
    word-break: normal; 
	clear:both;
	-webkit-text-size-adjust: none;
	width:100%;
	margin:auto;
    background: url(../images/notice_bg.png) repeat-y center ;
	background-size:100%;
	-webkit-box-flex:1;
	-moz-box-flex:1;
	-ms-box-flex:1;

}
#notice ul{

	word-wrap: break-word; 
    word-break: normal; 
	padding-left:50px;
	width:90%;


	}

#notice li{
	width:90%;

	clear:both;


	}
#ios{
	display:none;
	}
#andr{
	display:none;
	}
#topup{
	display:none;
}
/* clearfix ---------------------------------------- */
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}