@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

/* reset */
html,body{ padding:0; margin:0; height:100%; font-family:'思源黑體 TW','思源黑體 TWHK','Noto Sans TC','微軟正黑體', sans-serif;}
ul,li{ margin:0; padding:0;}
a{ outline:none;}
img{ border:0;}

/*--------------------head*/
#qi_bar { width:100%; height:60px; font-size:13px; margin:0 auto; line-height:16px; position:absolute; z-index:99;}
.ohter #qi_bar { width:115%; top:-75px; left:-35px;}
#qi_bar .logo  { float:left; padding:10px;}
#qi_bar .logo a { display:block; background:url(images/logoB.png) no-repeat; width:208px; height:44px; text-decoration:none;}
@media screen and (max-width: 420px) {
	#qi_bar .logo a { background:url(images/logoB_s.png) no-repeat; width:156px; height:33px; text-decoration:none;}
	#option{ display:none;}
}
.ohter #qi_bar .logo a { display:block; background:url(images/logoB.png) no-repeat;}
#option { list-style:none; width:265px; float:right; margin-top:20px; margin-right:10px; height:16px; line-height:16px;}
#option li { float:left;}
#option li a { display:block; margin-left:8px; padding-top:5px; color:#000; text-shadow:0 0 0 5px #333;text-decoration:none;}
.ohter #option li a { color:#000;}
#option li a:hover { color:#f00eff;}
#option li a.share { background:url(images/icon-Share.gif) no-repeat; width:16px; height:13px; text-indent:-99999em; }
#option li a.share.f { background-position:0 0; }
#option li a.share.p { background-position:0 -20px; }
#option li a.share.t { background-position:0 -40px; }
#gotop {
	background-color:rgba(0,0,0,0.5);
	display:block;
    border: 1px solid;
	color:#e7ae5e;
    border-radius: 50px;
    bottom: 20px;
    height: 55px;
    position: fixed;
    right: 20px;
    width: 55px;
    z-index: 99999;
	text-decoration:none;
	line-height:50px;
	text-align:center;	
	font-weight:bold;
}

