@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
@import url("owl.carousel.css");
@import url("owl.carousel5.css");
@import url("owl.theme.css");
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=ZCOOL+QingKe+HuangYou&display=swap');

/* 載入畫面樣式 */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
  }
   
  
  .spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
  }
  
  /* 旋轉動畫 */
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }
  
body {
	font-size:.9rem;
	line-height: 180%;
	margin: 0;
	padding: 0;
	color:#fff;
	text-align: left;
	font-family: 'Noto Sans TC','sans-serif';
	letter-spacing	:1px;
	font-weight: 400;
	background-image:url(../images/kv-bg.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-color: #000;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
a, a:hover, a:active {
	text-decoration:none !important;
	color: rgba(255, 66, 78, 1);
}
.im{
	color: #ba121a;
	font-weight: bold;
}
img {border:0px;}

#topcontrol { z-index:99999;}
.nowLoading {
	position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -20px;
  width: 200px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}


.ball {
  width: 11px;
  height: 11px;
  border-radius: 5px;
  display: inline-block;
  margin: 0 5px;
  
  animation: 2s bounce ease infinite;
}

.blue {
  background-color: #3db3bf;
}

.red {
  background-color: #ffda04;
  animation-delay: .25s;
}

.yellow {
  background-color: #3db3bf;
  animation-delay: .5s;
}

.green {
  background-color: #ffda04;
  animation-delay: .75s;
}

@keyframes bounce {  
    50% {
        transform: translateY(25px);
    }
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
.wrapper { width:100%; 	 margin:0 auto;  height: auto; overflow-x: hidden;}
.container{width:100%; margin:56px auto 0 auto;position: relative; } 
#box{width:100%; height:1200px;}
#top_pic {width:1068px; height:1377px; position: relative; left:60px;  overflow:hidden;}
#top{ 
	width:100%; 
	max-width: 1121px;
	position:relative; 
	z-index: 1; 

 }
.main{
	width: 100%;
	position: relative;
	padding: 2rem 0;
	text-align: center;
	background-size: contain;
} 
.main img {
	width: 100%;
	display: block;
}
.main a{
	cursor: pointer;
}
.pctop{
	margin:  0 auto;
	width: 100%;
	max-width: 1400px;

}

.icon-text,.icon-text2 {
	position: relative;
	display: inline-block;
	color: #fff;
}
.icon-text{
	font-size: 1.5rem;
	font-style: normal;
	font-family: "Kosugi Maru", sans-serif;
	font-weight: bold;
}
.icon-text::before,
.icon-text::after {
	content: "";
	display: inline-block;
	width: 32px; 
	height: 32px; 
	background-image: url('../images/t-ico.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
	margin: 0 5px; 
}
  
.icon-text::before {
	margin-left: 0;
	margin-right: 15px;
}
  
.icon-text::after {
	margin-left: 10px;
	margin-right: 0;
}

.icon-text2::before,
.icon-text2::after {
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px; 
	background-image: url('../images/t-ico2.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
	margin: 0 5px; 
}



#event-rule{
	padding-top: 2rem;
	position: relative;	
}
#event-rule::before{
	  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/sec01-bg.jpg") center/cover no-repeat;
  opacity: 0.7; /* 背景透明度 */
  z-index: 0;
}
.event-rule {
	width: 100%;
	position: relative;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	font-size: 1.25rem;
	padding-top: 1rem;
	color: #000;
}
.event-rule img {
	width: 100%;
}

.event-rule p {
	background-color: #fff;
	display: inline-block;
	padding: .5rem;
	margin-bottom: .5rem;
}

.rule-s {
	font-size: .75rem;
	padding: .25rem !important;
}
.event-rule .rule-h1{
	font-size: 1.5rem;
	background-color: #F3C832;
	padding: .5rem 1rem;
	font-weight: bold;
	letter-spacing: .5rem;
	display: inline-block;
	margin: 1rem;
}

.event-rule2 {
	text-align: left;
	margin: 0 auto;
	width: 50vw;
	padding: 1rem 0 2rem 0;
	z-index: 1;
	position: relative;
}
.event-rule2 p {
	font-size: .9rem;
	padding: 0;
	color: #fff;
}
.title-all {
	font-size: 2.25rem;
	padding: .5rem 1rem;
	letter-spacing: .5rem;
	margin: 2rem 1rem 1rem 2rem;
}
.title-all img{
	width: 100%;
	max-width: 489px;
}

.white-popup {
    position: relative;
    background: #fff;
    padding: 40px;
    width: auto;
    max-width: 100%;
    margin: 20px auto;
	display: flex;
	z-index: 999999;
}
.white-popup img {
	width: 100%;
}
.card_list{
	text-align: center; 
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
}
.card_list img{
	width: 100%;
    margin: 1rem;
    border-radius: 0.5rem;
}
.card_list li {
	display: flex;
}
.stage-att-txt{
	padding: 2rem;
	line-height: 1.6rem;
}
ul.dot {
    padding-top: 0.5rem;
    padding-left: 1.5rem;
}
ul.dot li {
    list-style: circle;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}
#main_out{
	width:100%; 
	position: relative; 
	margin: 0 auto;  
	overflow:hidden;
	z-index: 99;
}

#main_bg{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
#main_cont{
	z-index: 1;
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding-bottom: 4rem;
	background: rgb(124, 7, 0,0.8);
}



