@import url("reset.css");
@charset "utf-8";
/* CSS Document */

@font-face {
/*    font-family: CSong3HK-Medium;
    src: url("../font/CSong3HK-Medium.otf");*/
}

body {
/*	background:#eaeced;*/
/*	font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4,Verdana,Helvetica,Arial,sans-serif;*/
	background-image:url(../images/p4.png);
	background-repeat:repeat;
/*	background-color:#099;*/
	font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif;
	color:#39393a;
	font-size:18px;
	line-height:2;
	opacity:1;
}
a{
 outline: none; /* for Firefox */
 hlbr:expression(this.onFocus=this.blur()); /* for IE */
}

/*其他的頁面*/
/* ==頁首上連結區============================ */
/*=====TOP=====*/
#TOP{
	width:100%;
	height:20px;
	/*background:url(../images/dust.png) repeat;*/
/*	background:#eaeced;*/
}

#TOP h1{
	display:block;
	width:100%;
	border-top:4px #00a0e9 solid;
	text-indent:-9999px;
}

/* ==頁首區============================ */
/*=====HEADER=====*/
#HEADER {
	width:100%;
	height:5px;
/*	background:url(../images/dust.png) repeat;*/
/*	border-bottom:1px #e0eff7 solid;*/
	margin-bottom:30px;
}
#HEADER .header_inner{
	width:1000px;
	height:0px;
	margin:0 auto;
	position:relative;
	}
#HEADER ul.family{
	position:absolute;
	color:#959595;
	font-size:11px;
	left: 50px;
	top: -13px;
	}
#HEADER ul.family li{}
#HEADER ul.family li a{
	font-size:11px;
	color:#959595;
	text-decoration:none;
	}
#HEADER ul.family li a:hover{color:#00a0e9;}
#HEADER h1 {
	display:block;
	position:absolute;
	width:140px;
	height:35px;
	background:url(../images/udnreading_logo.png) no-repeat;
	text-indent:-9999px;
	left: 0px;
	top: 15px;
}

/*=====LOGO=====*/
#LOGO{
	position:absolute;
	left:850px;
	top:-7px;
}

#LOGO img{
}

/*=====WRAP=====*/
#WRAP {
	width:1000px;
	margin:0 auto;
	overflow:hidden;
	margin-bottom:20px;
	position:relative;
}

/*=====MAIN_SORT=====*/
#MAIN_SORT{
	width:95%;
	margin:0 auto;
	margin-bottom:50px;
}

.title{
	width:1000px;
	height:115px;
	background:url(../images/title.png) no-repeat;
	margin-bottom:45px;
}

ul.sort{
	width:793px;
	height:150px;
	background-image:url(../images/sort_bg.png);
	margin:0 auto;
}

.sort_01{
	float:left;
	width:150px;
	height:150px;
	background-image:url(../images/sort.png);
	background-position:0px 0;
	margin-left:122px;
	opacity:1;
	cursor:pointer;
}

.sort_02{
	float:left;
	width:150px;
	height:150px;
	background-image:url(../images/sort.png);
	background-position:0px -150px;
	margin-left:50px;
	opacity:1;
	cursor:pointer;
}

.sort_03{
	float:left;
	width:150px;
	height:150px;
	background-image:url(../images/sort.png);
	background-position:0px -300px;
	margin-left:50px;
	opacity:1;
	cursor:pointer;
}

.sort_01:hover,.sort_02:hover,.sort_03:hover{
	background-image:url(../images/sort.png) -122px 0px;
	opacity:0.85;
}

/*=====PART_01=====*/
#PART_01{
	width:95%;
	margin:0 auto;
}

.sub_title{
	height:60px;
	margin-bottom:15px;
}

span.sub_title_01{
	display:block;
	float:left;
	width:60px;
	height:60px;
	background:url(../images/icon.png) no-repeat;
	background-position:0px 0px;	
}

span.sub_title_02{
	display:block;
	float:left;
	width:60px;
	height:60px;
	background:url(../images/icon.png) no-repeat;
	background-position:0px -60px;
	margin-right:15px;
}

span.sub_title_03{
	display:block;
	float:left;
	width:60px;
	height:60px;
	background:url(../images/icon.png) no-repeat;
	background-position:0px -120px;
}

span.sub_title_text{
	display:block;
	float:left;
	height:60px;
	line-height:60px;
	font-size:24px;
}

.pic_area_01{
	width:1000px;
	height:400px;
	margin-bottom:20px;
}

.pic_w337{
	float:left;
	margin-right:40px;
}

.pic_w337 img{
	height:385px;
}

.pic_w550{
	float:left;
}

.pic_w550 img{
	width:550px;
	height:auto;
}

.content_w920{
	width:920px;
}

#WRAP p{
	margin-bottom:20px;
}


/*=====divided_line=====*/
.divided_line{
	clear:both;
	background:url(../images/divided_line.png) no-repeat;
	width:1000px;
	height:14px;
	margin:40px 0 40px 0px;
}


/*=====PART_02=====*/
#PART_02{
	width:95%;
	margin:0 auto;
}

.content_w446{
	width:920px;
	margin-right:30px;
	float:left;
}
/*
.pic_area_02{
	float:left;
	width:1000px;
	height:390px;
	margin-bottom:20px;
}
*/
.pic_area_02{
	clear:both;
	width:1000px;
	height:390px;
	overflow:hidden;
	margin-bottom:20px;
}
/*
.pic_w465{
	clear:both;
	width:465px;
	margin-bottom:30px;
}

.pic_w465 img{
	width:465px;
	height:auto;
}
*/
.pic_w465{
	float:left;
	margin-right:10px;
}

