﻿/*Reset By Normalize*/
.wrapper {
    line-height: 24px;
    font-size: 15px;
}
ul {
	padding: 0;
}
.img-responsive{
	max-width: 90%;
}
.U-wrapper{
	background-size:187%;
}

/*容器基本框架*/
.container {
  width: 94%;
  padding: 0 3%;
}

h1 {
	display: none;
}
h3 {
	padding: 4px 10px;
	font-size: 120%;
	font-weight: bold;
	margin: 22px 0;
}
/*header*/
.U-header .container{ 
	width:100%;
	height: 0;
	padding-bottom:69.04%;
	position:relative;
	overflow: hidden;
}
	
	.U-header .logo{
		width:19.53%;
		height:0;
		padding-bottom:13.08%;
		top:0.97%;
		left:73.24%;
	}
		.U-header .logo a{
			width:100%;
			height:0;
			padding-bottom:64.08%;
			background-size:100%;
		}
		.U-header .header_gold{
			width: 17.187%;
			height: 0;
			padding-bottom: 17.089%;
			top:64.073%;
			left: 13.964%;
		}
/*U-nav*/
.U-nav{
	width: 95%;
	height: 0;
	padding-bottom: 7.81%;
	position: relative;
}
	.U-nav ul{
		width: 100%;
		height: 0;
		padding-bottom: 7.81%;
	}
	.U-nav ul li{
		width: 50%;
		display: block;
		height: 0;
	}
		.U-nav ul li a{
			width: 100%;
			height: 0;
			padding-bottom: 37%;
			margin: 0 auto;
			display: block;
			background-position: 0 100%;
			background-size: 100%;
		}
		.U-nav ul li.action a, .U-nav ul li a:hover{
			background-position: 0 0 !important;
		}

.nav{width:100%; height:0; margin:0 auto; padding-left:0; margin-top:0;  display:flex; justify-content:center; flex-wrap: wrap; 
	padding-bottom: 6%;}
	.nav > li {width:24%; height: 0; padding-bottom: 18%;}
	.nav a {width:100%; padding-bottom: 37%; background-size:100% 202%;}


.U-content .container{
	width:95%;
}
	.U-content .title img{
		width: 90%;
		margin: 10px auto;
		display: block;
	}

	.U-content ol{
		margin-left:2.5em;
		margin-right:1em;
	}
	.U-content ol img{
		width: 90%;
		max-width: 370px;
	}
	

/*滿版*/
.table-full {
	width: 90%; margin: 0 auto;
}

/*table 2等分*/
.table-half {
	float: none;
	margin-right: 0;
	margin-left: 0;
	width: 100%;
}


.table img{
	max-width:130px;
	width:80%;
}

.table img.imgB{
	max-width:50px;
	width:80%;
}


.col-6,.col-7 {
	width: 70%;
}

.btnclass .BtnSmartPay,.btnclass .BtnWebATM{
	width:42%;
	}


/*表格樣式：改顏色在這邊*/
.table-blue th {
	background: #13697F;
	background: rgb(59,175,221); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(59,175,221,1) 0%, rgba(19,105,127,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(59,175,221,1) 0%,rgba(19,105,127,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(59,175,221,1) 0%,rgba(19,105,127,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bafdd', endColorstr='#13697f',GradientType=0 ); /* IE6-9 */
}

.table-blue th.sub-th {
	background: #61adf4;
	color: #fff;
}

@media screen and (max-width: 550px){

.nav{width:80%;padding-bottom:22%;}	
.nav > li {width:45%;}
.box_message {width:95%;}
.box_orders a{
		display: inline-block;
		position: relative;
		} 
.dat,.date,.mode,.sum,.status {
	float: none;
	display:block; width:100%;
	}
	
.box_orders { padding-bottom:10px;}
.modify{ padding-bottom:55px;}
.modify a{ position:absolute;}
}

@media screen and (max-width: 500px){
	/* 滿版 */
	.ms-col-12 {
		padding:0 30px;
		width: 100%;
	}
	.ms-col-11 {	
		width: 90.5%;
	}
	.ms-col-10 {
		width: 82.5%;
	}
	.ms-col-9 {
		width: 72.5%;
	}
	.ms-col-8 {
		width: 63.5%;
	}
	.ms-col-7 {
		width: 56.5%;
	}
	/* 二等分 */
	.ms-col-6 {
		width: 48%;
	}
	.ms-col-5 {
		width: 40%;
	}
	/* 三等分 */
	.ms-col-4 {
		width: 31.5%;
	}
	/* 四等分 */
	.ms-col-3 {
		width: 23.5%;
	}

	.ms-col-2 {
		width: 15.5%;
	}
	/* 五等分 */
	.ms-col-2_4 {
		width: 19%;
	}
	.ms-col-1 {
		width: 8%;
	}
	
/* 三等分 */
.col-4 {
	width: 65%;
}
.col-6,.col-7 {
	width: 100%;
}
.btnclass .BtnSmartPay,.btnclass .BtnWebATM{
	width:40%;
	}
}