.title{
	text-align: center;
	margin: 0 auto;
	padding: 1rem 0 1rem 0;
}
.title h1 {
	font-size: 1.7rem;
	color: #625DD4;
	padding: 0;
}

.title h3 {
	font-size: 1.2rem;
	color: #000;

}
.title h2 {
	font-size: 1.3rem;
	font-weight: bold;
	font-style: normal;
	font-family: 'Noto Sans TC','sans-serif';
}

.title img {
	width: 30%;
	max-width: 330px;
}
.title3{
	text-align: center;
	width: 100%;
	max-width: 600px;
	margin: 2rem auto 0 auto;
}

#sec01-add{
	margin: 0 auto;
	width: 100%;
	max-width: 1050px;
}


.adds-bn{
	background-color: #F3C832;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.3rem;
    line-height: 1.2;
    z-index: 2;
    position: relative;
	width: 100%;
}
.adds-bn-t {
	border: solid 1px #fff;
}



.gift_btn{
	width: 100%;
	font-weight: bold;
	font-size: 1rem;
	line-height: 2rem;
	margin: 3rem auto 0 auto;
	padding-bottom: 3rem;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	text-align: center;
}
.gift_btn a{
	padding: .5rem 3rem;
	background-color: rgba(25, 132, 196, 1);
	color: #fff;
	margin: 0;
	moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	border-radius: 99rem;
	border: solid 2px #1984c4;
}
.gift_btn a:hover{
	background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	background-color: rgba(79, 146, 150, 0);
	color: #1984c4;
	border: solid 2px #1984c4;
}

.btn {

    letter-spacing: 2px;
    font-size: 1rem;
	font-weight: bold;
    position: relative;
	justify-content: flex-start;
	align-items: center;
	line-height: 100%;
	color: #fff;
	padding: 4rem 0;
}
.btn a{
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	padding: 1rem 3rem!important;
	color: #fff;
    background-image: linear-gradient(to right, #34a8bf, #10c4d6, #15ddf1, #2bb673);
	background-size: 300% 100%;
	border-radius: 999rem;
}
.btn a:hover {
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
	transform: translate(-1px,-1px);
	background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.nb-bn{
    font-size: .75rem;
    padding: 0.3rem;
    line-height: 1.2rem;
    z-index: 2;
    position: relative;
	width: 100%;
	color: #fff;
}

.new-c {
	background-color: #10b3e5;
}
.new-n {
	background-color: #4d8e91;
}
.new-c2 {
	background-color: #d2697b;
}
.new-n2 {
	background-color: #23777f;
}
.new-n3 {
	background-color: #ff6eb6;
}
.new-n4 {
	background-color: #00bc78;
}
.new-e {
	background-color: #666666;
}
.new-art {
	background-color: #9478b5;
}




h1{
	font-size: 1.8em;
    letter-spacing: 1px;
    line-height: 1.5em;
	font-weight: bold;
}

.hl{
	color: #ff424e;
}



#book_out{
	width:100%; 
	position: relative; 
	margin: 0 auto;  
	overflow:hidden; 
	/* background: rgba(199, 232, 215, 0.7); */
	z-index: 1;
	text-align: center;
}
#book_bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.owl-carousel5 .owl-nav button.owl-prev{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_pre.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height:60px;
	right: 3rem; 
	top:-20%;
	}
.owl-carousel5 .owl-nav button.owl-next{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_next.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height: 60px;
	right: 0;
	top:-20%;
}
.owl-carousel2 .owl-nav button.owl-prev{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_pre.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height:60px;
	right: 3rem; 
	top:-20%;
	}
.owl-carousel2 .owl-nav button.owl-next{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_next.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height: 60px;
	right: 0;
	top:-20%;
}
.owl-carousel .owl-nav button.owl-prev{ 
	position: absolute;
	z-index:9; 
	background: url("../images/gift-pre.png") no-repeat 50% 50%; 
	background-size: 50% 50%;
	width:147px; 
	height:290px;
	top: 30%;
	left: 5%;
	}
