@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
html, body { height:100%;}
body { font-family:"Noto Sans TC", "微軟正黑體", "Microsoft JhengHei" ,sans-serif; color:#231f20;}

header { width:90%; max-width:1000px; margin:0 auto; position:relative;}
.logo { display:block; position:absolute; left:0; top:10px;}
.logo img { width:160px; height:34px;}
.social { position:absolute; right:0; top:10px; text-align:right;}
.social a{ display:inline-block; margin-left:5px;}
.social a:hover { opacity:0.7;}

/* nav */
.nav { position:fixed; right:40px; top:30%; width:200px; height:295px; padding-top:55px; background:url(../images/nav-bg.png) no-repeat center; text-align:center; z-index:1;}
.nav li { margin-bottom:10px;}
.nav a{ display:inline-block; border-radius:30px; color:#231f20; font-size:20px; padding:10px 12px; font-weight:bolder;}
.nav li:hover a,.nav li.active a { background:#231f20; color:#fff;}
#btn-menu { display:none;}

footer { clear:both; text-align:center; color:#838383; font-size:14px; margin:30px 0; text-align: center;}

.clear { clear:both;}
.blue { color:#174770;}
a.blue:hover { opacity:0.7;}
.underline,.uline { text-decoration:underline;}
a.underline:hover { opacity:0.7;}
.red { color:#fe6b6b;}
.green { color:#48cdcd;}
.white { color:#fff;}
.gray { color:#999;}
.small { font-size:15px;}
.f30 { font-size:30px;}
.txt-c { text-align:center;}
.txt-l { text-align:left !important;}
.m-b-m { margin-bottom:20px;}
.pd100 { padding-top:100px;}

/* 首頁 */
.wrapper-idx { clear:both; width:100%; height:100%; background:url(../images/bg-idx.png) no-repeat center fixed; background-size: 100% 100%; position:relative;}
.wrapper-idx img { height: auto !important; max-width: 100% !important;}
.wrapper-idx .img-b { width:80%; position:absolute; left:10%; bottom:0; text-align:center;}
.idx-box { text-align:center; padding-top:150px;}
.big-title { width:45%; margin:0 auto;}
.idx-box h3 { font-size:25px; line-height:35px; margin:10px 0;}
.idx-box p { font-size:20px; line-height:30px;}

/* 內頁 */
.wrapper { width:100%; height:100%; background:url(../images/bg-inn.png) no-repeat center fixed rgba(255,255,255,.1); background-size: 100% 100%; position:relative;}
.container { width:100%; height:calc( 100% - 60px); position:fixed; top:30px; left:0; overflow-y: scroll;}
.inner { width:100%; max-width:1100px; background:rgba(255,255,255,.1); margin:0 auto;}

/* ---------- 試讀指南 ---------- */
.part2-title { text-align:center; padding-top:100px;}
.part2-stitle { text-align:center; font-size:35px; line-height:45px; margin:20px 0;}
.part2-title-m { display:none;}
.gender { text-align:center;}
.gender a{ display:inline-block; margin:0 20px;}
.gender img { width:310px; height:270px; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.gender img:hover { width:320px; height:279px;}

.guide-ti { text-align:center; font-size:35px; line-height:45px; margin:0 0 100px 0; padding-top:50px;}
.guide { width:750px; height:150px; margin:0 auto; padding-top:100px; border:5px solid #231f20; position:relative; border-radius:20px;}
.guide .box{ display:block; border:5px solid #231f20; border-radius:20px; position:relative; width:270px; background:#fff;}
.guide .box:hover { background:#FFC;}
.guide .title { border:5px solid #231f20; color:#fff; border-radius:40px; text-align:center; font-size:28px; padding:15px 0; width:140px; position:absolute; left:50%; top:-30px; margin-left:-70px; text-align:center;}
.guide .tags { padding:40px 25px 30px 25px;}
.guide .tags span { display:inline-block; vertical-align:top; font-size:20px; line-height:30px; width:105px; color:#231f20;}

.guide .g1 { position:absolute; left:70px; top:-60px;}
.guide .g2 { position:absolute; right:70px; top:-60px;}
.guide .g3 { position:absolute; left:-110px; bottom:-60px;}
.guide .g4 { position:absolute; left:240px; bottom:-60px;}
.guide .g5 { position:absolute; right:-110px; bottom:-60px;}

.guide.male .title{ background:#48cdcd;}
.guide.male .tags a:hover { color:#48cdcd;}
.guide.female .title{ background:#fe6b6b;}
.guide.female .tags a:hover { color:#fe6b6b;}

/* 男女主文 */
.title-man { width:500px; margin:0 auto; padding-top:50px; text-align:center; background:url(../images/man.png) 100px 50px no-repeat;}
.title-man h4 { background:#48cdcd; display:inline-block; padding:15px 30px; border-radius:30px; color:#fff; font-size:22px;}
.title-man h1 { font-size:50px; line-height:60px; color:#231f20; font-weight:bold; margin-bottom:20px;}
.title-man p { color:#48cdcd; font-size:22px; line-height:30px; margin-bottom:50px;}
.title-girl { width:500px; margin:0 auto; padding-top:50px; text-align:center; background:url(../images/girl.png) 100px 50px no-repeat;}
.title-girl h4 { background:#fe6b6b; display:inline-block; padding:15px 30px; border-radius:30px; color:#fff; font-size:22px;}
.title-girl h1 { font-size:50px; line-height:60px; color:#231f20; font-weight:bold; margin-bottom:20px;}
.title-girl p { color:#fe6b6b; font-size:22px; line-height:30px; margin-bottom:50px;}

.book-list { text-align:center;}
.book-list .box { display:inline-block; vertical-align:top; width:170px; height:350px; margin:0 20px; }
.book-list .cover { position:relative; background:#000;}

.cover img { width:170px; height:220px;}
.cover:hover img { opacity:1; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.cover:hover img { opacity:0.7;}
.cover .ico { width:11px; height:19px; background:url(../images/icon-arrow.png) no-repeat center; position:absolute; left:50%; margin-left:-5px; top:100px; opacity:0; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.cover:hover .ico { opacity:1;}
.book-list .box h3 { color:#000; font-size:20px; line-height:24px; margin:8px 0; font-weight:normal;}
.book-list .box p { color:#999; font-size:16px;}
.book-list .box .bdate { background: #be2600; color: #fff; padding:3px 8px; font-size:15px; position: absolute; left: -5px; top: 5px; }
.book-list .box a.go { color:#be2600; border: 2px solid #be2600; font-size:18px; display: block; padding: 8px 0; text-align: center; margin-top: 15px; }
.book-list .box a.go:hover { background:#be2600; color: #fff; }

.backbtn { display:block; width:100px; text-align:center; border:4px solid #231f20; margin:30px auto; background:#231f20; color:#fff; border-radius:40px; font-size:20px; line-height:30px;}
.backbtn:hover { background:#fff; color:#231f20;}

/* ---------- 試讀套餐 ---------- */
.part3-title { text-align:center; padding-top:100px;}
.part3-title2 { text-align:center; font-size:40px; line-height:50px; color:#48cdcd;}
.part3-stitle { text-align:center; font-size:24px; line-height:30px; margin:20px 0;}
/* tab */
.tabUI { width:100%; margin:0 auto; clear:both;}
.tabUI .tabs { margin:30px auto; text-align:center; overflow:hidden;}
.tabUI .tabs li { float:left; width:23%; margin:5px 1%;}
.tabUI .tabs li a{ display:block; padding:12px 20px; border-radius:40px; font-size:20px; line-height:24px; color:#fff; background:#231f20}
.tabUI .tabs li a:hover { background:#48cdcd;}
.tabUI .tabs li a span { margin-right:5px;}
.tabUI .tabs li.active a{ background:#48cdcd;}
.tabUI .tabs li.active a span{ }
.tabUI .tabs.forset { width:100%; max-width:900px;}
.tab-container.forset { width:100%; max-width:1000px; margin:0 auto;}

/* 限時贈 */
.gifts { width:100%; max-width:1000px; margin:50px auto 0 auto;}
.book-list-msg { overflow:hidden;}
.book-list-msg .box { display:block; float:left; width:23%; margin:0 0 20px 0; height:150px; padding:10px 1%;}
.book-list-msg.forgift .box { height:210px;}
.book-list-msg .box .date { color:#3b9fb7; border:1px solid #3b9fb7; font-size:20px; padding:10px 20px; text-align:center; margin-bottom:10px;}
.book-list-msg .box .cover{ display:inline-block; width:48%; vertical-align:middle;}
.book-list-msg .box .txt{ display:inline-block; width:calc( 48% - 10px); margin-left:10px; vertical-align:middle;}
.book-list-msg .box h3 { color:#000; font-size:20px; line-height:24px; margin:8px 0; font-weight:normal;}
.book-list-msg .box p { color:#999; font-size:16px;}
.book-list-msg .cover img { width:120px; height:155px;}
.book-list-msg .btn { display:block; padding:8px 0; text-align:center; background:#000; color:#fff; font-size:16px; margin-top:20px;}
.book-list-msg .btn:hover { background:#ef4939;}
.line { clear:both; height:1px; background:#ddd; margin:60px 0; width:100%;}

/* ---------- 小編來送禮 ---------- */
.part3-title-m { display:none;}
.gift-box { border:4px solid #231f20; border-radius:20px; width:100%; max-width:800px; margin:30px auto;}
.gift-box .title{ background:#231f20; border-radius:15px 15px 0 0; color:#fff; padding:15px 15px 15px 60px; font-size:28px; line-height:38px; position:relative;}
.gift-box .title span { color:#fdde62;}
.gift-box .act { background:#48cdcd; color:#231f20; font-size:18px; width:80px; height:80px; line-height:80px; text-align:center; border-radius:50%; border:4px solid #231f20; position:absolute; left:-50px; top:-10px;}
.gift-box .inn { padding:40px; font-size:25px; line-height:35px; text-align:center; position:relative;}
.gift-box .imgs { position:absolute; right:30px; bottom:-30px;}
.btn-wrap { margin-top:20px; text-align:center;}
.go-btn { background:#fe6b6b; color:#231f20; border:4px solid #231f20; display:inline-block; padding:15px 40px; font-weight:bold; font-size:24px; line-height:30px; border-radius:40px;}
.go-btn:hover { background:#231f20; color:#fff;}
.rline { display:inline-block; border-bottom:3px solid fe6b6b;}
.awards { text-align:center;}
.awards div { display:inline-block; margin:5px;}
.awards h4 { color:#fe6b6b; font-size:20px; font-weight:bold; line-height:30px; margin-bottom:10px;}
.awards p { color:#231f20; font-size:18px; line-height:20px;}

/* ---------- 獨家優惠 ---------- */
.tabUI .tabs.forsp li { float:none; display:inline-block; width:15%; margin:5px 0.5%;}
.tabUI .tabs.forsp li a{ display:block; padding:10px 0; border-radius:40px; font-size:20px; line-height:24px;}
/*注意事項*/
.bd-title { font-size:30px; line-height:40px; margin:20px auto; width:150px; padding:10px 20px; border-radius:40px; border:3px solid #231f20; color:#231f20; font-weight:bolder; text-align:center;}
.notice { padding:30px 50px;}
.notice h3 { font-size:25px; line-height:40px; margin-bottom:20px;}
.notice ol { padding-left:20px;}
.notice ol li { list-style:decimal; font-size:18px; line-height:30px; margin-bottom:10px;}
.notice a:hover { text-decoration:underline;}


/* ---------- RWD ---------- */

@media screen and (max-width: 1400px) {
	header { max-width:900px;}
	img { height: auto !important; max-width: 100% !important;}
	.inner { max-width:1000px;}
    .idx-box { text-align:center; padding-top:120px;}
	
	/* nav */
	.nav { position:fixed; right:20px; top:30%; width:180px; height:261px; padding-top:50px; background:url(../images/nav-bg.png) no-repeat center; background-size:180px 311px;}
	.nav a{ display:inline-block; border-radius:30px; color:#231f20; font-size:18px; padding:10px 12px}
	
	.book-list {}
	.book-list .box { width:160px; margin:0 8px; height:300px;}
	.book-list .box h3 {font-size:17px; line-height:22px;}
	.book-list .box p { font-size:15px;}
	.cover img { width:160px !important; height:207px !important;}
	
}

@media screen and (max-width: 1024px) {
    
	#btn-menu { display:block; position:fixed; right:20px; top:90px; background:url(../images/icon-menu.png) no-repeat center #231f20; border-radius:50%; background-size:30px 30px; width:55px; height:55px; z-index:2;}
	#btn-menu.active{ background:url(../images/icon-xx.png) no-repeat center #231f20; background-size:30px 30px;}
	/* nav */
	.nav { display:none; right:50%; margin-right:-140px; top:15%; width:280px; height:360px; padding-top:100px; background:url(../images/nav-bg-m.png) no-repeat center; text-align:center; z-index:1;}
	.nav a{ font-size:22px; padding:10px 12px; font-weight:bolder;}

	/* 內頁 */
	.container { width:90%; left:5%;}
	
	.book-list {}
	.book-list .box { width:160px; margin:0 8px; height:300px;}
	.book-list .box h3 {font-size:17px; line-height:22px;}
	.book-list .box p { font-size:15px;}
	.cover img { width:140px !important; height:181px !important;}

    /*注意事項*/
    .notice { padding:15px;}
    .notice h3 { font-size:25px;}

	/* 試讀套餐 */
	.tabUI .tabs.forset { width:100%; max-width:900px;}
	.tab-container.forset { width:100%; max-width:1000px; margin:0 auto;}
	
	/* 小編來送禮 */
	.gift-box { width:95%; background:#fff;}
	.gift-box .act { left:-10px; width:50px; height:50px; line-height:50px;}
	.gift-box .title {}
	.gift-box .imgs { right:20px; bottom:-20px;}
	.gift-box .imgs img{ width:100px; height:119px; }

}

@media screen and (max-width: 768px) {
	.big-title { width:100%;}
	.wrapper-idx { background:url(../images/bg-idx-768.png) no-repeat center fixed; background-size: 100% 100%;}
	.wrapper { background:url(../images/bg-idx-768.png) no-repeat center fixed rgba(255,255,255,.1); background-size: 100% 100%;}
	
	/* 試讀指南 */
	.guide-ti { text-align:center; font-size:35px; line-height:45px; margin:0 0 30px 0; padding-top:60px;}
	.guide-ti img { width:150px; height:131px;}
	.guide { width:100%; height:auto; margin:0 auto; padding-top:0; border:0; position:static; border-radius:0; text-align:center; padding-top:20px;}
	.guide .box{ border:5px solid #231f20; border-radius:20px; position:relative; width:100%; background:#fff;}
	.guide .g1 { position:static; display:inline-block; width:40%; vertical-align:top; margin:0 10px 50px 10px;}
	.guide .g2 { position:static; display:inline-block; width:40%; vertical-align:top; margin:0 10px 50px 10px;}
	.guide .g3 { position:static; display:inline-block; width:40%; vertical-align:top; margin:0 10px 50px 10px;}
	.guide .g4 { position:static; display:inline-block; width:40%; vertical-align:top; margin:0 10px 50px 10px;}
	.guide .g5 { position:static; display:inline-block; width:40%; vertical-align:top; margin:0 10px 50px 10px;}
	.guide .title { border-radius:40px; font-size:25px; padding:15px 0; width:140px; position:absolute; left:50%; top:-30px; margin-left:-70px; text-align:center;}
	.guide .tags { padding:40px 15px 30px 15px; text-align:left;}
	.guide .tags span { font-size:18px; line-height:28px; width:48%;}
	
	/* 男女主文 */
	.title-man { width:100%; padding-top:80px; background:none;}
	.title-man p { font-size:18px; margin-bottom:30px;}
	.title-girl { width:100%; padding-top:80px; background:none;}
	.title-girl p { font-size:18px; margin-bottom:30px;}
	
	/* 獨家優惠 */
	.tabUI .tabs.forsp li { width:30%; margin:5px 1%;}
	.tabUI .tabs.forsp li a{ border-radius:30px; font-size:16px; line-height:24px;}
	
}

@media screen and (max-width: 640px) {
	
	.nav { top:10%;}
	#btn-menu { top:30px; background:url(../images/icon-menu.png) no-repeat center #231f20; background-size:25px 25px; width:50px; height:50px; z-index:2;}
	#btn-menu.active{ background:url(../images/icon-xx.png) no-repeat center #231f20; background-size:25px 25px;}
	
	/* header */
	.logo { display:block; position:absolute; left:0; top:10px;}
	.logo img { width:100px; height:21px;}
	.social { right:inherit; left:120px; text-align:right;}
	.social img{ width:16px; height:16px;}
	
	 /* 首頁 */
	.wrapper-idx { background:url(../images/bg-idx-m.png) no-repeat center fixed; background-size: 100% 100%;}
	.wrapper-idx .img-b { width:100%; height:28%; position:absolute; left:0; bottom:0; text-align:center; background:url(../images/big-title-m.png) no-repeat center; background-size:contain}
	.wrapper-idx .img-b img { display:none;}
	.idx-box { padding-top:80px; width:80%; margin:0 auto;}
	.idx-box h3 { font-size:18px; line-height:28px;}
	.idx-box p { font-size:16px; line-height:20px;}
	
	.wrapper { background:url(../images/bg-idx-m.png) no-repeat center fixed rgba(255,255,255,.1); background-size: 100% 100%;}
	.container { height:calc( 100% - 20px); top:10px; }
	
	.book-list .box { width:140px; margin:0 4px; height:290px;}
	
	/* 試讀指南 */
	.part2-title { display:none;}
	.part2-title-m { display:block; padding-top:80px;}
	.part2-stitle { font-size:25px; line-height:30px;}
	.gender { text-align:center;}
	.gender a{ display:inline-block; margin:0;}
	.gender img { width:150px; height:131px;}
	.gender img:hover { width:150px; height:131px;}
	.guide .box{ border:3px solid #231f20;}
	.guide .title { border:3px solid #231f20;}
	.guide .g1 { width:90%; margin:0 0 50px 0;}
	.guide .g2 { width:90%; margin:0 0 50px 0;}
	.guide .g3 { width:90%; margin:0 0 50px 0;}
	.guide .g4 { width:90%; margin:0 0 50px 0;}
	.guide .g5 { width:90%; margin:0 0 50px 0;}
	.guide .title { border-radius:30px; font-size:20px; padding:15px 0; width:120px; left:50%; top:-30px; margin-left:-60px;}
	
	/* 試讀套餐 */
	.tabUI .tabs li { width:48%;}
	.tabUI .tabs li a { font-size:16px; padding:10px 15px;}
	
	/* 限時贈 */
	.gifts { margin:30px auto 0 auto;}
	.book-list-msg { overflow:hidden; width:320px; margin:0 auto;}
    .book-list-msg .box { width:140px; margin:10px 0 30px 0; padding:0 8px; text-align:center; height:240px;}
    .book-list-msg .box .date { color:#3b9fb7; border:1px solid #3b9fb7; font-size:20px; padding:10px 20px; text-align:center; margin-bottom:10px;}
    .book-list-msg .box .cover{ display:block; width:100%; text-align:  center; margin-bottom: 10px;}
    .book-list-msg .box .txt{ display:block; width:100%; margin-left:0; height: 100px;}
    .book-list-msg .box h3 { font-size:18px;}
    .book-list-msg .box p {font-size:15px;}
	.book-list-msg.forgift .box { height:350px;}
	
	/* 小編來送禮 */
	.part3-title { display:none;}
	.part3-title-m { display:block; padding-top:80px; text-align:center;}
	.part3-stitle { font-size:20px; line-height:30px;}
	.gift-box .title { font-size:20px; line-height:30px;}
	.gift-box .inn { font-size:17px; line-height:27px; padding:15px;}
	.go-btn { font-size:16px; padding:5px 30px;}
	.gift-box .imgs { display:none;}
	.awards div { display:inline-block; margin:0 5px 20px 5px; width:130px; vertical-align:top;}
	.awards img { width:130px; height:130px;}
	.awards h4 { font-size:16px; line-height:25px;}
	.awards p { font-size:15px; line-height:16px;}
	
	/*注意事項*/
	.bd-title { font-size:25px; line-height:30px; margin:20px auto; width:100px; padding:5px 20px; border-radius:30px;}
	.notice h3 { font-size:20px; line-height:30px; margin-bottom:20px;}
	.notice ol li { list-style:decimal; font-size:16px; line-height:26px; margin-bottom:15px;}

}

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

@media screen and (max-width: 330px) {	
	.idx-box { padding-top:50px;}
	.guide .tags span { width:100%;}
	
	/* 試讀套餐 */
	.tabUI .tabs li a { font-size:15px; padding:10px;}
	.tabUI .tabs li a span { display:block;}
}