/* ---背景--- */
body{
  background-color: #253249;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%235e82c3' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  position: relative;
  width: 960px;
  margin:auto;
}

/* ---置頂按鈕--- */
.nav_area{
  position:  fixed ;
  width: 960px;
  font-size: 0;
  letter-spacing: -1px;
  top:0%;
  word-spacing: -2px;
  z-index:10000000;
}

.nav_999{
 background-color: #7C4337; 
  height:60px;
  width:960px;
z-index:100000000;
}

.nav01{
  background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav01.png);
  border-radius: 0px 0px 25px 25px;  
  display: inline-block;
  height: 61px;
  letter-spacing: 0px;
  padding: 12px;
  width: 87px;
}

.navui{
position:absolute;
top: 99%;
}

.navlogolef{
position:absolute;
left: 1%;
top:10%;
}

.navlogoright{
position:absolute;
right: -1%;
top: 11%;
}

.navtxt{
font-size: 12px;
font-family:新細明體;
position:absolute;
right: 0%;
top: 65%;
color: white ;
}

.nav01:hover { 
	background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav01_h.png)
}

.nav02{
  background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav02.png);
  border-radius: 0px 0px 25px 25px;  
  display: inline-block;
  height: 61px;
  letter-spacing: 0px;
  padding: 12px;
  width: 87px;
}

.nav02:hover { 
	background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav02_h.png)
}


.nav03{
  background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav03.png);
  border-radius: 0px 0px 25px 25px;  
  display: inline-block;
  height: 61px;
  letter-spacing: 0px;
  padding: 12px;
  width: 87px;
}

.nav03:hover { 
	background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav03_h.png)
}


.nav04{
  background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav04.png);
  border-radius: 0px 0px 25px 25px;  
  display: inline-block;
  height: 61px;
  letter-spacing: 0px;
  padding: 12px;
  width: 87px;
}

.nav04:hover { 
	background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav04_h.png)
}


.nav05{
  background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav05.png);
  border-radius: 0px 0px 25px 25px;  
  display: inline-block;
  height: 61px;
  letter-spacing: 0px;
  padding: 12px;
  width: 87px;
}

.nav05:hover { 
	background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav05_h.png)
}


.nav06{
  background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav06.png);
  border-radius: 0px 0px 25px 25px;  
  display: inline-block;
  height: 61px;
  letter-spacing: 0px;
  padding: 12px;
  width: 87px;
}

.nav06:hover { 
	background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav06_h.png)
}


.nav07{
  background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav07.png);
  border-radius: 0px 0px 25px 25px;  
  display: inline-block;
  height: 61px;
  letter-spacing: 0px;
  padding: 12px;
  width: 87px;
}

.nav07:hover { 
	background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav07_h.png)
}


.nav08{
  background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav08.png);
  border-radius: 0px 0px 25px 25px;  
  display: inline-block;
  height: 61px;
  letter-spacing: 0px;
  padding: 12px;
  width: 87px;
}

.nav08:hover { 
	background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/nav08_h.png)
}