.owl-carousel .owl-nav button.owl-next{ 
	position: absolute;
	z-index:9; 
	background: url("../images/gift-nxt.png") no-repeat 50% 50%;
	background-size: 50% 50%;
	width:147px; 
	height:290px;
	top: 30%;
	right: 5%;
}
.owl-prev span, .owl-next span {
	display: none;
}

.btna_swap {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
  }
  .btna_swap:hover, .btna_swap:focus, .btna_swap:active {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  }

.hvr-fade {
	display: flex;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	overflow: hidden;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
  }
  .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
	background-color: #2098D1;
	color: white;
  }



#list_cont{
	width: 100%;
	margin:  0 auto;
	background: rgba(0, 0, 0, 0.7);
}



.list_book2 li{
	margin: .5rem;
	width: 23%;
	border-radius: .75rem;
	border: 1px solid #fffb08;
	padding: 1rem;
	text-align: left;
}
.list_book2 .sp-b-t{
	font-weight: 600;
    line-height: 1.4;
	text-align: center;
    padding: 0 3px;
    margin-bottom: 0.25em;
	width: 100%;
}
.list_book2 .txt2 {
	text-align: left;
}
.list_book .txt2 {
	text-align: left;
	padding: 0;
    font-size: .7rem;
}
.list_book .txt2 {
	padding: 0;
}
.list_book2 .txt2 p {
	padding: 0;
}
.list_book3 li{
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: .5rem;
	padding: .5rem;
}
.list_book3 .txt{
	font-weight: normal;
}

.list_book4 li{
	margin: .5rem;
	text-align: left;
}

.list_book4 .txt2 p {
	padding: 0;
	font-size: .7rem;
}

.list_book{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
	align-content:flex-start;
	align-items: stretch;
	padding: 0 2rem;
	position: relative;
	z-index: 1;
	margin: 0 auto;
	max-width: 1500px;
}

.list_book  li{
	display: flex;
	flex-wrap: wrap;
	align-content:flex-start;
	align-items: stretch;
}

.book-img {
	text-align: center;
}
.list_book  li img {
	width: 100%;
}
.list_book .txt {
	width: 100%;
	text-align: left;
}
.list_book .txth1{
	font-weight: bold;
	line-height: 1.2rem;
	padding: .3rem 0;
	color: #fff;
}
.list_book .book-tag{
	display: inline-block;
    font-size: 0.75rem;
    color: white;
    margin-right: 1rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
	margin-top: .2rem;
}
.list_book .tag-novel{
	background-color: #01b3de;
}
.list_book .tag-comic{
	background-color: #ff8d9b;
}
.list_book2  li {
	justify-content: center;
}
.list_book2  li img {
	max-width: 500px;
	max-height: 370px;
}
.list_book4 li img {
	width: 100%;
}
.list_book3 > li{
	width: 33% ;
}
.list_book4 > li{
	width: 15% ;
}


#goods_out{
	width:100%; 
	position: relative; 
	margin: 0 auto;  
	overflow:hidden; 
	z-index: 99;
}

.goodsout{
	width: 100%;
	max-width: 1000px;
	margin: 2rem auto 0 auto;
	display: flex;
	position: relative;
	z-index: 1;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 ;
}
.title2 {
	width: 100%;
	max-width: 1400px;
	margin: 20px auto;
	text-align: center;
}
.goods1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 2rem 0;
}
.goods1 > li {
	width: 70%;
	margin: 10px;
	border-radius: .75rem;
	padding: 1rem;

}


.goodsout li img {
	width: 100%;
	max-width: 842px;
}
.goodsout li p{
	padding: 0;
}
.goods-card-title{
	margin:.5rem 0;
	font-weight: bold;
}
.sp-att{
	margin-top: .5rem;
	color: #373737;
}
.n {
    padding-left: 1rem;
    padding-top: 0.5rem;
}

.n li{
	list-style: decimal;
    color: #57575d;
    line-height: 1.2;
    font-size: 0.7rem;
}


.goods_title {
	display: flex;
	width: 100%;
	position: relative;
	z-index: 9;
	margin: 0 auto;
	justify-content: center;
	flex-wrap: wrap;
}

.goods_title img{
	width: 100%;
	max-width: 150px !important	;
}

.goods_title > li{
    letter-spacing: 2px;
    font-size: 1rem;
    position: relative;
	text-align: center;
	font-weight: 900;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 100%;
}


.goods_title > li a{
	width: 100%;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	padding: .5rem !important;
	color: rgba(0, 0, 0, 0.7);
	
}