.pic_w465 img{
	width:465px;
	height:370px;
}


/*=====PART_03=====*/
#PART_03{
	width:95%;
	margin:0 auto;
}

.pic_area_03{
	clear:both;
	width:1000px;
	height:320px;
	overflow:hidden;
	margin-bottom:20px;
}

.pic_w470a{
	float:left;
	margin-right:10px;
}

.pic_w470a img{
	width:470px;
	height:auto;
}

.pic_area_04{
	clear:both;
	width:1000px;
	height:380px;
	overflow:hidden;
	margin-bottom:20px;
}

.content_w420{
	width:420px;
	float:left;
}

.pic_area_05{
	float:left;
	width:1000px;
	height:400px;
	margin:0 40px 20px 0;
}
.pic_w470b{
	float:left;
	margin-right:10px;
}

.pic_w470b img{
	width:470px;
	height:370px;
}


/* ==頁尾區============================ */
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:325px;
	right:5px;
	overflow:hidden;
	width:54px;
	height:54px;
	border:none;
	text-indent:100%;
	background:url(../images/ui.totop.png) no-repeat left top;
}
#toTopHover {
	background:url(../images/ui.totop.png) no-repeat left -54px;
	width:54px;
	height:54px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {outline:none;}

#FOOTER {
	clear:both;
	width:100%;
	height:320px;
	background-color:#313131;
}
#FOOTER .footer_inner{width:980px; height:280px; margin:0 auto; padding-top:40px;}
#FOOTER h2 {
	clear:both;
	font-size:10px;
	line-height:40px;
	color:#c6c6c6;
	text-align:center;
	letter-spacing:1px;
	font-weight:normal;
}
#FOOTER ul li{display:block; float:left; margin-bottom:40px;}
#FOOTER ul li h3{display:block; text-indent:-9999px; margin-bottom:15px;}
#FOOTER ul li a{
	color:#dddddd;
	text-decoration:none;
	font-size:15px;
	letter-spacing:2px;
	line-height:28px;
	}
#FOOTER ul li a:hover{color:#00a0e9;}
#FOOTER li.footer_tltle1{
	width:75px;
	height:200px;
	padding:0 32px 0 10px;
	border-right:1px #000 solid;
	margin-left:50px;
	}
#FOOTER li.footer_tltle1 h3{
	width:75px;
	height:20px;
	background:url(../images/footer_title.png) no-repeat 0 0; 
	}
#FOOTER li.footer_tltle2{
	width:188px;
	height:200px;
	padding:0 33px 0 57px;
	border-right:1px #000 solid;
	border-left:1px #5c5c5c solid;
	}
#FOOTER li.footer_tltle2 h3{
	width:277px;
	height:20px;
	background:url(../images/footer_title.png) no-repeat 0 -20px; 
	}
#FOOTER li.footer_tltle2 span.ft_span1{margin-right:77px;}
#FOOTER li.footer_tltle2 span.ft_span2{margin-right:60px;}
#FOOTER li.footer_tltle3{
	width:188px;
	height:200px;
	padding:0 33px 0 57px;
	border-right:1px #000 solid;
	border-left:1px #5c5c5c solid;
	}
#FOOTER li.footer_tltle3 h3{
	width:188px;
	height:20px;
	background:url(../images/footer_title.png) no-repeat 0 -40px; 
	}
#FOOTER li.footer_tltle3 a{float:left;}
#FOOTER li.footer_tltle3 a.ft_sbtext{
	display:block;
	width:145px;
	margin-right:8px;
	}
#FOOTER li.footer_tltle3 a.ft_checkbox{
	display:block;
	width:15px;
	height:15px;
	/*background:url(../images/ft_dot.png) no-repeat 0 0;*/
	margin-top:6px;
	}
/*#FOOTER li.footer_tltle3 a.ft_checkbox:hover{
	display:block;
	width:15px;
	height:15px;
	background:url(../images/ft_dot.png) no-repeat 0 -15px;
	margin-top:6px;
	}*/
#FOOTER li.footer_tltle3 .sb_btn a{
	display:block;
	width:166px;
	height:26px;
	background:url(../images/ft_sb_btn2.png) 0 0;
	text-indent:-9999px;
	}
#FOOTER li.footer_tltle3 .sb_btn a:hover{background:url(../images/ft_sb_btn2.png) 0 -26px;}
#FOOTER li.footer_tltle4{
	width:170px;
	height:200px;
	padding:0 0px 0 36px;
	border-left:1px #5c5c5c solid;
	}
#FOOTER li.footer_tltle4 h3{
	width:170px;
	height:20px;
	background:url(../images/footer_title.png) no-repeat 0 -60px; 
	}
#FOOTER li.footer_tltle4 a.ft_googleshare{
	display:block;
	width:47px;
	height:49px;
	float:left;
	margin-right:15px;
	margin-top:15px;
	background:url(../images/share_icon.png) no-repeat 0px 0px;
	}
#FOOTER li.footer_tltle4 a.ft_googleshare:hover{background:url(../images/share_icon.png) no-repeat 0px -49px;}
#FOOTER li.footer_tltle4 a.ft_fbshare{
	display:block;
	width:47px;
	height:49px;
	float:left;
	margin-top:15px;
	background:url(../images/share_icon.png) no-repeat 0px -98px;
	}
#FOOTER li.footer_tltle4 a.ft_fbshare:hover{background:url(../images/share_icon.png) no-repeat 0px -147px;}