.CONTAINER{ min-height:100%; position:relative;}
.mobile{ display:none;}
.desk{}
header{ width:100%; max-width:1000px;margin:0 auto; text-align:center; position:relative; font-weight:normal;}
header p{ color:#ffe729; font-size:20px; margin:10px auto 10px auto; word-break:keep-all;}
header b{ font-weight:normal;  border-bottom:1px solid;}
.CONTAINER{background:url(images/BG_ballon.png) no-repeat ;background-size:contain; background-position:center -100px;}
.PAGE2 .CONTAINER{background:url(images/BG_ballon2.png) no-repeat ;background-size:contain; background-position:center -100px;}
.PAGE3 .CONTAINER{background:url(images/BG_ballon3.png) no-repeat ;background-size:contain; background-position:center -100px;}
.PAGE4 .CONTAINER{ min-height:inherit; background-size:cover;}



.INDEX{ background:url(images/BG_index.png) fixed center center/cover;}
.INDEX header{ padding:185px 0 150px 0;}
.INDEX header p{ font-size:32px;}
NAV{ position:absolute; bottom:0; width:100%; text-align:center;}
NAV a{ display:inline-block; vertical-align:top; width:24%; max-width:248px; height:120px; color:#e7ae5e; border-left:5px solid; position:relative; font-size:24px; text-decoration:none; text-align:left; box-sizing:border-box; padding-left:20px;}
NAV span{ display:inline-block; vertical-align:middle; color:#e7ae5e;}
NAV b{ font-size:30px; line-height:1;}
NAV a:before{content:''; width:0; height:100%; display:inline-block;position:relative; vertical-align:middle;}/*為了讓按鈕區塊內的文字垂直置中*/
.star1{ background:url(images/STAR_index1.png) no-repeat; width:71px; height:68px; position:absolute; top:227px; left:217px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}
.star2{ background:url(images/STAR_index2.png) no-repeat; width:81px; height:86px; position:absolute; top:305px; left:275px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.star3{ background:url(images/STAR_index3.png) no-repeat; width:97px; height:100px; position:absolute; top:365px; left:180px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}
.star4{ background:url(images/STAR_index4.png) no-repeat; width:78px; height:73px; position:absolute; top:470px; left:225px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.star5{ background:url(images/STAR_index5.png) no-repeat; width:74px; height:69px; position:absolute; top:285px; left:634px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.star6{ background:url(images/STAR_index6.png) no-repeat; width:82px; height:72px; position:absolute; top:287px; left:743px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}
.star7{ background:url(images/STAR_index7.png) no-repeat; width:95px; height:99px; position:absolute; top:360px; left:695px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.star8{ background:url(images/STAR_index8.png) no-repeat; width:74px; height:74px; position:absolute; top:460px; left:734px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}


header h1{ font-size:24px; font-weight:800; color:#1d1057;text-shadow:0px 0px 10px #fff; text-align:center; margin:0 0 -15px 0;}
.content{ padding:50px 0; position:relative; z-index:10;}
h3{ text-align:center; font-size:26px; line-height:1.1; margin:20px 0 10px 0; text-shadow:0px 0px 15px #fff;}
h3 span{ display:block; width:100%; font-size:35px; font-weight:800;}
.box{ width:95%; max-width:950px;margin:0 auto; box-sizing:border-box; border:2px solid; background-color:rgba(255,255,255,0.7);}
.example{ display:block; width:95%; max-width:950px; margin:0 auto;}
h2{ color:#fff; font-size:35px; text-align:center;text-shadow:0px 0px 15px #000;}
h2 b{ color:#fff71e; font-size:45px;}
.box{ border-color:#cecfe1; font-size:14px;}
.box ol{ padding-right:15px;}
.box li{ margin-bottom:10px;}
.box strong{ color:#7d03ca;}
.box a{ text-decoration:none; color:#1452c3; font-size:15px;}
.box b{ border-bottom:1px solid;}
.zone{ max-width:1300px; width:95%; margin:0 auto; text-align:center; margin-bottom:30px;}
.book{ display:inline-block; max-width:220px; min-width:195px; vertical-align:top; width:19%; margin:15px; text-decoration:none; text-align:center; color:#fff;}
.book img{ display:block; border:5px solid #fff; width:100%;}
.book span{ display:block;}
.name{ font-size:24px; }
.author{ font-size:16px;}
.gogo{ display:inline-block; color:#eab419; border:3px solid; padding:10px 100px; margin:10px 0; font-size:22px; text-decoration:none; font-weight:bold;  -webkit-animation: flipY 2s infinite; animation: flipY 2s infinite;}
  .PAGE1 .gogo{background-color: rgba(0, 0, 0, 0.5);}
  .PAGE2 .gogo{background-color: rgba(101, 3, 48, 0.5); color:#fff701;}
  #tab_M .gogo{background-color: rgba(0, 0, 0, 0.5);}
  #tab_F .gogo{background-color:rgba(64, 0, 29, 0.5); color:#fff701;}
.ui-tabs-nav{ text-align:center;}
.ui-tabs-nav li{ display:inline-block;}
.ui-tabs-nav li+li:before{ content:'/'; margin:0 10px; color:#fff; line-height:24px;}
.ui-tabs-nav a{ display:inline-block; font-size:22px; color:#fff; text-decoration:none;}
.ui-tabs-active a{ color:#fff71e; font-size:24px; font-weight:bold;}
.tabs ul{ margin:-20px 0 20px 0;}
#tab_M{background-color:rgba(18, 6, 82, 0.5); padding:20px 0;}
#tab_F{background-color:rgba(142, 24, 18, 0.5); padding:20px 0;}

.PAGE1{background:url(images/BG_index.png) fixed center center/cover;}
.PAGE1 header{ padding:220px 0 150px 0;}
.PAGE1 h3{ color:#1d1057;}
.PAGE2{background:url(images/BG_page2.png) fixed center center/cover;}
.PAGE2 header{ padding:220px 0 150px 0;}
.PAGE2 header h1{color:#560000;}
.PAGE2 h3{ color:#460000;}
.PAGE3{background:url(images/BG_page3.png) fixed center center/cover;}
.PAGE3 header{ padding:220px 0 150px 0;}
.PAGE3 h3{ color:#1d1057;}
.PAGE4{background:url(images/BG_index.png) fixed center center/cover;}
.PAGE4 header{ padding:185px 0 150px 0;}

.m_PAGE1{ display:none;}
.m_PAGE2{ display:none;}
.m_PAGE3{ display:none;}

dl{ padding:0 24px;}
dt{ float:left; font-weight:bold;}
dd{ padding-left:20px;}
dd span{ display:block;}

.B_page1-1{ background:url(images/BLING_page1-1.png) no-repeat; width:73px; height:82px; position:absolute; top:464px; left:253px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}
.B_page1-2{ background:url(images/BLING_page1-2.png) no-repeat; width:59px; height:67px; position:absolute; top:519px; left:128px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.B_page1-3{ background:url(images/BLING_page1-3.png) no-repeat; width:73px; height:82px; position:absolute; top:581px; left:146px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}
.B_page1-4{ background:url(images/BLING_page1-4.png) no-repeat; width:65px; height:68px; position:absolute; top:476px; left:632px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.B_page1-5{ background:url(images/BLING_page1-5.png) no-repeat; width:71px; height:78px; position:absolute; top:544px; left:796px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.B_page1-6{ background:url(images/BLING_page1-6.png) no-repeat; width:67px; height:54px; position:absolute; top:615px; left:771px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}

.B_page2-1{ background:url(images/BLING_page2-1.png) no-repeat; width:123px; height:124px; position:absolute; top:428px; left:253px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}
.B_page2-2{ background:url(images/BLING_page2-2.png) no-repeat; width:89px; height:74px; position:absolute; top:486px; left:271px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.B_page2-3{ background:url(images/BLING_page2-3.png) no-repeat; width:103px; height:83px; position:absolute; top:592px; left:120px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}
.B_page2-4{ background:url(images/BLING_page2-4.png) no-repeat; width:85px; height:86px; position:absolute; top:476px; left:610px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.B_page2-5{ background:url(images/BLING_page2-5.png) no-repeat; width:136px; height:96px; position:absolute; top:466px; left:629px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.B_page2-6{ background:url(images/BLING_page2-6.png) no-repeat; width:88px; height:80px; position:absolute; top:609px; left:772px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}

.B_page3-1{ background:url(images/BLING_page3-1.png) no-repeat; width:71px; height:68px;  position:absolute; top:464px; left:253px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}
.B_page3-2{ background:url(images/BLING_page3-2.png) no-repeat; width:81px; height:86px; position:absolute; top:519px; left:128px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.B_page3-3{ background:url(images/BLING_page3-3.png) no-repeat; width:97px; height:100px; position:absolute; top:581px; left:146px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}
.B_page3-4{ background:url(images/BLING_page3-4.png) no-repeat; width:78px; height:73px; position:absolute; top:476px; left:632px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.B_page3-5{ background:url(images/BLING_page3-5.png) no-repeat; width:74px; height:69px; position:absolute; top:544px; left:796px; -webkit-animation: sparkle 2s infinite; animation: sparkle 2s infinite;}
.B_page3-6{ background:url(images/BLING_page3-6.png) no-repeat;  width:82px; height:72px; position:absolute; top:615px; left:771px; -webkit-animation: sparkle2 2s infinite; animation: sparkle2 2s infinite;}

@media screen and ( max-width: 1450px) {
	.box{ max-width:800px;}
	.example{max-width:800px;}
	}

@media screen and (max-height: 800px) {
	.INDEX header{ padding:115px 0 150px 0;}
	.INDEX header img{ height:350px;}
	.INDEX header p{ margin:5px 0; font-size:22px; margin:10px 0 10px 0;}
	.star1{top:195px; left:285px;}
	.star2{top:250px; left:325px;}
	.star3{top:310px; left:250px;}
	.star4{top:380px; left:295px; display:none;}
	.star5{top:265px; left:595px;}
	.star6{top:240px; left:660px;}
	.star7{top:310px; left:635px;}
	.star8{top:370px; left:685px; display:none;}
	
	.B_page1-1{top:325px; left:295px;}
	.B_page1-2{top:376px; left:174px;}
	.B_page1-3{top:440px; left:190px;}
	.B_page1-4{top:347px; left:605px;}
	.B_page1-5{top:393px; left:756px;}
	.B_page1-6{top:475px; left:729px;}
	
	.B_page2-1{top:308px; left:253px; }
	.B_page2-2{top:366px; left:271px; }
	.B_page2-3{top:472px; left:120px; }
	.B_page2-4{top:356px; left:610px; }
	.B_page2-5{top:346px; left:629px; }
	.B_page2-6{top:489px; left:772px; }
	
	.B_page3-1{top:325px; left:295px;}
	.B_page3-2{top:376px; left:174px;}
	.B_page3-3{top:440px; left:190px;}
	.B_page3-4{top:347px; left:605px;}
	.B_page3-5{top:393px; left:756px;}
	.B_page3-6{top:475px; left:729px;}
		
	.PAGE1 header{ padding:140px 0 150px 0;}
	.PAGE1 header img{ height:450px;}
	.PAGE2 header{ padding:140px 0 150px 0;}
	.PAGE2 header img{ height:450px;}
	.PAGE3 header{ padding:140px 0 150px 0;}
	.PAGE3 header img{ height:450px;}
	
	}
@media screen and ( max-width: 768px) {
	.CONTAINER{ background-position:center top;}
	.PAGE2 .CONTAINER{background-position:center top;}
	.PAGE3 .CONTAINER{background-position:center top;}
	.PAGE4 .CONTAINER{ background-size:contain;}
	header h1{ font-size:18px; margin-bottom:-10px;}
	
	.INDEX header{ padding:80px 0 150px 0;}
	.mobile{ display:block;}
	.desk{ display:none;}
	header p{ font-size:14px; width:80%!important; margin:0 auto!important;}
	.INDEX header img{ width:95%; height:auto; margin:0 auto;}
	.INDEX header p{ font-size:26px; margin:15px 0;}
	
	NAV a{ max-width:200px;}
	.PAGE1 header img{ width:100%; height:auto;}
	.PAGE2 header img{ width:100%; height:auto;}
	.PAGE3 header img{ width:100%; height:auto;}
	.PAGE4 header img{ width:100%; height:auto;}
}
@media screen and ( max-width: 420px) {
	
	.m_PAGE1{ display:block; min-height:100%; width:100%; overflow:hidden; top:0; left:0; position:fixed;background:url(images/BG_index.png) no-repeat center center/cover;}
	.m_PAGE2{ display:block; min-height:100%; width:100%; overflow:hidden; top:0; left:0; position:fixed;background:url(images/BG_page2.png) no-repeat center center/cover;}
	.m_PAGE3{ display:block; min-height:100%; width:100%; overflow:hidden; top:0; left:0; position:fixed;background:url(images/BG_page3.png) no-repeat center center/cover;}

	.break{ display:block;}
	.INDEX header{ padding:90px 0 100px 0;}
	.INDEX header p{ font-size:16px; word-break:normal;}
	NAV a{font-size:16px; padding-left:5px; height:80px; border-left:3px solid;}
	NAV b{ font-size:18px;}
	
	.PAGE1 header{ padding:100px 0 100px 0;}
	.PAGE2 header{ padding:100px 0 100px 0;}
	.PAGE3 header{ padding:100px 0 100px 0;}
}