.goods_title > li h1 {
	font-size: .9rem;	
	line-height: 1.5rem;
	font-weight: normal;
}
.goods_title > li h2 {
	font-size: 1rem;
	line-height: 1rem;
}

.booksout{
	width: 100%;
	max-width: 1500px;
	margin: 2rem auto 0 auto;
	display: flex;
	position: relative;
	z-index: 1;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 2rem;
}



.books-more {
	display: flex;
	width: 100%;
	position: relative;
	z-index: 9;
	margin: 0 auto;
	justify-content: center;
	flex-wrap: wrap;
}

.books-more > li{
    letter-spacing: 2px;
    font-size: 1rem;
    position: relative;
	text-align: center;
	font-weight: 900;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 100%;
	border-radius: 999rem;
	border: solid 2px #fffb08;
	-webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
	-webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	margin: 0 .5rem .5rem 0;
	color: #fff;
}

.books-more > li a:hover, .books-more > li.here a{
	color: rgba(0, 0, 0, 1);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 999rem;
}


.books-more > li a{
	width: 100%;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	padding: .5rem !important;
	color: #fff;
	
}

.books-more > li h1 {
	font-size: .9rem;	
	line-height: 1.5rem;
	font-weight: normal;
}
.books-more > li h2 {
	font-size: 1rem;
	line-height: 1rem;
}


.books1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 2rem 0;
}
.books1 > li {
	width: 15%;
	margin: .5rem;
	padding: 0;
	height: 100%;
}

.books-more li img {
	width: 100%;
	max-width: 500px;
}
.books-more li p{
	padding: 0;
}
.books-pic{
	background-color: #fff;
    display: flex;
    align-items: center;
}

.sheet-area {
    max-width: 963px;
    margin: 0 auto;
}
.border-radius-wrap {
    overflow: hidden;
    border-radius: 1rem;
}

.sp-event {
    background-image: url(../images/sec01-bg.jpg);
    background-size: cover;
}

.sp-event-c{
	margin: 0 auto;
	width: 100%;
	position: relative;
	text-align: center;
}
.sp-event-c .pic {
	width: 100%;

}
.sp-event-c .pic img{
	width: 100%;
	max-width: 400px;
}

#store_out{
	background-color: rgba(59, 100, 98, 0.7);
	padding-bottom: 2rem;
	text-align: center;
}
.logo_out{ 
	display: flex;
	margin: 0 auto;
	width: 100%;
	flex-wrap: wrap;
	align-items: flex-start;
	text-align: center;
	justify-content: center;
	max-width: 1400px;
	padding: 0 2rem;
}

.logo_li {
	width: 25%;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	text-align: center;
	align-items: center;
	margin: .5rem;
	background-color: #fff;
}
.logo_pic {
	width: 100%;
	margin: 0 auto;
	display: block;
}
.logo_li,.logo_pic img {
	height: 4rem;
}

.logo_pic2 img {
	width: 100%;
	max-width: 300px;
}
.logo_txt {
	width: 100%;
	text-align: center;
}

#logo {width: 100%; max-width: 1400px; margin: 0 auto; padding-top: 150px;}
#logo img {width: 100%; max-width: 664px}
.pc { width:100%; }
.mob{
	display: none;
}


#intro { width:380px; height:270px; background-image:url(../images/intro_0.png); position:absolute; right:20px; top:530px;}
#cp
{width:100%;letter-spacing:0.5pt;
	line-height:1.8rem;text-align: center; padding:40px; position: relative;font-weight: bold;
	font-size :0.8rem;margin:0 auto; color:#000;z-index:99;
}
#cp img {
	width: 100%;
	max-width: 1200px;
}

#ct1,#ct2,#ct3,#ct4,#ct5,#ct6,#ct7,#ct8
{	cursor:pointer; list-style:none;}
	
pre {
white-space: pre-wrap;
word-wrap: break-word;
/* font-family: 'Kosugi Maru','Noto Sans TC','sans-serif'; */
}
.link { text-align:center;
    width: 226px;color: #fff;
    font-size: 0.75rem; letter-spacing:1px;
    text-decoration: none;
    background: #000;
    padding: 15px;
    margin-top: 31px; display:inline-block; margin-right:17px; z-index: 99}
