@charset "utf-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
/*Noto Sans TC 黑體 Noto Serif TC 明體*/
@font-face {
  font-family: '圆体夏蝉丸ゴシック';
  src: url("https://www.cavesbooks.com.tw/Files/web_material/fonts/圆体夏蝉丸ゴシック.ttf");
}/*圆体夏蝉丸*/
@font-face {
  font-family: 'jf-openhuninn-2.0';
  src: url("https://www.cavesbooks.com.tw/Files/web_material/fonts/jf-openhuninn-2.0.ttf");
}/*粉圓2.0*/
html {font-size:10px;}
#background_wrap {
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
  background: url(images/bg.jpg);
	background-attachment: scroll;
	background-size: cover;
}
p,h3{margin:0}
li{list-style-type: none}
img {
  border: 0;
  vertical-align: bottom;
}
body {
  margin: 0;
  padding: 0;
  background-color: transparent;
  font-family: Noto Sans TC, Montserrat, Roboto, Helvetica, Arial, sans-serif;
}
/*去除原始設定底線*/
a:-webkit-any-link{
  text-decoration: none;

}


.container{max-width:120rem;margin:0 auto;text-align: center;}
/*logo*/
#logo-header {  background-color: black;}
.logo {  padding: 1rem;}
.social_media_logo {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
  max-width: 15rem;
  align-items: center;
}
.social_media_logo img {
  height: 3.5rem;
  margin-left: 1rem;
}
/*logo*/

#gotop {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 12rem;
	height:12rem;
	background: url(images/top.png)center no-repeat;
	background-size:contain;
}
#gotop:hover {
	background-image: url(images/top-hover.png);
}


/*header*/
.header-title{
  max-width: 106.8rem;
  width: 100%;
  margin: 0 auto;
}
/*header*/

/*nav*/
nav li {
width: calc(25% - 2rem);
    list-style-type: none;
    padding: 2rem;
}
nav li a {
  text-decoration: none;
  color:black;}
nav li a:hover {
  color:blue;
}
nav li.act a {
  color: red;
}
nav li a:hover span.arrow {
  transform: rotate(90deg)
}

nav li.act span.arrow {
  transform: rotate(90deg)
}

nav.circle li {
	width: 10%;
	border-radius: 50%;	
}

/*nav*/


.pad50{padding:2rem 0}
.pad20{padding:2rem 0}

.flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
}

.flex-1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: stretch;
}
.flex-2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 0;
}
.flex-3 {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
}
.flex-4 {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content: center;
}

.item01{
  margin: 0px 12px;
}

.morebox {
  padding: 1rem;
  background: blue;
  font-size: 1.8rem;
}


.ad {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
   text-align: center;
}
.ad a {
    width: calc(50% - 20px);
    padding: 1rem;
}
.ad a img{width:100%;transition: transform .2s linear;}
.ad a img:hover {
    transform: scale(.98);
}

/*產品*/

.book a{text-decoration: none;color:black;}
.bookname{text-decoration: none;}
.bookname-1{text-decoration: none;}
.cover {
  max-width:90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
}
.cover img {
  max-width:100%;
  max-height: 100%;  
  object-fit: contain;
}
.cover-1 {
  max-width:66%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
}
.cover-1 img {
  max-width:100%;
  max-height: 100%;  
  object-fit: contain;
}
.cover-2 {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
}
.cover-2 img {
  max-width: 100%;
  max-height: 100%;  
  object-fit: contain;
}


.cover-3 {
  max-width:93%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
}
.cover-3 img {
  max-width: 100%;
  max-height: 100%;  
  object-fit: contain;
}

.cover-4 {
  max-width:93%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
}
.cover-4 img {
  max-width: 70%;
  max-height: 100%;  
  object-fit: contain;
}
.cover-5 {
  max-width:100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
}
.cover-5 img {
  max-width: 100%;
  max-height: 100%;  
  object-fit: contain;
}

.bookname a{display: inline-block;    color: black;}
.bookname a:hover{  color: #ffffff}



/*文字區塊*/

.f-w-b {
  font-weight: bold
}
.font15 {
  font-size: 1.5rem;
}
.font18 {
  font-size:1.8rem;
}
.font20 {
  font-size: 2rem;
}
.font24 {
  font-size: 2.4rem;
}
.font30 {
  font-size:3rem;
}
.font36 {
  font-size: 3.6rem;
}
.text-align-l {
  text-align: left;
}
.text-align-r {
  text-align: right;
}
.text-align-c {
  text-align: center;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.material-symbols-sharp, .material-symbols-outlined {
  vertical-align: middle;
}
/*文字區塊*/
footer {
  padding: 10px 0;
  font-size: 1.2rem;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  color: #fff;
  background-color: #000;
  text-align: center;
}



.banner img {
  width: 960px;
  display: block;
  margin: 80px auto;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  background-clip: text;
}


.header-title02 {
  max-width: 80%;
  margin: 20px;
}