﻿@import url("reset.css");

body{ background-color:#202020;font-family:'微軟正黑體',Helvetica; width:100%;  }

.wrapper{ width:100%; }

/* 首頁 */
.header{
	background-image:url(../images/header.png);
	background-repeat:no-repeat;
	height:120px;
	}

.page1{
	background-image:url(../images/background.jpg);
	height:768px;
	}


.logo{ 
    margin:0 auto;
	background-image:url(../images/htclogo.png); 
	background-repeat:no-repeat; 
	width:980px; 
	height:120px;
}

.logo ul{ width:980px;  }

.logo ul li{
	float:right;
	margin-left:30px;
	margin-top:60px;
	}

.logo ul li a{
	color:#CCC;
	font-size:16px;
	text-decoration:none;
	font-family:"微軟正黑體";
	}

.logo ul li a:hover{ color:#b98f53;}

.logo ul li .onnav{ color:#b98f53;}

.logo ul li.home{
	background-image:url(../images/backhome.png);
	background-repeat:no-repeat;
	width:80px;
	height:20px;
	padding-left:20px;
	}

.logo ul li.home a{
	color:#CCC;
	font-size:16px; 
	text-decoration:none;
	font-family:"微軟正黑體";
	}

.logo ul li.home a:hover{ color:#b98f53;}

.page1 .vip{
	position:relative;
	background-image:url(../images/vip.png);
	background-repeat:no-repeat;
	width:980px;
	height:310px;
	margin:0 auto;
	margin-top:70px;
	}

.page1 .vip li{
	display:block;
	position:absolute;
	background-image:url(../images/vip_butten.png);
	width:96px;
	height:138px;
	right:35px;
	bottom:0;
	}

.page1 .vip li a{
	display:block;
	font-family:'微軟正黑體';
	width:48px;
	margin:0 auto;
	margin-top:25px;
	color:#FFF;
	font-size:22px;
	text-shadow: 1px 1px 5px #333;
	line-height:24px;
	text-decoration:none;
	}


.page1 .vip li a:hover{
	color:#333;
	}
	
	
.page1 .banner{}

.page1 .banner ul{ margin:0 auto; width:980px; margin-top:10px;}

.page1 .banner ul li{
	float:left;
	margin-right:6px;
	background-image:url(../images/banner.png);
	width:320px;
	height:215px;
	}

.page1 .banner img{
	display:block;
	margin:0 auto;
	margin-top:9px;
	}

.page2{
	background-color:#FFF;
	height:250px;
	}
	

.page2 .news{ display:block; margin:0 auto; width:980px; height:250px;}
.page2 .news .news_top{
	display:block;
	margin:0 auto;
	margin-top:40px;
	}

.page2 .news ul{}

.page2 .news ul li{
	float:left;
	display:block;
	margin-right:11px;
	margin-top:20px;
	background-image:url(../images/news.jpg);
	background-repeat:no-repeat;
	width:315px;
	height:110px;
	}
.page2 .news ul li img{ float:left; margin-top:7px; margin-left:7px;}

.page2 .news ul li h3{
	display:block;
	margin-left:165px;
	width:150px;
    color:#960; 
	font-size:15px;
	font-weight:bold;
	}

.page2 .news ul li h5{
	display:block;
	margin-left:165px;
	margin-top:5px;
	line-height:18px;
	width:150px;
    color:#666; 
	font-size:12px;
	font-weight:100;
	}
	
.page2 .news ul li a{
	display:block;
	margin-left:165px;
	font-size:13px;
	text-decoration:none;
	color:#333;
	font-weight:bold;
	text-align:right;
	padding:10px;
	background-image:url(../images/more.png);
	background-position:right;
	background-repeat:no-repeat;
	width:130px;}

.page2 .news ul li a:hover{
	background-image:url(../images/more_hover.png);
	color:#960;}




.page3 { width:100%; height:400px; background-color:#e5e5e5;}


.page3 .page3_top{
	display:block;
	background-image:url(../images/page3_top.jpg);
	background-repeat:no-repeat;
	width:980px;
	height:100px;
	margin:0 auto;
	}

.page3 ul{ width:980px; margin:0 auto;}

.page3 ul li{ float:left; margin-right:10px; margin-top:10px;}

.page3 ul li.one a{display:block;background-image:url(../images/page3_one.jpg);width:316px;height:228px;}
.page3 ul li.one a:hover{ background-image:url(../images/page3_one_hover.jpg);}	

.page3 ul li.two a{display:block;background-image:url(../images/page3_two.jpg);width:316px;height:228px;}
.page3 ul li.two a:hover{ background-image:url(../images/page3_two_hover.jpg);}

.page3 ul li.three a{display:block;background-image:url(../images/page3_three.jpg);width:316px;height:228px;}
.page3 ul li.three a:hover{ background-image:url(../images/page3_three_hover.jpg);}



/* VIP深入了解頁 */
.vip_main{
	background-image:url(../images/background_main.jpg);
	height:1650px;
	}

.vip_main .top{
	background-image:url(../images/main_top.png);
	width:980px;
	height:320px;
	margin:0 auto;
	margin-top:20px;
	}
.vip_main .content{
	display:block;
	width:980px;
	height:719px;
	margin:0 auto;}

.vip_main .content1{
	display:block;
	background-image:url(../images/maim_content1.png);
	width:980px;
	height:424px;
	margin:0 auto;}

	
/* HTC活動推薦頁 */

.recommend_main{
	background-image:url(../images/background_main_page3.jpg);
	background-repeat:no-repeat;
	background-color:#FFF;
	}

.recommend_main .content{
	margin:0 auto;
	width:980px;
	margin-top:50px;
	padding-bottom: 50px;
	}
	

.recommend_main td,tr{
	font-family:'微軟正黑體',Helvetica;
	}

.recommend_main .content table tr td {padding:8px;}
.recommend_main .content ol {
    list-style: normal; 
	margin-left: 14px;
}
.recommend_main .content strong{
    font-weight: 800;
	color: #7DBE32;
}

.recommend_main .content a{text-decoration: none;}
.recommend_main .content a:link, a:visited {
    color: #7DBE32;
}

.recommend_main .content a:hover, a:active {
    color: #4D9F1C;
}
.footer a {
    color: #FFF;
    text-decoration: none;
}


/* HTC vip專屬頁 */
.exclusive_main{
	background-image:url(../images/background_main_page3.jpg);
	background-repeat:no-repeat;
	background-color:#FFF;
	height:850px;
	}
	
.exclusive_main .top{
	margin:0 auto;
	width:980px;
	margin-top:50px;
}

/* HTC vip專屬頁 slides */

.exclusive_main .vip_content{
	margin:0 auto;
	width:980px;
	height:280px;
	border-bottom:1px solid #EBEBEB;
	}
.vip_text{
	display:block;
	float:right;
	margin-top:22px;
	width:650px;
	height:225px;
}

.vip_text h3{ font-size:18px; color:#ad873d; }
.vip_text h4{ font-size:15px; color:#333; }
.vip_text p{ font-size:13px; color:#333; }

#vip_area{ display:block;float:left;width:300px; height:225px;position:relative;border:1px solid #EBEBEB;}
#vip_area .slides {overflow: hidden;position: relative;left: 0px;width:300px;	height: 225px;}
#vip_area .prev {position: absolute;top:90px;display:block;width: 30px;	height: 30px;	text-indent: -9999px;left: 0px;background:url(../images/left_arrow.png) no-repeat;}
#vip_area .next {position: absolute;top: 90px;display: block;width: 30px;	height: 30px;	text-indent: -9999px;right: 0px;background:url(../images/right_arrow.png) no-repeat;}
#vip_area .slides ul { position:absolute;width:9990px;height:100%; }
#vip_area .slides ul li { display:block; position:relative; float:left; width:300px; height:225px; text-align:center;}
#vip_area .slides ul li:hover a{ display:block;position:absolute;width:300px; height:225px; background-image:url(../images/hover.png);}
#vip_area .slides ul li span {display:block;color:#636363; font-size:12px; line-height:25px;width:300px; height:25px;  text-decoration:none;background-color:#EBEBEB;}


#vip_area1 { display:block;float:left;width:300px; height:225px;position:relative;border:1px solid #EBEBEB;}
#vip_area1 .slides {overflow: hidden;position: relative;left: 0px;width:300px;	height: 225px;}
#vip_area1 .prev {position: absolute;top:90px;display:block;width: 30px;	height: 30px;	text-indent: -9999px;left: 0px;background:url(../images/left_arrow.png) no-repeat;}
#vip_area1 .next {position: absolute;top: 90px;display: block;width: 30px;	height: 30px;	text-indent: -9999px;right: 0px;background:url(../images/right_arrow.png) no-repeat;}
#vip_area1 .slides ul { position:absolute;width:9990px;height:100%; }
#vip_area1 .slides ul li { display:block; position:relative; float:left; width:300px; height:225px; text-align:center;}
#vip_area1 .slides ul li:hover a{ display:block;position:absolute;width:300px; height:225px; background-image:url(../images/hover.png);}
#vip_area1 .slides ul li span {display:block;color:#636363; font-size:12px; line-height:25px;width:300px; height:25px;  text-decoration:none;background-color:#EBEBEB;}


.table-bg tbody tr:nth-child(even) td {
  background-color: #E7E7E7;
}

.footer{
	background-image:url(../images/footer.png);
	height:60px;
    }
	
.footer p{ 
	font-size:13px;
	font-family:'微軟正黑體',Helvetica;
	color:#999;
	text-align:center;
	line-height:60px;
    }
.footer a{ color:#FFF; 	text-decoration:none;}
.footer a:hover{ color:#b98f53;}