.link a{ color:#fff; text-decoration:none;}
.link:hover{background: #373737;}
.buy { text-align:center;
    width: 226px;color: #fff;
    font-size: 0.75rem; letter-spacing:1px;
    text-decoration: none;
    background: #000;
    padding: 10px;
    margin-top: 31px; position: relative;top:550px; left:80px;}
.buy a{ color:#fff; text-decoration:none;}
.buy:hover{background: #373737;}
/* Specific style for the examples */


.titleout{width: 100%; margin: 0 auto;}
#title{
	margin: 40px auto 20px auto; 
	position: absolute;
	bottom: 60px;
	right: 25px;
}
#title li{ height:45px; list-style:none; float:left; padding:5px; -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;}
#title li:hover {opacity: 0.9; -webkit-transform: translateY(-5px);
  transform: translateY(-5px);}

.booklist { position:relative; max-width:1400px; width: 100%; top:10px; margin:0px auto; overflow:hidden;text-align: center}
.booklist li { list-style:none; padding:10px 10px 10px 10px; display: inline-block}
.booklist li img {max-width:200px;  width:100%; border:none;
		/*
	-moz-box-shadow:2px 2px 4px #8e8e8e;
	-webkit-box-shadow:2px 2px 4px #8e8e8e;
	box-shadow:2px 2px 4px #8e8e8e;

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;
	*/}
.bookout{width: 100%; margin:100px auto; padding: 0 0 30px 0; overflow: hidden;background-color: rgba(128, 78, 33, 1)}
.more{ position:relative; width:100%; margin: 30px auto;cursor:pointer; max-width: 1400px; text-align: center;}
.more img {border:0;}


/*----------------------------- 
header
------------------------------*/
#header { width:100%; margin:0 auto; background-color:#fff; overflow:hidden; min-width:1004px; z-index: 999; position: fixed; padding:5px 10px;}
.header { width:100%; margin:0 auto; overflow:hidden; display: flex; justify-content:space-between}
.header_logo { width:113px;  padding:5px; position: relative; top: 5px}
.header_right { padding-top:15px; text-align: right;color:rgba(0,0,0,.9); right:10px; cursor: pointer;}
.header_right a,.header_right a:after { color:rgba(0,0,0,.9); }
.header_right a:hover{ color: rgba(0,0,0,.5);}
#m_header{ display:none;}
#header img {width: 100%; max-width: 113px;}
.fat-nav{display: none}
/*----------------------------- 
header
------------------------------*/
/* ==========================================================================
    Footer
========================================================================== */
footer {
	padding: 2rem 3rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
		-ms-flex-direction: row;
			flex-direction: row;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	-webkit-box-align: start;
		-ms-flex-align: start;
			align-items: flex-start;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.75rem;
	background-color: #001c2e;
  }
  
  footer .footer-left .copy-mobile {
	display: none;
  }
  
  footer .footer-right {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
		-ms-flex-direction: column;
			flex-direction: column;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	-webkit-box-align: end;
		-ms-flex-align: end;
			align-items: flex-end;
	gap: 2rem;
  }
  
  footer .footer-right .social {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
		-ms-flex-direction: row;
			flex-direction: row;
	-webkit-box-pack: end;
		-ms-flex-pack: end;
			justify-content: flex-end;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	gap: 1.5rem;
  }
  
  footer .footer-right .social a {
	width: 3rem;
	height: 3rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
		-ms-flex-direction: row;
			flex-direction: row;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	border-radius: 3rem;
	background-color: #ff871a;
	-webkit-transition: -webkit-transform .2s;
	transition: -webkit-transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s;
  }
  
  footer .footer-right .social a:hover {
	-webkit-transform: scale(1.2);
			transform: scale(1.2);
  }
  
  footer .footer-right .social img {
	width: 1.5rem;
	height: 1.5rem;
  }
  
  footer .footer-right .copyright {
	font-size: 0.875rem;
	line-height: 1.5rem;
	text-align: end;
  }
  
  @media (max-width: 768px) {
	.owl-carousel5 .owl-nav button.owl-prev{ 

		bottom: 35%; 
		width:52px; 
		height:60px;
		right: 3rem; 
		top:-28%;
		}
	.owl-carousel5 .owl-nav button.owl-next{ 
		bottom: 35%; 
		width:52px; 
		height: 60px;
		right: 0;
		top:-28%;
	}
	footer {
	  -webkit-box-orient: vertical;
	  -webkit-box-direction: normal;
		  -ms-flex-direction: column;
			  flex-direction: column;
	  -webkit-box-align: center;
		  -ms-flex-align: center;
			  align-items: center;
	  gap: 1rem;
	}
	footer .footer-left .copy-web {
	  display: none;
	}
	footer .footer-left .copy-mobile {
	  margin-bottom: 1rem;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  overflow-x: auto;
	  -ms-scroll-snap-type: x mandatory;
		  scroll-snap-type: x mandatory;
	  scrollbar-width: none;
	  width: 90vw;
	}
	footer .footer-left .copy-mobile::-webkit-scrollbar {
	  display: none;
	}
	footer .footer-left .copy-mobile .scroll-item {
	  display: -webkit-inline-box;
	  display: -ms-inline-flexbox;
	  display: inline-flex;
	  -webkit-box-pack: start;
		  -ms-flex-pack: start;
			  justify-content: start;
	  -webkit-box-align: start;
		  -ms-flex-align: start;
			  align-items: flex-start;
	  scroll-snap-align: start;
	  -webkit-box-flex: 0;
		  -ms-flex: 0 0 280px;
			  flex: 0 0 280px;
	}
	footer .footer-right {
	  -webkit-box-align: center;
		  -ms-flex-align: center;
			  align-items: center;
	  gap: 1rem;
	}
	footer .footer-right .copyright {
	  text-align: center;
	}



}
@media (max-width: 680px) {
	.title img {
		width: 65%;
		max-width: none;
	}
  
}
@-webkit-keyframes hvr-bob {
	0% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
	50% {
	  -webkit-transform: translateY(-1px);
	  transform: translateY(-1px);
	}
	100% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
  }
  @keyframes hvr-bob {
	0% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
	50% {
	  -webkit-transform: translateY(-1px);
	  transform: translateY(-1px);
	}
	100% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
  }
  @-webkit-keyframes hvr-bob-float {
	100% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
  }
  @keyframes hvr-bob-float {
	100% {
	  -webkit-transform: translateY(-2px);
	  transform: translateY(-2px);
	}
  }
  .hvr-bob {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
	-webkit-animation-name: hvr-bob-float, hvr-bob;
	animation-name: hvr-bob-float, hvr-bob;
	-webkit-animation-duration: .3s, 1.5s;
	animation-duration: .3s, 1.5s;
	-webkit-animation-delay: 0s, .3s;
	animation-delay: 0s, .3s;
	-webkit-animation-timing-function: ease-out, ease-in-out;
	animation-timing-function: ease-out, ease-in-out;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-direction: normal, alternate;
	animation-direction: normal, alternate;
  }


  @-webkit-keyframes bob {
	0% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
	50% {
	  -webkit-transform: translateY(-4px);
	  transform: translateY(-4px);
	}
	100% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
  }
  @keyframes bob {
	0% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
	50% {
	  -webkit-transform: translateY(-4px);
	  transform: translateY(-4px);
	}
	100% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
  }
  @-webkit-keyframes hvr-bob-float {
	100% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
  }
  @keyframes hvr-bob-float {
	100% {
	  -webkit-transform: translateY(-8px);
	  transform: translateY(-8px);
	}
  }
  .bob {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-animation-name: bob;
	animation-name: bob;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-direction:  alternate;
	animation-direction: alternate;
  }  
/* Float */
.hvr-float {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
  }
  .hvr-float:hover, .hvr-float:focus, .hvr-float:active {
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
  }  

@media all and (max-width: 1000px){ 
.bg-fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/kv-bg.jpg") center/cover no-repeat;
  z-index: -1; /* 在內容後面 */
}
body{
background-size: cover;      /* 讓圖片完整鋪滿容器 */
  background-position: center; /* 確保置中裁切 */
  background-repeat: no-repeat;
}

.pc {
	display: none !important;
}
.event-rule .rule-h1 {
	font-size: 1.1rem;
}
.rule-s {
	font-size: .75rem !important;
}
.event-rule p{
	font-size: 1rem;
}

.slogan li {
	width: 30%;
}
.slogan {
	justify-content: center;
	padding: 0 4vw 2rem 4vw;
}
.container{
	width:100%; 
	margin:0 auto;
	position: relative; 
	height:auto; 
	overflow:hidden;
	background-image: none;
} 

#top{ width:100%; position:relative; margin:0 auto 20px auto; height:auto; cursor:auto; background-image: none}
#main{width:100%; position: relative; margin:0 auto;overflow:hidden; padding-bottom:0px; height:auto;  top: auto;}
#main_out{
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 0;
}
.card_list {
	flex-wrap: wrap;
	justify-content: center;
}
.card_list .li{
	display: flex;
	justify-content:center;
}
.event-rule {
	width: 80%;
	margin: 0 auto 2rem auto;
}

#main_cont{
	padding: 1rem 1rem 2rem 1rem;
}

