@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: '荊南';
  src: url("https://www.cavesbooks.com.tw/Files/web_material/fonts/荊南波波黑-Bold.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*/
@font-face {
  font-family: 'onryou';
  src: url("https://www.cavesbooks.com.tw/Files/web_material/fonts/onryou.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')top center;
	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;
  font-family: Noto Sans TC, Montserrat, Roboto, Helvetica, Arial, sans-serif;
}


.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-over.png);
}


/*header*/
.header-title{max-width: 106.8rem;
    width: 100%;}
/*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 {
	aspect-ratio: 1 / 1;
	width: 10%;
	border-radius: 50%;	
}

/*nav*/

.w100 {  width: 100%}

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

.flex{
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.morebox {
  padding: 1rem;
  background: blue;
  font-size: 1.8rem;
}

.hover_scale{transition: 0.5s ease-out}
.hover_scale.zoom_out:hover {  transform: scale(.95)}
.hover_scale.zoom_in:hover {  transform: scale(1.05)}


.section1-2 {
  width: calc(50% - 1rem);  
}
.section1-3 {
  width: calc(33% - 1rem); 
}
.section1-4 {
  width: calc(25% - 1rem); 
}
.section1-5 {
  width: calc(20% - 1rem);  
}

.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: underline}


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

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

.extitle{color:green;font-size:1.6rem;background:yellowgreen}


/*文字區塊*/

.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;
}

/*xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px*/

@media (max-width:768px){
	.w100 img{width:100%}
}

	@media (max-width: 576px) {
	#logo-header .container.flex{flex-wrap:nowrap}
		#logo-header img{max-height:2.5rem}
	
		.m-section1-2{width: calc(50% - 1rem);}
}
@media (max-width: 425px) {
	#gotop{width:8rem!important}
}