@charset "utf-8";
/*CSS file created by RCD. June 2015*/

/*************************General**********************************/

/* 
Color chart
*/
body              { margin: 0; color: #000; font-size: 14px; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 微軟正黑體, sans-serif;}
a, 
a:visited, 
a:active, 
a:hover           { text-decoration: none; blr:expression(this.onFocus=this.blur()); cursor: pointer;}

a                 { outline: none; /* for Firefox Chrome */ behavior:expression(this.onFocus=this.blur()); /* for IE */} 
a:focus           { -moz-outline-style: none; outline: none; } /* for Firefox Chrome */

a:link            { text-decoration: none;}
a:visited         { text-decoration: none;}
a:hover           { text-decoration: none;}
input, 
textarea          { font-family: 'Helvetica Neue', Helvetica, Arial, 微軟正黑體, sans-serif;}
input:focus, 
textarea:focus    { outline: none;}

::selection, 
a::selection, 
img::selection    { background: #aaa; color: #fff;}
::-moz-selection  { background: #aaa; color: #fff;}

p                 {line-height: 1.5em;}


/************************* Universal **********************************/
body{
  	background: #fff;
}

.wrapper{
  	position: relative;
  	width: 100%;
  	text-align: center;
  	margin: 0 auto;
}


.footer{
  	position: relative;
  	width: 100%;
  	max-width: 1000px;
  	margin: 0 auto;
}
.footer .credit{
  	text-align: center;
}
.footer .credit a, .footer .credit a:visited{
  	color: #0084ef;
  	text-decoration: underline;
}
.footer .credit a:hover{
  	color: #2d61ca;
}


/************************* header **********************************/

.header{
	height: 38.33vw;
	position: relative;
  	background: url(../Image/kv.jpg) top center no-repeat;
  	background-size: cover;
}
.header h1{
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}
.header .phone{
	display: none
}



.intro{
	max-width: 1000px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 20px 20px 0px 20px;
	text-align: left;
}
.list{
	padding-left: 100px;
	padding-right: 120px;
	margin-top: 30px;
}
.list .entry{
	display: flex;
	margin-bottom: 30px;
}
.list .entry .title{
	width: 160px;
	flex-shrink: 0;
}
.list .entry .title img{
	display: block;
	width: 100%;
}
.list .entry .text{
	padding-left: 20px;
	padding-top: 8px;
}
.list .entry .text .major{
	color: #0760cf;
	font-weight: bold;
	font-size: 2em;
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 1.2em;
}
.list .entry .text .minor{
	margin: 0;
	padding: 0;
	line-height: 1.4em;
}
.intro .note{
	color: #b50d0a;
	font-size: 0.9em;
	line-height: 1.3em;
}











.main{
	background: #b4d1e6;
	padding-top: 30px;
	padding-bottom: 60px;
}

.nav{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 10px;
}
.nav:after{
	content: '';
	clear: both;
	display: block;
}
.nav a{
	display: block;
	float: left;
	margin: 0 0;
	padding: 10px 0;
	width: 49.5%;
	text-align: center;
	background: #424242;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.nav a img{
	filter : alpha(opacity=50);
	opacity : 0.5;
}

.nav a:hover img{
	filter : alpha(opacity=100);
	opacity : 1;
}

.nav .nav-intel-active{
	background: #004175;
	padding-bottom: 20px;
}
.nav .nav-intel-active img{
	filter : alpha(opacity=100);
	opacity : 1;
}
.nav .nav-amd-active{
	background: #b50d0a;
	padding-bottom: 20px;
}
.nav .nav-amd-active img{
	filter : alpha(opacity=100);
	opacity : 1;
}

.nav .nav-amd{
	margin-left: 1%;
}


.nav-line{
	background: #004175;
	height: 5px;
	max-width: 1000px;
	margin: 0 auto;
	transition: all 0.2s;
}
.nav-line.amd{
	background: #b50d0a;
}



/******* spec *******/
.table-amd{
	display: none;
}

.spec{
	width: 100%;
	max-width: 1000px;
	background: #fff;
	border-collapse: collapse;
	margin: 0 auto;
}
.spec th{
	padding: 8px;
	color: #fff;
}
.table-intel .spec th{
	background: #004175;
}
.table-amd .spec th{
	background: #b50d0a;
}
.spec td{
	padding: 8px;
	color: #000;
	text-align: center;
	border-bottom: 1px solid #bbb;
}
.spec tr:nth-child(even){
}
.spec .chipset{
	background: #666;
	color: #fff;
}
.spec .name{
	text-align: left;
	background: #888;
	color: #fff;
	border-left: 1px solid #bbb;
}
.spec td a{
	text-decoration: underline;
	color: #000;
}
.table-intel .spec a:hover{
	color: #004175;
}
.table-amd .spec a:hover{
	color: #b50d0a;
}
.spec .name a{
	color: #fff;
}
.spec .name a:hover{
	color: #ddd;
}



.spec .download{
	display: block;
	margin: 0 auto;
	width: 35px;
	height: 35px;
  	background: url(../Image/download.png) center no-repeat;
  	background-size: 25px;
  	transition: all 0.2s;
  	border-radius: 50%;
}
.spec .download:hover{
  	background-color: #e4e4e4;
}


/*暫時隱藏後兩欄*/
.spec th:nth-last-child(2),
.spec td:nth-last-child(2),
.spec th:last-child,
.spec td:last-child{
	display: none;
}



/******* add-content *******/

.add-content{
	max-width: 1000px;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	padding: 20px;
}
.add-content .title{
	font-weight: bold;
	font-size: 1.1em;
}
.add-content ol li b{
	text-decoration: underline;
	color: #0036ff;
}
.add-content ol img{
	display: block;
	margin: 0 auto;
	max-width: 100%;
}



/******* tag *******/

.tag{
	padding-bottom: 20px;
	max-width: 1000px;
	margin: 0 auto;
}
.tag ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.tag ul li{
	margin: 0;
	padding: 0;
	display: inline-block;
}
.tag ul a{
	display: inline-block;
	padding: 8px 15px;
	border-radius: 30px;
	border: 1px solid #16426c;
	color: #16426c;
	transition: all 0.2s;
	margin: 5px 2px;
}
.tag ul a:hover{
	background: #b50d0a;
	color: #b4d1e6;
	border-color: transparent;
}




/******* upgrade *******/
.gap{
	background: #373737;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	color: #fff;
	width: 100%;
	max-width: 1000px;
}

.upgrade{
	width: 100%;
	max-width: 1000px;
	background: #373737;
	border-collapse: collapse;
	margin: 0 auto;
}
.upgrade th{
	padding: 15px 8px 5px 8px;
	text-align: left;
	font-weight: normal;
}
.table-intel .upgrade th{
	color: #0084ef;
}
.table-amd .upgrade th{
	color: #dd0400;
}
.upgrade td{
	padding: 8px;
	color: #fff;
	background: #666;
	border-right: 1px solid #222;
	border-bottom: 1px solid #222;
	width: 20%;
}
.upgrade td a{
	text-decoration: underline;
	color: #fff;
}
.upgrade td a:visited{
}
.upgrade td a:hover{
	color: #ddd;
}








/*-----SCROLL UP-----*/
	.scrollUp {
	    position: fixed;
	    right: 30px;
	    bottom: 30px;
	    width: 45px;
	    height: 45px;
	    text-align: center;
	    cursor: pointer;
	    border-radius: 50%;
	    -webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    /*border: 2px solid #16426c;*/
	    z-index: 999;
	    /*opacity: 0;*/
	    background: #16426c;
	    transition: all 0.2s;
	}
	.scrollUp#scrollUpAmd {
	    display: none;
	}
	.scrollUp.hd-show {
	    opacity: 1;
	}
	.scrollUp:hover {
	    background-color: #0760cf;
	}
	.scrollUp:hover svg {
	    fill: #FFF;
	}
	.scrollUp svg {
	    display: block;
	    position: absolute;
	    margin: auto;
	    top: 0;
	    right: 0;
	    bottom: 5px;
	    left: 0;
	    fill: #fff;
	    -webkit-transform: rotateZ(270deg);
	    -moz-transform: rotateZ(270deg);
	    -ms-transform: rotateZ(270deg);
	    -o-transform: rotateZ(270deg);
	    transform: rotateZ(270deg);
	}













/*平板*/

@media (min-width: 719px) and (max-width: 959px) {

}

@media (max-width: 1023px) {
.list{
	padding-left: 5vw;
	padding-right: 5vw;
}
.list .entry .title{
	width: 100px;
}
.list .entry .text .major{
	font-size: 1.2em;
}
}

/*手機*/

@media (max-width: 719px) {
	.header {
	    height: auto;
	    position: relative;
	    background: #fff;
	}
	.header .phone{
		display: block;
		width: 100%;
	}
	.nav a img{
		width: 100%;
		max-width: 260px;
	}
	.scroll_table {
	    width: 100%;
	    max-width: 100%;
	    border-radius: 5px;
	    -moz-border-radius: 5px;
	    -webkit-border-radius: 5px;
	    position: relative;
	    overflow: auto !important;
	    overflow-y: hidden !important;
	}
}




@media (max-width: 500px) {
.list{
	padding-left: 0;
	padding-right: 0;
}
.list .entry .title{
	width: 80px;
}
.list .entry .text{
	padding-top: 2px;
	padding-left: 10px;
}
.list .entry .text .major br{
	display: none;
}
}