.white-popup {
	padding: 1rem;
	z-index: 99999999;
}
.title-all{
	margin-top: 1rem;
	font-size: 1.25rem;
	margin: 0 auto;
}
.title h1 {
	font-size: 1.3rem;
	line-height: 2rem;
}
.title h2 {
	font-size: 1.2rem;
	line-height: 1.5rem;
	padding: 0;
	margin: 0 auto;
	width: 80%;
}
.title h3 {
	font-size: 1.2rem;
	padding: 0 1rem 1rem 1rem;
}
.event-rule2 {
	width: 80vw;
}
.gift_btn {
	padding: 0;
}

.m_gift-all{
	width: 100%;
}
.m_gift-all img{
	width: 100%;
	margin-top: 1rem;
}

.cs>p {
	text-align: center;
}
.cont_right .btna .a{
	font-size: 1.3rem;
}
#list_cont {
	text-align: center;
	margin: 0 auto;
	padding: 2rem .5rem;
}
.list_menu {
	justify-content: center;
}
.list_menu > li {
	margin: 0.3rem;
}
.list_menu > li{
	width: 100%;
	line-height: 1.3rem;
}
.list_book > li{
	width: 30%;
	padding: .2rem;
}
.list_book2 > li{
	width: 45% !important;
	padding: 1rem;
	margin: 2px;
}

