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

@font-face {
$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
}
body { margin:0; padding:0; font-family:"微軟正黑體"; 
text-align: justify;
text-justify:inter-ideograph;
}
img{ border:0;
vertical-align: middle;}
.clear{ clear:both;}
.clear{ clear:both;}

.center { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.kol { 
  position: absolute;
  top: 30%;
}
.back{ 
font-size: 14px;
line-height: 14px;
color: #CCCCCC;
background-color: #CCCCCC;
margin-right: 7px;
margin-left: 15px;
}
#div1 {
 position:relative;
}
#close {
z-index:999;
width:6%;
}
.box{
position: absolute;
top: 50%;
}
.box1{
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.box2{
vertical-align : middle ;
height : 100% ;
}
.box3{
display:inline-block;
vertical-align:middle;
}
.top1 a {
color: #000000;
}
.top1 a :hover { 
color: #0044BB; 
}
.top1 a :visited { 
color: #000000; 
}
.top1 a :active { 
color: #000000; 
}
.circle{
	border-width:1px;
	border-style:solid;
	border-color:#e40066;
	padding:3px;
	border-radius:18px;
}
.reader1{
	font-size: 14px;
	line-height: 22px;
	color: #000000;
	background-color:#FFFFFF;
	border-width:1px;
	border-style:solid;
	border-color:#DDDDDD;
	padding:14px;
	border-radius:18px;
	display: inline-block;
}
.reader1b{
	font-size: 14px;
	line-height: 22px;
	color: #1f527d;
	background-color:#FFFFFF;
	border-width:1px;
	border-style:solid;
	border-color:#DDDDDD;
	padding:14px;
	border-radius:18px;
	display: inline-block;
}
.reader2{
	font-size: 14px;
	line-height: 22px;
	color: #000000;
	background-color:#DDDDDD;
	border-width:1px;
	border-style:solid;
	border-color:#DDDDDD;
	padding:14px;
	border-radius:18px;
	text-align:left;
	display: inline-block;
}
.reader3{
	font-size: 14px;
	line-height: 22px;
	color: #000000;
	background-color:#FFFFFF;
	border-width:1px;
	border-style:solid;
	border-color:#DDDDDD;
	padding:5px;
	border-radius:8px;
	display: inline-block;
}
#category-head{
    width:100%;
    display: inline;
    white-space: nowrap;/*规定段落中的文本不进行换行*/
    overflow-x:scroll;/*水平方向，超出部分添加滚动机制*/
    float:left;/*一定要设置左侧浮动*/
    overflow-y:hidden/*竖直方向，超出部分隐藏*/
}
#category-head li{
    margin-top: 20px;
    display:inline-block;/*既可以水平排列，又可以设置宽高和边距*/
	margin-bottom: 20px;
}
.content{
	font-size: 14px;
	line-height: 18px;
	color: #666666;
}
.name{
	font-size: 14px;
	line-height: 18px;
	color: #3D3D3D;
	font-weight: 500;
}
.name1{
	font-size: 14px;
	line-height: 18px;
	color: #3D3D3D;
	font-weight: 800;
}
.koltop{
	font-size: 12px;
	line-height: 16px;
	color: #3D3D3D;
	font-weight: 300;
	text-align: center;
}
.title1{
	font-size: 14px;
	line-height: 18px;
	color: #0044BB;
	font-weight: 500;
}
.title2{
	font-size: 18px;
	line-height: 28px;
	color: #FFFFFF;
}
.title3{
	font-size: 22px;
	line-height: 32px;
	color: #1f527d;	
	font-weight: 500;
}
.title4{
	font-size: 16px;
	line-height: 20px;
	color: #0000000;
	font-weight: 800;
}
.title5{
	font-size: 16px;
	line-height: 20px;
	color: #FFFFFF;
	font-weight: 800;
}

.title6{
	font-size: 12px;
	line-height: 20px;
	color: #B4B4B4;
	padding-top: 5px;
}
.price{
	font-size: 14px;
	line-height: 36px;
	color: #434343;
}

.red{
	font-size: 18px;
	line-height: 30px;
	color: #e60012;
	font-weight: 500;
}
.ig{
	font-size: 20px;
	line-height: 36px;
	color: #007bff;
	text-align: center;
}
.blue{
	font-size: 18px;
	line-height: 30px;
	color: #17a2b8;
	font-weight: 500;
}

.banner{
	padding: 0 0 0px 0;
	background: url(../images/bg4.jpg);
	background-size: cover;
	height: 100%;
}

.book{
/* 設定背景圖片 */
background-image:url("../images/bg1.jpg");
background-size: cover;
}

.open{
/* 設定背景圖片 */
background-image:url("../images/bg2.jpg");
/* 讓圖片不重覆排列 */
background-repeat:repeat;
/* 固定背景圖片位置 */
background-attachment:fixed;
}

.writer{
/* 設定背景圖片 */
background-image:url("../images/bg5.jpg");
/* 讓圖片不重覆排列 */
background-repeat:repeat;
}

.color{
/* 設定背景圖片 */
background-image:url("../images/bg3.jpg");
/* 讓圖片不重覆排列 */
background-repeat:repeat;
}

.footer{ 
padding:0; 
margin:0; 
color: #ffffff;
text-align:center; 
width:100%;
background-color: #156a97;
}