@charset "UTF-8";
/*20200107*/

/*會員側欄--會員名稱與等級*/
.side-title {
	margin-top:8px;
	margin-bottom: 8px;
	position: relative;
}
.member-name {
	font-size: 1.12em;
	line-height: normal;
	color:#000;
	font-weight: 500;
	margin-right: 78px;
}
.member-grade {
	position: absolute;
	right:0;
	top:2px;
	text-align: right;
	font-size: 0.875em;
	padding-top:1px;
	width: 75px;
}

/*會員資料區*/
.file-box {
	margin-bottom:24px;
}
.file-box .btn-fullgroup2 {
	margin-top:32px;
}
/*點數區塊*/
.count-box {
	margin:24px 0;
}
.count-box li {
	padding:8px 16px;
	float:left;
	vertical-align: middle;	
}
.count-box li+li {
	margin-left:16px;
}
.count-btn {
	border:1px solid #ccc;
	background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #ffffff 20%, #ffffff 65%, #efefef 100%);
    background: -webkit-linear-gradient(top, #fbfbfb 0%, #ffffff 20%, #ffffff 65%, #efefef 100%);
    background: linear-gradient(to bottom, #fbfbfb 0%, #ffffff 20%, #ffffff 65%, #efefef 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#efefef', GradientType=0);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.count-use {
	border:1px solid #eee;
	background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #ffffff 20%, #ffffff 65%, #efefef 100%);
    background: -webkit-linear-gradient(top, #fbfbfb 0%, #ffffff 20%, #ffffff 65%, #efefef 100%);
    background: linear-gradient(to bottom, #fbfbfb 0%, #ffffff 20%, #ffffff 65%, #efefef 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#efefef', GradientType=0);	
}
.count-remind {
	background: #eee;
	box-shadow: 0 0 2px rgba(0,0,0,0.1) inset;
}
.count-ex {
	color: #666;
	font-size: 0.875em;
	border-top: 1px dashed #ccc;
}
.count-box>li>a {
	display: block;
}
.count-box .icon-a:after {
	font-size: 1.5em;
	line-height: 1.5em;
	margin-left:8px;
	margin-right:0;
	color:#666;
}
.count-box .pull-right {
	text-align: right;
}
.points {
	font-size:1.5em;
	font-weight: bold;
	margin: 0 8px;
	color:#ff0000;
}
/*--------------------------------------------臺鐵刊物------------------------------------------*/
.publication-box {
	margin-top:24px;
	margin-bottom:24px;
}
.publication-box li {
	margin-bottom:32px;
}
.pud-photo {
	position: relative;
    overflow:hidden;
    max-height:262px;
}
.pud-photo img{
	width: 100%;
	height: auto;

}
.pud-photo .button-hover {
	position: absolute;
	margin: auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	height:40px;
	width:136px;
	display: none;
}
.pud-photo:hover .button-hover {
	display: block;
}
.pud-photo:hover{
    background: #000; 
}
.pud-photo:hover img {
	opacity: 0.6;
    filter: alpha(opacity=60);
}
.button-hover a.icon {
	width:40px;
	height:40px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
}
.pud-photo .icon:before {
	font-size: 2.5em;
	border-radius: 50%;
	color: rgba(0,0,0,0.8);
	background: rgba(255,255,255,0.8);
	padding:4px;
}
.pud-photo .icon:hover:before {
	color: rgba(0,188,210,1);	
	background: rgba(0,0,0,0.5);	
}
.pud-photo .icon+.icon {
	margin-left:16px;
}
.read:before {
	content: "\f06e";
}
.download:before {
	content:"\f0ed";
}
.pub-name {
	font-size:1.125em;
	font-weight: 600;
	margin:4px 0 1px 0;
	color: #00bcd2;
	padding-bottom:1px;
	border-bottom: 1px double #eee;
}
.pub-date {
	font-size: 0.875em;
}

/*--------------------------------------------臺鐵刊物 end------------------------------------------*/

/*--------------------------------------------會員分及說明------------------------------------------*/
.discount-em {
	font-weight: bold;
	font-size:1.125em;
	margin: 8px 0;
	vertical-align: middle;
}
.discount-em .lead {
	font-size:1.5em;
	margin-right:8px;
	font-weight: 800;
	line-height: 1.125;
}
.level-box .ahead{
	float:left;
	width:88px;
	clear: left;
	font-weight: bold;
}

.level-box .arrows-h:before {
	color: #ccc;
	font-size: 1.125em;
}
.icon.arrows-h {
    width: 22px;
 }
.level-box .inner-text{
	margin-left:96px;
}

.collect-points {
	padding:16px;
}
.collect-points h4 {
	margin: 8px 0;
}
.collect-points .decimal {
	background: #eee;
	border-radius: 5px;
	padding:10px 16px 8px 16px;
}
.collect-points .decimal li{
	margin-left: 2em;
}

/*乘車證明--卡別*/
.usecard-ride {
	margin-bottom: 10px;
}
.usecard-ride li {
	float: left;
	width:24%;
	margin-right: 1%;
	text-align: center;
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 10px 0;
}
.usecard-ride .card-img {
	display: block;
	height:110px;
	position: relative;
}
.usecard-ride .card-img img {
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right:0;
	margin:auto;
}