/* ---00主視覺--- */
.main01{
  border: 0px ;
  background-image: url(http://www.ddc.com.tw/ec/event/2018/03/buddhism/img/00_main.png);
  width: 960px ;
  height: 700px ;
	background-repeat: no-repeat;
	background-position: center top;
	overflow: hidden;
}
.title00{
 position:absolute;
 top: 1.5%;
}
.title00_1{
 position:absolute;
 top: 1.65%;
 right: 9%;
}
.title00_2{
 position:absolute;
 top: 3.2%;
 right: 15%;
}
/* ---01看見幸福的曙光--- */
.area01{
  border: 0px ;
  max-width: 960px ;
  width: 100%;
  height: 1185px ;
  background-color: #efeeca;
  background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%23fffee4' fill-opacity='0.42' fill-rule='evenodd'/%3E%3C/svg%3E");
  margin:0 auto;
}

.title01_0{
 position:absolute;
 top: 8%;
}

.title01_1{
position:absolute;
top: 10.5%;
left: -1%;
}

.title01_2{
position:absolute;
top: 11%;
right: 2%;
}

.title01_1left{
display: block;
margin-bottom:50px;
}

.title01_1right{
display: block;
margin-bottom:50px;
}


/* ---02年度最暢銷--- */
.area02{
  border: 0px ;
  width: 960px ;
  height: 845px ;
  background-color: #ffc7af;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23fffee4' fill-opacity='0.14' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.title02_0{
 position:absolute;
 top: 22%;
}

.title02_1{
  background-image: url(https://www.ddc.com.tw/ec/event/2018/03/buddhism/img/02bg.png);
  width: 960px ;
  height: 601px ;
  position:absolute;
  top: 25%;
}
.title02_1uil{
position:absolute;
top: 2%;
left: 9%;
display: inline-block ;
}
.title02_1uir{
position:absolute;
top: 2%;
right: 8.2%;
display: inline-block ;
}

/* ---03年度最優惠--- */
.area03{
  border: 0px ;
  width: 960px ;
  height: 1038px ;
  background-color: #99dad3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d1fffa' fill-opacity='0.26'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.title03_0{
 position:absolute;
 top: 32.2%;
}

.title03_1{
position:absolute;
top: 35%;
left: -1;
}

.title03_2{
position:absolute;
top: 35.8%;
right: 1.5%;
}

.title03_1left{
display: block;
margin-bottom:50px;
}

.title03_1right{
display: block;
margin-bottom:50px;
}

/* ---04注目新書--- */
.area04{
  border: 0px ;
  width: 960px ;
  height: 690px ;
 background-color: #004781;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%2379c3ff' fill-opacity='0.09'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");
}

.title04_0{
 position:absolute;
 top: 44.7%;
}

.title04_1{
}

/* ---05各類暢銷選讀--- */
.area05{
  border: 0px ;
  width: 960px ;
  height: 2157px ;
background-color: #f2cc61;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23fff2cf' fill-opacity='0.46'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.title05_0{
 position:absolute;
 top: 53%;
}

.title05_3bookli_1{
position:absolute;
top: 56%;
left: 0.5% ;
}

.title05_3bookui_1{
display: inline-block;
width: 312px ;
}

.title05_3bookli_2{
position:absolute;
top: 60.7%;
left: 18% ;
}

.title05_3bookui_2{
display: inline-block;
width: 310px ;
}

.title05_3bookli_3{
position:absolute;
top: 65.5%;
left: 0.7% ;
}

.title05_3bookui_3{
display: inline-block;
width: 310px ;
}

.title05_3bookli_4{
position:absolute;
top: 70.3%;
left: 18% ;
}

.title05_3bookui_4{
display: inline-block;
width: 310px ;
}

.title05_3bookli_5{
position:absolute;
top: 75.1%;
right: 1.4% ;
}

.title05_3bookui_5{
display: inline-block;
width: 311px ;
}

/* ---06作家一覽表--- */
.area06{
  border: 0px ;
  width: 960px ;
  height: 977px ;
background-color: #4d4931;
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fff2cf' fill-opacity='0.09'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.title06_0{
 position:absolute;
 top:80.6%;
}

#main {
	background-color: #C6D369;
	width: 940px;
	height: 590px;
}
#css_table_01 {
	display: table;
	width: 960px;
	margin: 0px 0.7%;
	padding-top: 10px;
	position: relative;
  top: 20% ;
}
.css_tr {
	display: table-row;
	overflow: auto;
}
.css_td {
	display: table-cell;
	width: inherit;
	height: 90px;
	float: left;
	margin-right:96px;
	margin-bottom: 5px;
}
.css_td img {
	display: block;
	width: 85px;
	height: 85px;
	position: absolute;
}
.css_td .overlay {
	position: absolute;
	width: 85px;
	height: 85px;
	background-color: rgba(240, 94, 28, 0);
	transition:all .2s;
}
.css_td:hover .overlay {
	background-color: rgba(240, 94, 28, .9);
	width:85px;
	height:85px;
}
.css_td a {
	display: block;
	text-align: center;
	line-height: 85px;
	color: rgba(255, 255, 255, 0);
	text-decoration: none;
 transition: all .2s linear;
 -o-transition: all .2s linear;
 -webkit-transition: all .2s linear;
 -moz-transition: all .2s linear;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	overflow: hidden;
}
.css_td:hover a {
	color: rgba(255, 255, 255, 1);
}

.hihihi{
 position:absolute;
 top: 90.3%;
 left:46.5%;
}

/* ---07出版社一覽--- */
.area07{
  border: 0px ;
  width: 960px ;
  height: 693px ;
background-color: #c6d369;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f6ffb5' fill-opacity='0.26' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.title07_0{
 position:absolute;
 top: 92.1%;
}

.title07123{
position:absolute;
top: 93.4%;
left:1.5%;
}

.yoyoyo{
 position:absolute;
 top: 99%;
 left:46%;
}

/* ---最後--- */
.fin{
width:960px;
height:80px;  
position:absolute;
background-color: #7C4337; 
font-size: 12px;
font-family:新細明體;
color:white;
text-align:center;
 }