.list_book li img {
	max-width: 100%;
}
.list_book3 > li{
	width: 50%;
	
}

.booksout {
	padding: 0;
	margin: 1rem auto 0 auto;
}
.books-more{
	margin-bottom: 1rem;
}
.title {
	margin:  0 auto;
	padding-top: 1rem;
}

.event-rule2 p {
	font-size: .7rem;
}

.list_book2 .txt2 p{
	font-size: .7rem;
}

#book_out{
	padding-top: 0;
}
.list_book{
	padding: 0;
}
.m_gift-all {
	padding: 0;
}

.sp-add {
	flex-wrap: wrap;
}
.sp-main {
	width: 100%;
	padding: 1rem 1rem 1rem 0;
}
.sp-right {
	width: 100%;
	margin: 0;
}
.sp-txt{
	padding: 0 1rem;
}
.sp-goods li {
	padding: 0;
}
.list_book .txth1 {
	display: flex!important;
	font-size: .8rem;
	line-height: 1rem;
}
.list_book4 .txt2 p {
	line-height: 1rem;
}
.list_book4 li {
	margin: 0;
}
.nb-bn {
	font-size: .7rem;
}
.owl-carousel5 .owl-nav button.owl-prev{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_pre.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height:60px;
	right: 3rem; 
	top:-60px;
	}
.owl-carousel5 .owl-nav button.owl-next{ 
	position: absolute;
	z-index:9; 
	background: url("../images/arw_next.png") no-repeat; 
	bottom: 35%; 
	width:52px; 
	height: 60px;
	right: 0;
	top:-60px;
}
.owl-carousel5 {
	margin-top: 1rem;
}

.owl-carousel .owl-nav button.owl-prev{ 
	position: absolute;
	z-index:9; 
	background: url("../images/gift-pre.png") no-repeat 50% 50%; 
	background-size: 50% 50%;
	width:47px; 
	height:90px;
	top: 40%;
	left: 1%;
	}
.owl-carousel .owl-nav button.owl-next{ 
	position: absolute;
	z-index:9; 
	background: url("../images/gift-nxt.png") no-repeat 50% 50%;
	background-size: 50% 50%;
	width:47px; 
	height:90px;
	top:40%;
	right: 1%;
}
.flex-container {
	display: flex;
	flex-wrap: nowrap;
}

.logo_out {
	padding: 0;
}
#book_out {
	padding-bottom: 0;
	margin-bottom: 0;
}
#goods_out{
	padding-top: 0;

}
.goodsout{
	padding: 0 0 2rem 0;
	margin: 0;
}
.title2 {
	margin: 10px auto 20px auto;
}
.title3 {
	max-width: 400px;
}
.goodsout li {
	box-sizing: border-box;
	width: 80vw;
	margin: 5px;
}
.goods1 {
	padding: 0;
}
.goods1 > li{
	padding: 5px;
}
.goodsout li p {
	font-size: .75rem;
}
.n li {
	width: 100%;
}
.n{
	padding-left: 10px;
}
.goods_A-t a, .goods_B-t a,.goods_C-t a,.goods_D-t a{
	background-color: transparent;
}

.stage {
	padding: 1rem .75rem;
}
#stage-out{
	padding-bottom: 1rem;
}
#store_out{
	padding-top: 1rem;
}
#title { width:100%;}

#header, #title  { display:none;}
.att_in { position:relative ; width:95%; margin:0 auto; overflow: hidden;}
#cp,.cp_i  { width:100%; padding: 10px;background-image: none; color: #fff; font-weight: normal; text-shadow: none}
#cp img {
	width: 100%;
}
.mob_clear{ display:none;}
.booklist { position:static; width:95%; margin:20px auto 0 auto; overflow:hidden;  height:auto;}
.booklist li {list-style:none; width:30%; padding:5px; display: inline-block}
.booklist li img {width: 100%; height:auto;}
.bookout {margin: 0 auto;}


