@charset "utf-8";
@import url("reset.css");
@import url(http://fonts.googleapis.com/css?family=Roboto);


body{
	font-size: 16px;
	background:url("../images/bg.jpg") repeat center;
	font-family:Verdana, Arial, Helvetica, sans-serif,'Microsoft JhengHei';
	-webkit-text-size-adjust:none;
	max-width:1920px;
	margin:0 auto;
}
	@media screen and ( max-width: 768px ){
		html, body{ 
			max-width:100%;
			min-width:320px;
			font-size: 12px;
			overflow-x: hidden;
		}
	}

/* 滑鼠動態效果 */
article li, .twoblock .leftbox_po, .twoblock .rightbox_po, .ad_block img{ 
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out;}
article li:active, article li:focus, article li:hover,
.twoblock .leftbox_po:active, .twoblock .leftbox_po:focus, .twoblock .leftbox_po:hover,
.twoblock .rightbox_po:active, .twoblock .rightbox_po:focus, .twoblock .rightbox_po:hover,
.ad_block img:active, .ad_block img:focus, .ad_block img:hover{
	-webkit-transform:translateY(-8px);
		    transform:translateY(-8px);}
article .theme li:active, article .theme li:focus, article .theme li:hover{transform:none;}



.kv_pc{ background:url(../images/kv_01.jpg) no-repeat center;  }
.kv_content{ position:relative; max-width:1200px; margin:0 auto; }
.title01{ position:absolute; top:30px; left:442px; z-index: 5;}
.title02{ position:absolute; top:250px; left:715px; z-index: 5;}

.kv_pc02{ background:url(../images/kv_02.jpg) no-repeat center;  }
.kv_content02{ position:relative; max-width:1200px; margin:0 auto; }
.p01{ position:absolute; top:162px; left:46px; z-index: 5;}
.p02{ position:absolute; top:162px; left:618px; z-index: 5;}
.p03{ position:absolute; top:730px; left:46px; z-index: 5;}
.p04{ position:absolute; top:730px; left:618px; z-index: 5;}
.p05{ position:absolute; top:1290px; left:102px; z-index: 0;}
.movie{ position:absolute; top:1935px; left:88px; z-index: 40;}
.tv{ position:absolute; top:1870px; left:39px; z-index: 20;}
.p06{ position:absolute; top:2530px; left:0px; z-index: 0;}
.promo01{ position:absolute; top:3120px; left:398px; z-index:20;}
.promo02{ position:absolute; top:3120px; left:986px; z-index:20;}
.p07{ position:absolute; top:3120px; left:0px; z-index: 0;}
.promo03{ position:absolute;  top:3895px; left:580px; z-index:20;}
.p08{ position:absolute; top:3600px; left:0px; z-index: 0;}


.kv_m{ display: none;}
	@media screen and ( max-width: 768px ){
		.kv_pc{ display: none; }
		.kv_pc02{ display: none; }
		.kv_m{ display: block; margin-bottom:-2%;}
		.kv_m img {width: 100%; display: block;}
		.kv_m iframe{ width:100% !important; display: block; margin:0 auto;}
	}


section{ max-width:1920px; margin:0 auto; padding:0;}
article{ display:block; max-width:1200px; margin:0 auto; padding: 20px;}
	@media screen and ( max-width: 768px ){
		section{ max-width:100%;}
		article{ max-width:100%; min-width:320px; padding:2% 0%; }
	}


/* ========== 背景 =========== */
.bg_1x4{ background:url("../images/bg.jpg") repeat center;}
.bg_bottom0{ background:url(../images/bg.jpg);}
.bg_bottom1{ background:url("../images/bg.jpg") repeat center;}
.bg_bottom2{ background:url("../images/bg.jpg") repeat center;}
	@media screen and ( max-width: 768px ){
		.bg_bottom1{ /*background:url("../images/bg_3.png") repeat center top/150%;*/}
		.bg_bottom2{ background:url("../images/bg.jpg") repeat center top/150%;}
	}



/* ========== 選單 =========== */
.link{ width:100%; background:url(../images/link_bg.jpg) top center repeat; height:159px; position:relative; display:block;}	
.link_content{ width:1200px; margin:0 auto; min-width:1200px; position:relative;}	

.link1{ position:absolute; top:32px; left:18px; }
.link2{ position:absolute; top:32px; left:415px; }
.link3{ position:absolute; top:32px; left:810px; }
.link_content img{ width:370px; }
	@media screen and ( max-width: 768px ){
		.link{ width:100vw; height:auto; padding:2.5vw 0;}
		.link_content{ width:100vw;}	

		.link1, .link2, .link3{ display:block; position:unset; width:90vw; margin:2vw 5vw;}
		.link_content img{ width:90vw;}
	}





/* ========== 區塊 =========== */

/*---- 1x2 ------------------------------------------------------------------------------------------------------------*/
.twoblock{ width: 1200px; /*background:url(../images/twobg.jpg) center top;*/ display:flex; justify-content:center;  max-width:100%; margin:20px auto;}
	@media screen and ( max-width: 768px ){
		.twoblock{ background:none; margin-top: 0px;}
	}

/*leftbox*/ 
.leftbox{ min-width:50%; background:url(../images/bg-b2.jpg) top center repeat; padding:2% 0%; min-height:300px; box-sizing:border-box;}
.leftbox_po{ width:600px; float:right;}

.leftimg{ /*background-image: url(../images/frame.png) no-repeat center;*/ background-size:contain; width:43%; float:left; vertical-align:top; margin-left:5%;}
.leftimg img{ display:block; padding:3%; width:auto; height:360px; object-fit:contain;}

.leftbox_ul{ float:right; width:50%; padding:2% 5%;}
	@media screen and ( max-width: 768px ){
		.leftbox{ padding:4vw 0; min-height:auto;}
		.leftbox_po{ width:100%;}
		.leftimg{ background-image:none; width:88%; margin-left:5%; }
		.leftimg img{ width:100%; max-height:55vw; margin:0 auto; float:none;}
		.leftbox_ul{ width:94%; padding:3% 5%; margin-right:4%;}
	}

/*rightbox*/ 
.rightbox{ min-width:50%; background:url(../images/bg-b.jpg) top center repeat;; padding:2% 0%; min-height:300px; box-sizing:border-box;}
.rightbox_po{ width:600px; float:left;}

.rightimg{ /*background: url(../images/frame.png) no-repeat center;*/ background-size:contain; width:43%; float:right; vertical-align:top; margin-right:5%;}
.rightimg img{ display:block; padding:3%; width:auto; height:360px; object-fit:contain; }

.rightbox_ul{ float:left; width:50%; padding:2% 5%;}
	@media screen and ( max-width: 768px ){
		.rightbox{ padding:4vw 0; min-height:auto;}
		.rightbox_po{ width:100%;}
		.rightimg { background-image:none; width:88%; margin:0 auto; float:none;}
		.rightimg img{ width:100%; max-height:55vw;}
		.rightbox_ul{ width:94%; padding:3% 5%; margin-left:4%;}
	}


/*contert*/
.twoblock ul li:nth-child(1){ font-size:1.8em; font-weight:bold; color:#f1ede2; line-height:1.5em;}

.twoblock ul li:nth-child(2){ clear:both; padding:5% 0%;}
.twoblock ul li:nth-child(2) hr{ width:80%; border:0; background-color:#ffe90e; height:1.5px; margin-top:6%; float:right;}
.twoblock ul li:nth-child(2) img{ width:13%;}

.twoblock ul li:nth-child(3){ color:#ffffff; font-size:1.2em; line-height:1.5em; padding:0 4%;}

.twoblock ul li:nth-child(4){ clear:both; padding:5% 0%;}
.twoblock ul li:nth-child(4) hr{ width:80%; border:0; background-color:#ffe90e; height:1.5px; margin-top:6%; float:left;}
.twoblock ul li:nth-child(4) img{ width:13%; float:right;}
.twoblock ul li span.style3{ font-size:1.2em; font-weight:bold; color:#ffe90e; line-height:2em;}
	@media screen and ( max-width: 768px ){
		.twoblock ul li:nth-child(1){ font-size:1.6em; text-align:center;}
		.twoblock ul li:nth-child(2){ padding: 1% 0% 5% 0%;}
		.twoblock ul li:nth-child(2) img, .leftbox_ul li:nth-child(4) img{ width:10%;}
		.twoblock ul li:nth-child(3){ font-size: 1.2em; }
		.twoblock ul li:nth-child(4){ padding: 5% 0% 3% 0%;}
	}



/*---- 1x4 ------------------------------------------------------------------------------------------------------------*/
.fiveblock .theme{ display:flex; flex-direction:row;} 

.des { display:flex; flex:2.5; }
.cap{ font-size:2em; font-weight:bold; padding-left:10px; color:#0071bc; max-width:100%; margin:0 10px 5px 2px; }
.title{ font-size:2em; font-weight:bold; color:#000000; }

.more { display:flex; flex:0.5; justify-content:flex-end; align-items:center; font-size:1.2em;}
.more img{ display:block; max-width:100%; margin-top:35%;}
.more a{ color:#0071bc;}
.iconBox{ border-width:5px; border-style:solid; border-color:transparent transparent transparent #0071bc; height:1px; width:1px; margin:1.3%;}
	@media screen and ( max-width: 768px ){
		.fiveblock .theme{ height:6vw; margin-bottom:3vw;} 

		.des { float:left; }
		.cap{ margin:0 5px 5px 2px; }
		.cap img{ display:inline-block; width:12%; margin-top:2px;}
		.title{ font-size:2em; padding-top:0; letter-spacing: -1px;}

		.more { float:right;}
		.more img{ max-width:90%; margin-top:35%;}
		.iconBox{ margin: 2.3% 1% 2.3% 5%;}
	}
	@media screen and ( max-width: 375px ){
		.fiveblock .theme{ height:10vw;} 
	}


.block{ max-width:100%; margin:1.5% auto 0 auto;}

.fiveblock ul{ background:url(../images/pc_ul_bg.png) no-repeat; background-size:100%; text-align:center; padding:1% 0 5% 0;}
.fiveblock ul li{ display:inline-block; width:20%; height:auto; margin:1.5% 1.2% 0.5% 1.2%; min-width:180px; vertical-align:top;}
.fiveblock ul li a img{ width:100%; height:300px; object-fit:contain;}

.fiveblock ul li a p, .fiveblock ul li a span{ text-align:center; margin-top:1%;}
.fiveblock ul li a p.style1{ font-size:1.5em; color: #000000; font-weight:bold;}
.fiveblock ul li a p.style2{ font-size: 1.2em; color: #000000;}
.fiveblock ul li a span.style3{ font-size:1.2em; color: #c73838; font-weight:bold;}
	@media screen and ( max-width: 1200px ){	
		.fiveblock ul{
			background-image:url("../images/bg-y.jpg"); background-repeat:repeat;
		}		
	}
	@media screen and ( max-width: 768px ){
		.fiveblock ul{ background-size:auto; margin-bottom:6%;margin: 2vw 2vw 4vw;}
		.fiveblock ul li { width:42%; margin:3% 3% 0% 3%; min-width:auto;}
		.fiveblock ul li a{ padding:0;}
		.fiveblock ul li a img{ width: 100%; max-height: 55vw;}
		
	}



/*---- 1x3 ------------------------------------------------------------------------------------------------------------*/
/* keyword + ad + bt*/
span.priceR{ font-weight:bold; color:#c73838; font-size:1.5em; line-height:1em; }

.threeblock{ width:100%; height:auto; margin:0 auto; text-align:center; /*background:url(../images/bg_flower.png) center -4600px,url(../images/bg_15.jpg) no-repeat center top;*/ }
.threeblock_content{ width:1200px; margin:0 auto 30px auto; padding:0; display:inline-flex; align-items:center;  }
.threeblock_content div { }

.threeblock h2{ background:url(../images/bg_theme1.png) no-repeat center;}

.kword{ flex:1.2;  }
.kword ul{ }
.kword ul li{ height:52px; font-size:1.5em; line-height:2.2em; font-weight:bold;  }
.kword ul li a{ color:#ffe90e;}
.kword ul li:nth-of-type(odd){background:#0071bc;}
.kword ul li:nth-of-type(even){background:#0c5a8d;}

.ad_block{ flex:1.7;  }
.ad_block img{ max-width:90%; margin:1%;}

.bt ul{ text-align:center;  }
.bt ul li{ color:#000000; width:195px; height:118px; margin:7% auto; font-size:1.2em; line-height:6em; font-weight:bold; background:#ffe90e; border:7px double #0071bc;}
.bt ul li img{ max-width:15px; margin-left:2px;}
	@media screen and ( max-width: 768px ){
		span.priceR{ font-size:1.3em;}

		.threeblock{ height:auto; /*background:url(../images/m/mbg_2.png) repeat;*/ }
		.threeblock_content{ width:98%; height:auto; margin:0 auto; padding:0; display:block;}	
		.kword ul{ display: flex;flex-wrap: wrap;justify-content: center;}
		.kword ul li{ display:inline-block; width:47.5vw; height:12vw; font-size:1.5rem; line-height:12vw; margin:0 ; background:#f47000;}
		.kword ul li:nth-child(4n){background:#0071bc;}
		.kword ul li:nth-child(4n-1){background:#0c5a8d;}

		.ad_block{ padding:2vw 0; }
		.ad_block img{ max-width:97%; margin:1% auto 0.5% auto; }

		.bt ul li{ font-size:1.5rem; display:inline-block; width:47vw; height:20vw; line-height:17vw; margin:0 auto 3vw auto; background-size:100%; }
	}
	@media screen and ( max-width: 375px ){	
		.kword ul li{ font-size:1.2em; }
		.bt ul li{ font-size:1.2em;}
	}


/* --出版社--  */		
.publish{background: url(../images/bg02.jpg) top center repeat;width: 1160px;margin: 25px auto 80px;box-shadow: 0 0 0 10px #37b776;border: 10px 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:#000000; 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;}
		}

/* photograph */
.photograph{overflow: hidden; padding: 0 41px 25px;margin: auto; width: 1125px; position: relative;}
.photograph a { display: flex; justify-content: space-between;background:url(../images/bg.jpg);}
.photograph a p {width: 470px;font-weight: bold; font-size:20px; line-height: 40px; color:#000000; padding:20px 20px 0;text-align:center;}
.photograph a p span {display: block; color: #000000;margin: 30px 0 0;}
.photograph a p span big {font-size: 35px; color: #c73838;}
.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: #0071bc;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 #0071bc;}
	@media screen and ( max-width: 768px ){
		.photograph{padding: 0 0 8vw ;margin: auto; width: 100%;}
		.photograph a { flex-wrap: wrap; background: none;}
		.photograph a p {width: 90vw; font-size:0.8rem; line-height: 2rem; color:#000000; 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 #39ba7a;}
		
	}

/* ========== 文具線公板_品牌快搜 =========== */
.theme{ display:flex; flex-direction:row; margin:0 auto; text-align:center;/* border-bottom:1px solid #261003;*/}
.theme ul{ margin: 0 auto; position:relative;  }
.threeblock .theme ul{ }
.topbrand .theme ul{ background: url(../images/bg_content_bl.png) top center repeat;}
.theme ul li{ float:left; font-size:2.5rem; font-weight:bold; padding:0 15px; border-right:1px solid #261003;}
.theme ul li:last-child{ border-right:none;}
	@media screen and ( max-width: 768px ){
		.theme{ /* border-bottom:4px double #261003;*/ height:1.5rem; margin-bottom:30px; }
		.theme ul{ top:1vw; height:4vw;}
		.theme ul li{ font-size:2.3rem; }
	}
	@media screen and ( max-width: 375px ){	
		.theme{  margin:0 0 5vw 0; }
		.theme ul{ height:8vw;}
		.theme ul li{ font-size:1.6rem;}
	}

.topbrand{ max-width:1200px; margin:0 auto; padding:0; }
.brand { width:100%; text-align:center; padding-top:25px;}

.brand li{ display:inline-block; width:370px; height:100px; margin-right:20px; margin-bottom:26px; position:relative; transition:all 0.5s; text-align:left; }
.brand li:hover{ transform: translateY(-5px);}
.brand li:nth-child(3n){ margin-right:0px;}

.text_D{ color:#261003;}
.text_L{ color:#fff;}

.brand li p{ font-size:1.8rem; line-height:100px; padding:0 0px 0px 15px; position:absolute; font-weight:bold;}
/*.brand li span{ padding:0px 0px 0px 0px; font-size:1rem; letter-spacing:0.5px; font-weight:bold;}*/
.brand li img{ width:100%; position:absolute;}
	@media screen and ( max-width: 768px ){
		.topbrand h2 { font-size:1.8em;}
		.brand { padding:0% 5% 5% 5%; }

		.brand li{ display:block; width:100%; height:auto; margin:1.5vw auto;}
		
		.text_D, .text_L{ z-index:2;}

		.brand li p{ line-height:1vw; padding:0 0px 0px 4% !important; top:12vw !important; font-size:2em !important; }
		/*.brand li span{ padding:3vw 0px 0px 0px;}*/
		.brand li img{ position:unset;}
	}
	@media screen and ( max-width: 375px ){
	}

/* 文學分類 */
.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: 7px double #0071bc; background-color: #ffe90e;}
.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;}
	}

	

/* ========== AD =========== */
.banner { margin:auto; max-width:1200px; text-align:center;/* background-image:url("../images/bg02.jpg");*/ padding:3% 0% 2% 0%;}
.banner li{ display:inline-block;  margin:6px; }
.banner li img{ width:580px;}
.for_pc{display: block;}
.for_m{display: none;}
	@media screen and ( max-width: 768px ){
		.banner { padding:0;}
		.banner li{ width:94vw; margin:1vw; }
		.banner li img{ width:100%;}
		.for_pc{display: none;}
		.for_m{display: block;}
		
	}



img.BackToTop{ display:block; margin:30px auto 30px auto;}
	@media screen and ( max-width: 768px ){
		img.BackToTop{ max-width:80%;}
	}





/*--goto top--*/
#button {
	display: inline-block;
	background-color: #000;
	opacity:0.3;
	width: 35px;
	height: 35px;
	text-align: center;
	border-radius: 100%;
	position: fixed;
	bottom: 15px;
	right: 15px;
	transition: background-color .3s, opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
  }
	  @media screen and ( max-width: 768px ){
		  #button {
		  bottom: 40px; right: 10px;}
	  }
  
  #button::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:45%;background-position:50% 22%;
  }
  #button:hover {
	cursor: pointer;
	background-color: #666;
  }
  #button:active {
	background-color: #666;
  }
  #button.show {
	opacity: 0.4;
	visibility: visible;
  }