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

body{
	margin:0;
	padding:0;
    font-family: 'IBM Plex Sans Condensed', sans-serif;	
	font-size:1em;
	color:#666
}

hr{
	width:8em;
	border:none;
	height:2px;
	background:#C00;
	margin:-1em auto 2em

}

/*------------------TOP---------------*/

.top{
	height:15em;
	width:100%
}

.top-img{
	background:url(../img/support/eol.jpg);
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*     EOL     */

.eol{
	padding:3% 10% 5%;
	color:#666;
	height:1%;
	overflow:hidden;
}

.eol h1{
	font-weight:200;
	font-size:4em;
	text-align:center
}

/*     TABLE     */

select{
	outline:none;
	border:none;
	width:100%;
	color:#444;
}

table{
	width:100%;
	padding:0;
	margin-top: 4em;
}

th{
	text-align:left;
	height:2.5em;
	background:#C00;
	color:#FFF;
	font-weight:500;
	font-size:.85em;
	padding-left:.5em
}

td{
	border-bottom:1px solid rgba(0,0,0,.2);
	padding:1em 0 1em .5em;
	font-size:.9em
}


@media only screen and (max-width: 900px){
	
	
table, thead, tbody, th, td, tr{ 
	display: block;
}
	
select{
	border-bottom: none; 
	z-index: -98;
	background: none;
	color:#666;
	cursor:pointer
}

th{
	width:100%;
	display:none;
}

td{
	display:block;
	height:100%;
	padding:.5em 0
}

tr{
	border-bottom: 1px solid #C00;
	z-index:-98;
}

thead tr{ 
	position:absolute;
	top:-9999px;
	left:-9999px
}
		
td{ 
	border:none;
	border-bottom:1px solid rgba(153,153,153,.3); 
	position:relative;
	padding-left:50%; 
}

td:before{ 
	position:absolute;
	left:6px;
	width:45%; 
	white-space:nowrap;
	z-index:-98;
	work-break:break-all
}

	
	
td:nth-of-type(1):before { content: "產品"; }
td:nth-of-type(2):before { content: "型號"; }
td:nth-of-type(3):before { content: "建議替換"; }
td:nth-of-type(4):before { content: "生效日期"; }
td:nth-of-type(5):before { content: "服務終止"; }

}
}