@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html,body{
	background:url("../images/bg.jpg") top center repeat;
	font-family:'Noto Serif TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 640px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

.circle01{ position: absolute; top:106px; left:184px; animation:circle 12s linear 0s infinite alternate;}
.circle02{ position: absolute; top:160px; left:36px; animation:circle 18s linear 0s infinite alternate;}
@keyframes circle {
  0%{transform:rotate(0deg);}
  100%{transform:rotate(720deg);}
}

.light{ position: absolute; top:-2px; left:476px; animation:fadeIn 2s ease-in-out 0s infinite alternate;}


/* m */
@media screen and ( max-width: 640px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	
	.titleB h2 {padding: 5px 45px 15px 60px;}
}


.quotes li:nth-child(odd) {background:url(../images/bg-g.jpg) top center repeat;}
.quotes li:nth-child(even) {background: url(../images/bg-g.jpg) top center repeat;}
.subtitle{padding: 20px 0 0;}
.subtitle h3 {border-left: solid 16px #fef0e1; color: #fef0e1;}
.subtitle .more a {color: #fef0e1;}
.keyword-bn .ten-word li {/*background: #007c55;*/ background: url(../images/bg-g.jpg) top center repeat;}
.keyword-bn .ten-word li:nth-child(even) {/*background: #045e42;*/ background: url(../images/bg-r.jpg) top center repeat;}
.titleB h2{color: #fef0e1;}
.titleB h2:before, .titleB h2:after{background-color: #fef0e1;}
.quotes .font, .quotes .font .price{color: #000000;}
.quotes .font .price big{color: #a71f29;}
.quotes .font h4:after {
    content: '';
    height: 32px;
    background: url(../images/quote-left.svg) center center no-repeat;
    background-size: 100%;
    display: block;
    margin: 1rem 0;
}
.quotes .font:after {
    content: '';
    height: 32px;
    background: url(../images/quote-right.svg) center center no-repeat;
    background-size: 100%;
    display: block;
    margin: 1rem 0;
}
big {
    font-size: 150%;
    color:#fff000;
    font-weight: bold;
}

.keyword-bn .four-link li {border: solid 1px #fff4ea;}
.keyword-bn .four-link a { color: #fff4ea;}

/* m */
@media screen and ( max-width: 640px ){
.keyword-bn .ten-word li:nth-child(4n-2) {/*background: #16848f;*/ background: url(../images/bg-g.jpg) top center repeat;}
.keyword-bn .ten-word li:nth-child(4n-3) { background: url(../images/bg-g2.jpg) top center repeat;}
}


/* photograph */
.photograph{overflow: hidden; padding: 20px 41px 25px;margin: auto; width: 1125px; position: relative;}
.photograph a { display: flex; justify-content: space-between;/*background: #000000 url(../images/texture.png);*/}
.photograph a p {width: 470px;font-weight: bold; font-size:20px; line-height: 40px; color:#faa432; padding:20px 20px 0;text-align:center;}
.photograph a p span {display: block; color: #faa432; margin: 30px 0 0;}
.photograph a p span big {font-size: 35px; color: #fe4300;}
.photograph a img { width: 700px; height: 350px;object-fit: cover;}
.photograph .label { display: inline-block;position: absolute;top: 6px;left: 60px;margin: 0;padding: 20px 0 10px;z-index: 2;width: 100px;text-align: center;color: white;font-size: 36px; line-height: 40px; background: #fe4300;border-radius: 2px 0 0 0;}
.photograph .label:after {content: '';position: absolute;left: 0;top: 100%;height: 0;width: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 20px solid #fe4300;}
	@media screen and ( max-width: 768px ){
		.bg01{background:url(../images/bg-b.jpg) top center repeat; padding: 4vw 0 0;}
		.photograph{padding: 0 0 8vw ;margin: auto; width: 100%;}
		.photograph a { flex-wrap: wrap; background: none;}
		.photograph a p {width: 90vw; font-size:1.1rem; line-height: 2rem; color:#faa432; padding: 0 2vw; margin: auto;}
		.photograph a p span {margin: 3vw 0 0;}
		.photograph a p span big {font-size: 2rem; }
		.photograph a img { width: 90vw; height: 50vw;object-fit: cover;margin: 2vw auto;}
		.photograph .label { top: 0;left: 5vw;padding: 2vw 0 1vw;width: 20vw;font-size: 1.6rem; line-height: 1.8rem; }
		.photograph .label:after {border-left: 10vw solid transparent;border-right: 10vw solid transparent;border-top: 3vw solid #fe4300;}
		
	}


.magazine ul {
    border: solid 0px #fff;
	background:url(../images/pc_ul_bg.png) no-repeat; background-size:100%; 
}
.magazine {margin: 20px auto 30px;}
.magazine li{padding: 42px 10px;}
.magazine .font {color: #fef0e1;}
.price {color: #fef0e1;}
@media screen and ( max-width: 640px ){
.magazine ul {background-image:url("../images/pc_ul_bgm.png"); background-repeat:repeat;}
.magazine li{padding: 2vw 1vw;}

}

/* --出版社--  */		
.publish{background: url(../images/bg-g.jpg) top center repeat;width: 1160px;margin: 25px auto 80px;box-shadow: 0 0 0 10px #b89962;border: 5px double;}
.item_m {display: none;}
.publish ul { display: flex;flex-wrap: wrap;justify-content: center;}
.publish ul li{ margin: 20px;transition: .3s;}
.publish ul li:hover{ transform: translateY(-8px);}
.publish ul li img{ width:165px; height:217px;}
.publish ul li h6{ background-color:#fe4f00; width:165px; height:30px; margin-top:15px; text-align:center; color:#fff4dc; font-size:1.1rem; line-height:30px; font-weight:500; border-radius:50px;}

	@media screen and ( max-width: 768px ){
.publish{ width:94vw; margin: 2vw auto 5vw;}		
.publish ul {}	
.publish ul li{ width:40vw;margin:3vw 2vw;}
.publish ul li img{width:40vw; height:58vw;}
.publish ul li h6{  font-size:0.8rem;margin-top:1vw;}
		}

/* 文學分類 */
.literature{margin-bottom: 40px; width: 1200px; margin: 10px auto 30px; }
.literature h2{font-size: 30px;font-weight: 700; margin: 40px 0 0; color: #424242;}
.literature h2 big{font-size: 36px;}
.literature h2 p{ display: inline;font-size: 22px; letter-spacing:2px;padding: 0 0 0 10px;}
.literature ul {display: flex;  justify-content: center; }
.literature ul li{ width: 50vw;text-align: center;margin: 1vw;padding: 1vw;font-size: 26px;border: 4px double #222c44; background: url(../images/bg-g.jpg) top center repeat;}
.literature ul li a{  color:#000000; }
.literature ul li big{font-size: 36px;}
	@media screen and ( max-width: 768px ){	
		.literature{margin-bottom: 5vw;width: 100%;}
		.literature h2{font-size: 1.6rem; margin:10vw 0 0; }
		.literature h2 big{font-size: 2rem;}
		.literature h2 p{font-size: 1.3rem; letter-spacing:0;padding: 0 0 0 10px;}
		.literature ul {flex-wrap: wrap; }
		.literature ul li{ width: 46vw;margin: 1vw;padding: 1vw;font-size:1.2rem;}
		.literature ul li big{font-size: 1.6rem;}
		.literature ul .full{width: 96vw;}
	}


/*--goto top--*/
#gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}
#gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff;  opacity:0.5;background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;}
#gotop:hover {cursor: pointer;background-color: #666;}
#gotop:active {background-color: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 640px ){
	#gotop {bottom: 2vw;right: 0;margin: 2vw;	}
	}