.logo_li {
	width: 50%;
	margin: 5px 0;
}

.list_book {
	margin-top:0 ;
	padding-bottom: 1rem;
}
.goods_title{
	flex-wrap: wrap;
	justify-content:center;
}
.goods_title > li{
	align-items: center;
	margin: 0;
	padding: 0;
	width: auto;
	max-width: 80vw;
}
.goods_title > li h1 {
	font-size: .75rem;
	padding: .2rem .5rem;
}
.goods_title > li a {
	padding: 2px !important;
}

.goods_title > li img{
	max-width: calc(80vw / 9) !important;
}
/*----------------------------- 
header
------------------------------*/
#m_header{  width:100%; margin:0 auto; background-color:#ffffff; overflow:hidden;  display: flex; position: fixed; z-index: 999; padding: 5px 0;}
.m_header { width:100%; margin:0 auto; overflow:hidden;display: flex; justify-content:center}
.m_header_logo { width:113px;  position: relative; top: 5px}
.m_header_logo img {width: 113px;}


/*----------------------------- 
header
------------------------------*/
	/*選單*/
.fat-nav,.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{-moz-transition-duration:.4s;-o-transition-duration:.4s;-webkit-transition-duration:.4s}
.hamburger{
	display:block;
	width:50px;
	height:40px;
	position:fixed;
	top:5px;
	left:0;
	z-index:9999;
	padding:12px;
	background:#ffffff;
	opacity:0.8;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-tap-highlight-color:transparent;
	-ms-touch-action:manipulation;
	touch-action:manipulation;
}
.hamburger__icon{
	position:relative;
	margin-top:7px;
	margin-bottom:7px
}
.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{
	display:block;
	width:25px;
	height:2px;
	background-color:#000;
	-moz-transition-property:background-color,-moz-transform;
	-o-transition-property:background-color,-o-transform;
	-webkit-transition-property:background-color,-webkit-transform;
	transition-property:background-color,transform;
	transition-duration:.4s
}
.hamburger__icon:after,.hamburger__icon:before{
	position:absolute;content:""
}
.hamburger__icon:before{top:-7px}
.hamburger__icon:after{top:7px}
.hamburger.active .hamburger__icon{background-color:transparent}
.hamburger.active .hamburger__icon:after,.hamburger.active .hamburger__icon:before{background-color:#000}
.hamburger.active .hamburger__icon:before{
	-moz-transform:translateY(7px)rotate(45deg);
	-ms-transform:translateY(7px)rotate(45deg);
	-webkit-transform:translateY(7px)rotate(45deg);
	transform:translateY(7px)rotate(45deg)
}
.hamburger.active .hamburger__icon:after{
	-moz-transform:translateY(-7px)rotate(-45deg);
	-ms-transform:translateY(-7px)rotate(-45deg);
	-webkit-transform:translateY(-7px)rotate(-45deg);
	transform:translateY(-7px)rotate(-45deg)
}
.fat-nav{
	top:0;
	left:0;
	z-index:9999;
	position:fixed;
	display:none;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.8);
	-moz-transform:scale(1.4);
	-ms-transform:scale(1.4);
	-webkit-transform:scale(1.4);
	transform:scale(1.4);
	-moz-transition-property:-moz-transform;
	-o-transition-property:-o-transform;
	-webkit-transition-property:-webkit-transform;
	transition-property:transform;
	transition-duration:.4s;overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch
}
.fat-nav__wrapper{
	width:100%;
	height:100%;
	display:table;
	table-layout:fixed
}
.fat-nav.active{
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-webkit-transform:scale(1);
	transform:scale(1)
}
.fat-nav ul{
	display:table-cell;
	vertical-align:middle;
	margin:0;
	padding:0
}
.fat-nav li{
	list-style-type:none;
	text-align:center;
	padding:15px;
	font-size:2em
}
.fat-nav li,.fat-nav li a{
	color:#fff;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	font-size:25px;
}
.fat-nav li a{text-decoration:none}

.fat-nav.active {
	background: #000;
	opacity:0.8;
}
#topcontrol,.more { display: none;}

.logo_li {
	width: 40%;
	margin: .5rem;
}
.logo_pic {
	width: auto;
}
.logo_pic img {
	max-width: 160px;
	width: 100%;
}
.logo_out{
	width: 80%;
}
}
@media all and (max-width: 425px){ 
	#web_out{
		flex-wrap: wrap;
	}
	.web_pic{
		width: 100%;
	}
	.web_txt{
		width: 100%;
		padding-top: 0;
		font-size: 1rem;
		line-height: 1.5rem;
	}
	.web_con{
		display: block;
	}
	body{
		background-position-y: 30px;
		background-size: contain;
	}
}