@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*/
@font-face {
  font-family: 'Kaisei';
  src: url("https://www.cavesbooks.com.tw/Files/web_material/fonts/KaiseiHarunoUmi-Bold.ttf");
}/*Kaisei*/
@font-face {
  font-family: 'NaikaiFont';
  src: url("https://www.cavesbooks.com.tw/Files/web_material/fonts/NaikaiFont-Bold.woff");
}/*瀨戶字體*/
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;
}

.container-a{
  max-width:120rem;
  margin:20px auto;
  text-align: center;
}
.container-b{
  width: 100%;
  max-width:100rem;
  margin:20px 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: 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 {  max-width: 100%}

.pad50{padding:5rem 0}
.pad20{padding:2rem 0}
.flex-top{
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.flex{
	display:flex;
	justify-content: center;
	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:rgb(255, 255, 255)}
/* .bookname{text-decoration: underline} */

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

.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{max-width:80%}
}

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


.header-title {
	max-width:100%;	
	transition: 0.5s ease-out;
	margin: 0;
}
.header-title1 {
	max-width:60%;	
	transition: 0.5s ease-out;
	margin: 0;
}


/*標題持續動畫*/ 
  .head-move{
    animation-name: cloud;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	margin: 0 0 0 258px;
  }

  @keyframes cloud{
	0% {
        transform: scale(1);
      }

      50% {
        transform: scale(.92);
      }

      100% {
        transform: scale(1);
      }
  }
/*標題持續動畫-end*/

.flex-people{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: flex-start;
}
.flex-book{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
}


a{text-decoration: none;}
.wrapper:before {
	content: "";
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url("images/bg.jpg")center 0 no-repeat;
	background-size: cover;
	background-color: transparent;
}
/*gotop*/
#gotop {
	background-image: url(images/top.png);
	z-index: 999;
}
#gotop:hover {
	background-image: url(images/TOP_hover.png);
}
section {
	background-image: url(images/book-bg.png);
	background-position: center;
	padding: 0 0 2rem 0;
}
/*gotop*/	


.w100 img{
	max-width:55%
}
.book{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:5px 0;
    background: url(images/container-a.png);
}
.book-1{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 20px 0;
    background: url(images/container-b.png);
}
.book-2{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 20px 0;
    background: url(images/container-c.png);
}
.book-3{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 20px 0;
    background: url(images/container-d.png);
}

.book-bottom{
    background: #ecffd382;
}
h4.w100.itema{
	color:white;
}





