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

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

body {
	background:#000;
	font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4,Verdana,Helvetica,Arial,sans-serif;}

a{
 outline: none; /* for Firefox */
 hlbr:expression(this.onFocus=this.blur()); /* for IE */
}

p{
	font-size:16px;
	line-height:1.5;
}


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

#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:20px;
	position:absolute;
	left:0px;
	top:20px;
	z-index:10;
}
#HEADER .header_inner{
	width:1200px;
	height:0px;
	margin:0 auto;
	position:relative;
	}
#HEADER ul.family{
	position:absolute;
	color:#959595;
	font-size:11px;
	left: 30px;
	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;
}

span.font_color_01{
	color:#CCC;
}

span.font_color_01:hover{
	color:#00a0e9;
}

/*=====LOGO=====*/
#LOGO{
	position:absolute;
	left:1040px;
	top:-5px;
}

#LOGO img{
	width:120px;
	height:35px;
}

#SOCIAL{
	width:120px;
	position: absolute;
	left:1040px;
	top: 40px;
	text-align:center;
}

#SOCIAL iframe{
	width:90%;
	margin:0 auto;
	text-align:center;
}

/*=====WRAP=====*/
#WRAP {
	width:1200px;
	margin:0 auto;
/*	margin-bottom:20px;*/
	position:relative;
	margin-top:-16px;
}

/*=====MAIN=====*/
#MAIN{
	width:1200px;
	height:515px;
	background:url(../images/content/main_visual.jpg) no-repeat;
	position:relative;
}

/*=====SORT=====*/
#SORT{
	clear:both;
	width:100%;
	height:64px;
	background:url(../images/content/bg_bt.jpg) no-repeat;
	margin:0 auto;
}

#SORT ul{
	clear:both;
	width:90%;
	height:64px;
	margin:0 auto;
}

#SORT ul li{
	width:205px;
	height:64px;
	float:left;
	cursor:pointer;
	margin:0 5px;
	text-indent:-9999px;
}

.bt_01{
	background-image:url(../images/content/bt.png);
	background-position:left 0px;
}

.bt_02{
	background-image:url(../images/content/bt.png);
	background-position:left -64px;
}

.bt_03{
	background-image:url(../images/content/bt.png);
	background-position:left -128px;
}

.bt_04{
	background-image:url(../images/content/bt.png);
	background-position:left -192px;
}

.bt_05{
	background-image:url(../images/content/bt.png);
	background-position:left -256px;
}

.bt_01:hover,.bt_01_on{
	background-image:url(../images/content/bt.png);
	background-position:right 0px;
}

.bt_02:hover,.bt_02_on{
	background-image:url(../images/content/bt.png);
	background-position:right -64px;
}

.bt_03:hover,.bt_03_on{
	background-image:url(../images/content/bt.png);
	background-position:right -128px;
}

.bt_04:hover,.bt_04_on{
	background-image:url(../images/content/bt.png);
	background-position:right -192px;
}

.bt_05:hover,.bt_05_on{
	background-image:url(../images/content/bt.png);
	background-position:right -256px;
}


/*=====PART_01=====*/
#PART_01{
	width:846px;
	min-height:410px;
	background-image:url(../images/content/PART_01.jpg);
	padding:22px 0 0 354px;
}

.author{
	width:250px;
	height:130px;
}

.author_intro{
	width:656px;
	height:195px;
	margin-left:45px;
	font-size:17px;
	line-height:1.8;
}

p.note{
	width:656px;
	color:#F60;
	font-size:17px;
	padding:58px 0 30px 515px;
	cursor:default;
}

/*=====PART_01_2=====*/
#PART_01_2{
	background-image:url(../images/content/bg.jpg);
}

ul.author_other{
	width:934px;
	height:285px;
	padding:57px 0 60px 0px;
	margin:0 auto;
}

ul.author_other li{
	float:left;
	color:#FFF;
	margin:0 12px;
	opacity:0.9;
	cursor:pointer;
}

ul.author_other li:hover{
	opacity:1;
}

ul.author_other li.author_other_01{
	width:60px;
	height:262px;
	background:url(../images/content/author_other_bg.jpg) no-repeat;
	background-position:left top;
}

ul.author_other li.author_other_02{
	width:60px;
	height:262px;
	background:url(../images/content/author_other_bg.jpg) no-repeat;
	background-position:right top;
	margin-top:22px;
}

ul.author_other li p.hight_01{
	width:35px;
	height:165px;
	font-size:32px;
	line-height:1.2;
	margin:0 auto;
	padding:25px 0 0 0;
}

ul.author_other li p.hight_02{
	width:35px;
	height:165px;
	font-size:32px;
	line-height:1.2;
	margin:0 auto;
	padding:45px 0 0 0;
}

ul.author_other li p.hight_03{
	width:35px;
	height:165px;
	font-size:32px;
	line-height:1.2;
	margin:0 auto;
	padding:70px 0 0 0;
}

/*=====PART_01_3=====*/
#PART_01_3{
	width:1200px;
	height:360px;
	background-image:url(../images/content/business.jpg);
	padding:0 0 5px 0;
}

/*=====PART_02=====*/
#PART_02{
	clear:both;
	width:100%;
	background:url(../images/content/bg.jpg) repeat;
}

.author_other_title{
	width:100%;
	height:52px;
	background:url(../images/content/author_other_deco.png) no-repeat;
	background-position:97px 15px; 
	padding:15px 0 0 0;
	margin-bottom:15px;
}

span.author_other_title_name{
	float:left;
	display:block;
	min-width:8%;
	margin-right:20px;
	font-size:24px;
	line-height:52px;
	margin-left:183px;
}

.author_other_title span.deco_line{
	float:left;
	display:block;
	padding:26px 0 0 0;
	width:70%;
	height:1px;
	border-bottom:#000 1px solid;
}

ul.line{
	height:540px;
	margin-left:36px;
	padding:0px 0px 30px 0px;
}

ul.line li{
	float:left;
	width:580px;
	height:540px;
	background-image:url(../images/content/book_bg.png);
	position:relative;
	cursor:auto;
}

ul.line li.right{
	margin-left:-30px;
}

.cover{
	width:180px;
	padding:60px 0 0 72px;
}

.cover img{
	width:180px;
	border:#c8c8c8 1px solid;
}

.content{
	width:240px;
	height:285px;
	color:#FFF;
	position:absolute;
	left:280px;
	top:170px;
}

p.book_name{
	font-size:22px;
	width:180px;
	margin-bottom:10px;
}

.content span.deco_line{
	display:block;
	width:238px;
	height:2px;
	padding:0;
	border-bottom:#CCC 1px solid;
	margin-bottom:10px;
}

.price{
	width:110px;
	height:50px;
	position:absolute;
	left:90px;
	top:360px;
}

span.white{
	color:#cecece;
}

span.red{
	color:#f03f3f;
	font-size:19px;
	margin-left:-2px;
}

.free_trail{
	width: 165px;
	height: 70px;
	background-image:url(../images/content/free_trail.png);
	position: absolute;
	left: 58px;
	top: 424px;
	cursor:pointer;
	opacity:0.8;
}

.more{
	width: 165px;
	height: 70px;
	background-image:url(../images/content/more.png);
	position: absolute;
	left: 58px;
	top: 424px;
	cursor:pointer;
	opacity:0.8;
}

.free_trail:hover,.more:hover{
	opacity:1;
}


/*=====PART_03=====*/
#PART_03{
	width:100%;
	height:70px;
	background:url(../images/content/bg.jpg) repeat;
}


/* ==頁尾區============================ */
#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;}