@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;900&display=swap');

/*reset*/
body, html, applet, object, iframe, img, strong, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input { margin: 0; padding: 0; border: 0; outline: 0; vertical-align:middle; }
h1, h2, h3, h4, h5, h6,p,b {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal;}
article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;margin:0;padding:0;border:0;}
table{border-collapse:collapse;border-spacing:0;}
img,a{border:0; outline:0;}
a{ text-decoration:none; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
*:focus { outline:none;}
body { font-family:'Noto Serif TC','Microsoft JhengHei', sans-serif; color:#fff; font-size:18px; line-height:25px;
    background: url(../images/bg4.jpg) no-repeat bottom center #1d2121; background-size: contain;}
/* default */
img {max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
b,.t-bold { font-weight:600;}
.red { color:#eb7c4a;}
.gray { color:#aaa;}
.black { color:#000;}
.blue { color:#67dae3 !important;}
.green { color:#556c21 !important;}
.pur { color:#a76a70;}
.yel { color:#9c9228;}
.small { font-size:13px !important;}
.m-l-m { margin-left:20px;}
.m-b-m { margin-bottom:20px;}
.m-b-L {  margin-bottom:80px;}
.m-t-L { margin-top:80px;}
.break { display:block;}

.container { width:90%; max-width:1200px; margin:0 auto; position: relative; z-index: 3;}

#bg1{ background:url("../images/bg2.png") top center repeat-y; background-size:contain; width:100%; height:3200px; left:0; position:fixed; z-index:1;}
#bg2{ background:url("../images/bg3.png") top center repeat-y; background-size:contain;  width:100%; height:3200px; left:0; position:fixed; z-index:2;}
.wrap { width:90%; max-width:1050px; margin:0 auto;}

img.for-pc {}
img.for-m { display:none;}

/* head */
#po_bar { position:absolute; width:100%; margin:0 auto; height:45px; left:0; padding-top: 10px; z-index:3;}
.logo{ display:block; width:90px; position:absolute; left:20px;}
ul#option { position:absolute; top:5px; right:20px;}
ul#option li { display:inline-block; float:none; font-size:13px; margin-left:5px; vertical-align:middle; }
ul#option li img { vertical-align:middle;}
ul#option li a { color:#fff;}
ul#option li a:hover { text-decoration:underline;}
.btn-menu { display:none;}

/* nav */
nav { display: none; position: fixed; top: 0; left: 0; width: 100%; text-align: center; background:rgba(0,0,0,.8); z-index: 99;}
nav ul li { display: inline-block; }
nav ul li a { display: block; color:#fff; padding:15px 20px; font-size: 20px;}
nav ul li a:hover { color:#fff18d;}
nav ul li a.active {}

/* toparea */
#section0 { background: url("../images/bg1.jpg") no-repeat top center; height:700px; background-size:cover;}
#section0 .top-wrap { position:relative; width:100%; max-width:1100px; height:100%; margin:0 auto; z-index: 2;}
.mobile { display: none;}
#section0 h1 { position:absolute; right:0; top:80px; text-align:right;}
#section0 .top-txt { position:absolute; right:0; bottom:80px; text-align:center;}
#section0 .top-txt .blue { font-size:26px;}
h2 { font-size:22px; line-height:30px; margin-bottom:10px;}
h3 { font-size:20px; line-height:28px; margin-bottom:10px;}
h4 { font-size:18px; line-height:25px; margin-bottom:10px;}
p { font-size:18px; line-height:25px; color:#fff;}
#section0 h3 span { font-size:24px; font-weight:bold;}
#section0 .bl { display:inline-block; padding:8px; background:#000; border-radius:20px;}
#section0 .movie-txt { position:absolute; left:50px; bottom:50px;}

.stitle { padding:50px 0 20px 0; text-align: center; clear:both;}
.box { background:rgba(47,55,54,.5); width:calc( 90% - 100px ); padding:50px; max-width:1100px; margin:20px auto 40px auto;}

/* 播出 */
.video-box { width:100%; max-width:900px; margin:20px auto;}
.sbox { background:rgba(255,255,255,.9); width:calc( 90% - 100px ); padding:50px; max-width:900px; margin:20px auto 40px auto; border-radius:10px; position:relative;}
.sbox .vimg1 { position:absolute; left:-20px; top:-20px;}
.sbox .vimg2 { position:absolute; left:-20px; bottom:-20px;}
.sbox .vimg3 { position:absolute; right:-20px; top:-20px;}
.video { clear:both; width:100%; max-width:900px; margin:0 auto;}
.video-two { width:100%; max-width:900px; margin:10px auto 0 auto; overflow:hidden;}
.video-two .le { float:left; width:48%;}
.video-two .ri { float:right; width:48%;}
.video-two iframe {}
.sbox h2 { width:100%; max-width: 400px; margin:15px auto; line-height:30px; color:#000;}
.plat-btn { display: inline-block; vertical-align:middle; border:1px solid #1d2121; color:#1d2121; font-size:18px; font-family: Arial, "sans-serif"; border-radius:5px; margin:0 2px; padding:0 20px; font-weight:bold;}
.plat-btn:hover { opacity:0.8;}

/* 作品介紹 */
.bookinfo { overflow: hidden;}
.bookinfo .left { float: left;}
.bookinfo .right { float: right;}
.bookinfo .cover { width:35%; text-align: center;}
.bookinfo .book-info { width:60%; padding-left:5%; padding-top:50px;}
.book-info p { margin:20px 0;}
a.btn-black { clear:both; display:block; margin:0 auto; width:120px; border:1px solid #fff; color:#fff; padding:10px; text-align:center; font-size:20px;}
a.btn-black:hover { background:#fff; color:#000;}
.btns { clear:both; clear:both; color:#ccc; text-align:center;}
.btns a { display:inline-block; vertical-align:middle; color:#fff; padding:10px 20px; font-size:18px;}
.btns a:hover { opacity: 0.7;}

/* 作者介紹 */
.author { overflow: hidden;}
.a-line { width:100%; height:1px; background:#646f72; clear:both; margin:50px 0;}
.author:last-child {  border-bottom:0;}
.author .left { float:left; width:35%; text-align: center;}
.author .right { float:right; width:65%; padding-top:20px;}
.link-btn { margin-top:40px;}
.link-btn a{ display:inline-block; vertical-align:middle; padding:10px 20px; font-size:17px; margin-right:5px; color:#fff; border:1px solid #fff;}
.link-btn a:hover { opacity:0.7;}
.link-btn img { display: inline-block; margin-right:5px; vertical-align:middle; width:30px;}
.txt-right { text-align:right;}
ul.dot { padding-left:20px; margin-top:15px;}
ul.dot li { list-style: disc; margin-bottom: 5px;}

/* 活動 */
.act .field { margin:30px 0;}
.act .field:last-child { margin-bottom:0;}
.act .ti { display: inline-block; vertical-align: top; color:#67dae3; width:160px; text-align:center; font-weight:600;}
.act .txt { display: inline-block; vertical-align: top; vertical-align: top; width: calc( 100% - 200px ); margin-left:30px;}
ol { padding-left: 20px;}
ol li { list-style:decimal; margin-bottom:10px;}
a.btn-go{ clear:both; display:block; margin:20px auto 0 auto; width:130px; background:#000; color:#fff; padding:10px; text-align:center;}
a.btn-go:hover { opacity:0.8;}

.note { clear: both; padding: 20px; margin:50px auto 0 auto}
.note .ti { text-align: center; margin: 10px 0;}
.note .ti span { display: inline-block; border-top: 1px solid #b3bdbc; border-bottom: 1px solid #b3bdbc; font-size: 18px;letter-spacing: 3px;}
.note ol li { font-family:'Microsoft JhengHei'; font-size: 13px; line-height:18px; color:#b3bdbc;}

#footer { clear:both; font-size:13px; color:#646f72; text-align:center; padding:100px 0 20px 0;}

/*gotop*/
#gotop{ display:block; cursor: pointer; position:fixed; bottom:20px; right:20px; z-index:9999; width:40px; height:40px; border-radius:50%; border:1px solid #fff;
	background:url("../images/toparrow_.png") no-repeat center; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
#gotop:hover { bottom: 25px;}

/*-----------------------rwd*/

@media screen and (max-width: 1400px) {
	#section0 { height:700px;}
	#section0 h1 {}
	#section0 .top-txt { bottom:50px;}
}
@media screen and (max-width: 1200px) {
    .video { width:100%; max-width:900px; margin:0 auto;}
	.video iframe { width:600px; height:337px; display: block; margin:0 auto;}
}

@media screen and (max-width: 1000px) {

	/*head*/
	.logo{ left:10px;}
	.logo img { width:80px; height:34px;}
	.btn-menu { display:block; width:30px; height:30px; position:absolute; top:10px; right:10px; background:url(../images/icon-share.png) no-repeat center; background-size:28px 28px; z-index:101;}
	.btn-menu.active{ background:url(../images/icon-xx.png) no-repeat center; background-size:28px 28px;}
	ul#option { display:none; float:none; text-align:center; width:100%; margin-top:0; padding:40px 0; text-align:center; position:absolute; top:0; right:0; left:0; background:rgba(0,0,0,.8); z-index:100; -webkit-backface-visibility:hidden;}
	ul#option li { }
 	ul#option li a {text-shadow:none;}

	/* toparea */
	#section0 { background: url("../images/bg1-m.jpg") no-repeat top center; background-size:cover; height:700px;}
	#section0 h1 { position:static; width:300px; margin:0 auto; padding-top:300px;}
	#section0 .top-txt { position:static; width:90%; margin:0 auto; text-align:center;}
	#section0 .movie-txt { position:absolute; width:150px; left:10px; bottom:inherit; top:80px;}
	#section0 .top-txt .blue { font-size:24px;}
	#section0 h3 span { font-size:20px;}
    h2 { font-size:20px; line-height:28px;}
	h3 { font-size:18px; line-height:24px;}
	h4 { font-size:18px; line-height:20px;}
    p { font-size:16px; line-height:20px;}
	.container { padding-top:80px;}
	
	/*goTOP*/
	#gotop{ bottom:10px; right:10px;}
	#gotop a{ width:30px; height:30px; border-radius:50%; background-size:10px 8px;}
	#gotop a:hover { background-size:10px 8px;}
	
	.video { width:100%; max-width:900px; margin:0 auto;}
    .video-two { width:100%; max-width:900px; margin:10px auto 0 auto; overflow:hidden;}
    .video-two .le { float:none; margin-bottom:10px;}
    .video-two .ri { float:none;}
	.video iframe { width:600px; height:337px; display: block; margin:0 auto;}
	.video iframe { width:400px; height:225px;}
    
	.box { width:calc( 100% - 30px ); padding:15px; margin:10px auto 30px auto;}
	.sbox { width:calc( 100% - 30px ); padding:15px; margin:10px auto 30px auto;}
	.bookinfo .left { float:none;}
	.bookinfo .right { float:none;}
	.bookinfo .cover { width:80%; margin-right:0; margin:10px auto;}
	.bookinfo .book-info { width:100%; padding:0;}
	a.btn-black { margin:20px auto; font-size:17px;}

	.author .left { float:none; width:50%; margin:10px auto;}
	.author .right { float:none; width:100%;}
	.author .right h2 { text-align:center;}
	
	.link-btn { margin-top:20px; text-align: center;}
	.link-btn a{ padding:10px; font-size:15px; margin:3px;}
	.link-btn img { margin-right:3px;}
    
	.act { width:calc( 90% - 50px ); padding:25px;}
	.act .ti { display: block; width:200px; margin-right:0; margin: 0 auto 10px auto; font-size:17px; line-height:22px;}
	.act .txt { display: block; width:100%; margin: 0; font-size:17px; line-height:22px; text-align: center;}
	ol li { font-size:17px; line-height:25px; text-align:left;}
	
	/* 播出 */
	.sbox .vimg1,.sbox .vimg2,.sbox .vimg3 { display:none;}
	
}

@media screen and (max-width: 680px) {
	
	#bg1{ display:none;}
	#bg2{ display:none;}
	
	body { font-size: 15px; line-height: 19px;
		background: url(../images/bg-m.png), url(../images/bg4.jpg), #1d2121;
	background-position: center top, center bottom, center;
	background-repeat: repeat-y, no-repeat, repeat;
	background-size: contain;}
	p { font-size:15px; line-height:19px;}
	/* nav */
	nav ul li a { padding:5px 8px; font-size:12px;}
    
	/* 小標 */
	.stitle { margin-bottom: 30px; text-align: center;}
	.stitle h2 { font-size:25px; line-height:35px;}
	
	.booktxt { padding:10px 0 0 0; border-left:none; margin-top:10px; border-top:1px solid #ddd;}
	.btns a { width:auto; padding: 0 10px; font-size:15px;}
    .video iframe { width:300px !important; height:169px !important;}
    
	.botitle1 span { font-size:16px; line-height:22px;}
	.botitle2 { font-size:16px; line-height:22px; margin:15px 0;}
	
	.books { text-align: center; margin-top:30px;}
	.books a { margin:5px;}
	.books a img { width: 140px; height:192px;}
	.books a h4 { font-size:16px; line-height:22px; margin: 10px 0;}
	.books a:hover { background:rgba(255,255,255,.5); box-shadow:0 0 0 10px rgba(255,255,255,.5);}
	
	#footer { padding:50px 0 20px 0;}
}

@media screen and (max-width: 480px) {
    
	h2 { font-size:18px;}
    .break { display:inline;}
    /* toparea */
	#section0 .top-wrap { height:600px;}
    #section0 .movie-txt { width:120px; top:230px; left:inherit; right:10px;}
	.plat-btn { padding:0 10px;}
}