a.book_category{font-size: 2rem;   
font-weight: bold;
border-bottom: 
	0.2rem solid;margin-bottom: 1.5rem;}
	a.book_category.itemb{color: #e79238;}
	a.book_category.itemc{color: #509f92;}
	a.book_category.itemd{color: #9d6684;}
	a.book_category.iteme{color: #5c5b93;}	
.item-title {
	padding: 5rem 0;display: flex;
    align-items: center;
    justify-content: center;
	flex-wrap:wrap;transition: 0.5s ease-out;
}

.cover {
	aspect-ratio: unset;
}

.extitle {
	background: unset;
	font-size:1.8rem;
	color:darkslategray
}
.extitle-1 {
    font-size: 3rem;
    color: #ffffff;
    font-weight: bold;
    padding: 15px;
}
.extitle-2 {
    font-size: 2rem;
    color: #ffffff;
}
.extitle-3 {
    color: #9d4113;
    font-size: 22px;
    padding: 2px 37px;
    text-decoration: underline;
}
.extitle-4 {
    color: #fcc600;
    font-size: 22px;
    padding: 2px 37px;
    text-decoration: underline;
}
.extitle-5 {
    color: #fcc600;
    font-size: 19px;
    text-decoration: underline;
}
.extitle-6 {
    font-size: 1.8rem;
    color: #ffffff;
    background-color: #ff5808ab;
    padding: 6px 23px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	margin: 0 0 20px 0;
}
.extitle-7 {
    color: #4f3e00;
    font-size: 16px;
    text-decoration: underline;
}
.extitle-8 {
    font-size: 2.2rem;
    color: #ffffff;
    font-weight: bold;
    padding: 15px;
}
.extitle-9 {
    color: #ffee95;
    font-size: 26px;
    padding: 2px 0;
	font-weight: bold;
	text-decoration: underline;
	margin: 20px 0 0 0;
}
.extitle-10 {
    color: #ffffff;
    font-size:23px;
    padding: 2px 0;
}
.extitle-11 {
	font-size: 20px;
    color: #ffffff;
    padding: 7px 19px;
}
.extitle-12 {
    font-size: 16px;
    color: #022881;
    padding: 7px 10px;
}
.extitle-13 {
    font-size: 1.8rem;
    color: #ffffff;
    background-color: #ff5808ab;
    padding: 6px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	margin: 15px 0;
}
.extitle-14 {
    font-size: 3rem;
    color: #ffffff;
    font-weight: bold;
    padding: 15px;
}

h4 {
	font-size: 3.6rem;
	color: #5a7cdd;
	margin: 0;
}
h4 a{
	color: #5a7cdd;
}
h4 p{
	font-size:1.8rem!important;
}




.section{margin-bottom:5rem;}
.flex .section{background:white}
.book p {
	font-size: 1.5rem
}
.book01 p {
	font-size: 1.5rem
}
.bookname {
	font-size: 1.9rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-weight: bold;
    background-color: #0e487a;
    padding: 7px 12px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 9px;
}
.bookname-1 {
	font-size: 1.5rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-weight: bold;
	padding: 7px;
	text-decoration: underline;
}

.swiper-slide .bookname{color:#00ff60}
.book a:hover,.book01 a:hover .style_tb_2-4:hover,.item-title:hover,.header-title:hover{
	transform: scale(.95)
}
.book a {
	display: block;
	transition: 0.5s ease-out;
	color: #FFFFFF;
}
.book01 a {
	display: block;
	transition: 0.5s ease-out;
	color: #383838;
}
.book-mark {
	display: block;
    transition: 0.5s ease-out;
    color: #c14203;
    font-weight: bold;
    font-size: 22px;
    line-height: 29px;
    background-color: #f9f7f7;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 14px;
}
.morebox {width:90%;
    opacity: 0.5;

    background: #48cc92;
    font-size: 1.8rem;
    border-radius: 3rem;
    margin: 1rem auto;
    color: #ffe9a7 !important;
    text-decoration: none;
    box-shadow: 0 1rem #509f92;
    transition: 0.5s ease-out;
}
	.morebox a{color:white;font-size:3.6rem;font-weight: bold;}
	.morebox:hover{box-shadow: 0 0;transform: scale(.95)}
.section1-4, .section1-3,.section1-5 ,.section1-6,.section1-7,.section1-8,.section1-9,.section1-10,.section1-11,.section1-12,.section1-13,.section1-14
,.section1-15 {
	margin: 0.5rem;
	padding: 0.5rem;
}
.section1-4 {
	width: calc(20% - 0rem);
    background: #117dd3cf;
    border-radius: 1rem;
    border: 4px solid #0043ff;
    margin: 13px;
    box-shadow: 0 4px 8px 0 rgb(255 0 0 / 21%);
}
.section1-5 {
    width: calc(45% - 0rem);
    background: #ffffff1c;
    border-radius: 1rem;
    border: 4px solid #14585200;
    margin: 13px;
    box-shadow: 0 4px 8px 0 rgb(1 73 133 / 40%);
}
.section1-6 {
	width: calc(20% - 0rem);
    background: #ffffff;
    border-radius: 1rem;
	border: 4px solid #f9d695;
    margin: 13px;
    box-shadow: 0 4px 8px 0 rgb(255 0 0 / 21%);
}
.section1-7 {
	width: calc(29% - 0rem);
    background: #ffd5d524;
    border-radius: 0rem;
    margin: 13px;
	box-shadow: 0 4px 8px 0 rgb(255 0 0 / 21%);
}
.section1-8 {
    width: calc(20% - 0rem);
    background: #ffffff;
    border-radius: 1rem;
    border: 4px solid #ffcc5a;
    margin: 13px;
    box-shadow: 0 4px 8px 0 rgb(255 0 0 / 21%);
}
.section1-9 {
    width: calc(20% - 0rem);
    background: #ffffff;
    border-radius: 1rem;
    border: 4px solid #5aff8c;
    margin: 13px;
    box-shadow: 0 4px 8px 0 rgb(255 0 0 / 21%);
}
.section1-10 {
    width: calc(29% - 0rem);
    background: #ffd5d524;
    border-radius: 0rem;
    margin: 12px;
	box-shadow: 0 4px 8px 0 rgb(255 0 0 / 21%);
}
.section1-11 {
	width: calc(50% - 4rem);
	background: url(images/container-a.png);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
	border-radius: 1rem;
}
.section1-12 {
	display: flex;
	width: calc(78% - -3rem);
	border-radius: 0rem 2rem 2rem 0rem;
	align-items:center;
	padding: 0 52px;
	margin: 0 0 0 0;
}
.section1-13 {
	width: calc(80% - -3rem);
	border-radius:  2rem  0rem 0rem 2rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
	padding: 30px 50px;
	margin: 0 0 0 0;
}
.section1-14 {
	width: calc(19% - -3.7rem);
	background: url(images/container-a.png);
	border-radius:  1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.section1-15 {
	width: calc(19% - -3.7rem);
	background: url(images/container-a.png);
	border-radius:  1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}


.section1-3 {
	width: calc(33% - 3rem)
}
.section1-4.book a {
	padding-bottom: 1rem
}
.section1-5.book a {
	padding-bottom: 1rem
}
.section1-6.book a {
	padding-bottom: 1rem
}
.section1-7.book a {
	padding-bottom: 1rem
}
.section1-8.book a {
	padding-bottom: 1rem
}
.section1-9.book a {
	padding-bottom: 1rem
}
.section1-10.book a {
	padding-bottom: 1rem
}
.section1-11.book a {
	padding-bottom: 1rem
}
.section1-13.book a {
	padding-bottom: 1rem
}
.section1-14.book a {
	padding-bottom: 1rem
}
.section1-15.book a {
	padding-bottom: 1rem
}

.section1-2 {
	width: calc(50% - 3rem);
	padding: 1rem;
}
.section1-2 .section1-2 {
	width: calc(50% - 4rem);

}
.section1-2.flex{align-items: center;justify-content:center}
.ad{display:flex; justify-content: center;align-content: center}
.ad a{display:block;width:calc(50% - 2rem)}
.ad a img{width:100%}


/* 1-1 photograph */
.photograph{width: 1000px; padding: 0 20px; margin:0 auto 40px auto; position: relative; margin-bottom: 20px;}
.photograph a { display: flex; }
.photograph .font { 
	width: 548px;
	/* height: 267px;  */
	margin: auto 0px auto -60px; 
	padding: 0px 20px 20px 20px; 
	position: relative; 
    background: #d1ff7b;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);    
	border-radius: 48px 10px;
    right: -16px;
}
.photograph .font h5 { font-size: 2rem;border-bottom: #000000 solid 1px; padding: 20px; margin: 10px 0 12px; line-height: 2.2rem;}
.photograph .font p { line-height: 1.8rem;      text-align: left; padding: 0 23px;}
.photograph .font .price {  padding: 0 30px;}
.photograph img { width: 700px; height: 330px;}

#fixed-nav {
    display: flex;
    position: fixed;
    top: 13%;
	right: 217px;
    z-index: 999;
}
	
	
.pics{ position:relative;}
.pics img{ 
	position:absolute;
  /* 淡出淡入效果2秒 */
  -webkit-transition: opacity 0s ease-in-out;
  -moz-transition: opacity 0s ease-in-out;
  -o-transition: opacity 0s ease-in-out;
  transition: opacity 0s ease-in-out;
}
 .pics img:last-child:hover{
   /* 滑入時第一張透明度設0 */
    opacity:0;}
.pics {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	margin: 50px 0;
}