@charset "utf-8";
/*reset*/
ul,li{ list-style:none; margin:0; padding:0;}
a{outline:none;}
h2{ margin:0;}

html,body{ height:100%; padding:0; margin:0;}
body{ background-color:#87D1F3;}

section{ min-height:100%;}

/**/
.NAV{ display:none; background-color:rgba(0,0,0,0.8); position:fixed; top:0; left:0; width:100%; min-height:100%;font-family:'微軟正黑體',Verdana, Geneva, sans-serif; color:#fff; box-sizing:border-box; padding-top:5%;}
.NAV.show{ display:block; opacity:1; z-index:98;}
.NAV a{ color:inherit; text-decoration:none;}
/*按鈕、連結們*/
ul#option {font-size:12px; line-height:50px; height:50px; display:block; width:100%; text-align:center;}
ul#option img{ vertical-align:middle;}
ul#option li { display:inline-block;font-size:14px; vertical-align:middle; }
ul#option li+li{margin-left:5px; }
ul#option li a { color:#fff; text-decoration:none; }
ul#option li a:hover { color:#e65145;}

.MENU{display:block; width:50px; height:50px; position:fixed; right:15px; top:15px; z-index:99; box-sizing:border-box; padding:22px 7px;}
.MENU.active{background-color:rgba(0,0,0,0);}
	.shape-MENU{ display:block; width:35px; height:5px;  background-color:rgba(255,255,255,1.0); position:relative; box-shadow:0 0 5px rgba(0,0,0,0.4);}
	.shape-MENU:before,.shape-MENU:after{ content:''; display:block; width:35px; height:5px; background-color:#FFF; position:absolute; transition:all 0.2s; box-shadow:0 0 5px rgba(0,0,0,0.4);}
	.shape-MENU:before{margin-top:-12px; transition:all 0.2s;}
	.shape-MENU:after{margin-top:12px;}
.MENU:hover .shape-MENU:before{margin-top:-15px; transition:all 0.2s;}
.MENU:hover .shape-MENU:after{margin-top:15px; transition:all 0.2s;}
.MENU.active .shape-MENU{ background-color:rgba(255,255,255,0);}
.MENU.active .shape-MENU:before{ transform:rotate(45deg); transition:all 0.2s; margin:0; box-shadow:none;}
.MENU.active .shape-MENU:after{transform:rotate(-45deg); transition:all 0.2s; margin:0; box-shadow:none;}
/*NAV*/
.NAV-ZONE{ width:90%; max-width:800px; margin:0 auto; color:#fff; font-size:3em;}
.block-NAV{ display:block; border:1px solid #fff; width:100%; height:110px; margin-bottom:10px; box-sizing:border-box; text-align:center;}
.NAV-ZONE a:hover{ color:#999;}
.N-f30{ display:block; font-size:0.5em;}
.NAV01{ line-height:100px;}
.NAV02{}
.NAV03{ line-height:100px;}
.NAV04{ line-height:100px;}

/*贊助*/
.sponcer-block{ padding:20px 0 10px 0; width:100%; text-align:center; background-color:rgba(203, 238, 241, 0.5); text-align:center; font-size:13px; color:#fff;font-family:'微軟正黑體',Verdana, Geneva, sans-serif;}
.sponcer-block a{ display:inline-block; vertical-align:middle;}
.sponcer-block img{ vertical-align:middle; margin:5px; width:120px;}
.sponcer-block img.popologo{ width:99px;}

/*首頁*/
.index{ background:url(images/bg.png) no-repeat center top/cover;}
h1{ margin:0; padding:0; position:relative;}
.title{ background:url(images/title.png) no-repeat center top/cover; position:relative; width:24%; max-width:452px; min-width:200px; margin:0 auto; top:20px;}
.title:before{ content:''; display:block; position:relative; padding-top:110%;}
[class^=sparkling]{ position:absolute;}
[class^=sparkling]:before{ content:''; display:block; position:relative;}

.sparkling1{ background:url(images/sparkling1.png) no-repeat center center/cover; width:44.24%; max-width:200px; top:-5%; left:73%;}
.sparkling2{ background:url(images/sparkling2.png) no-repeat center center/cover; width:39.82%; max-width:180px; top:31%; left:-15%;}
.sparkling3{ background:url(images/sparkling3.png) no-repeat center center/cover; width:22.12%; max-width:100px; top:75.5%; left:54.3%;}
.sparkling1:before{ padding-top:100%;}
.sparkling2:before{ padding-top:100%;}
.sparkling3:before{ padding-top:100%;}

.title-describ{background:url(images/index-describ.png) no-repeat center center/cover; width:50%; max-width:1000px; min-width:320px; margin:50px auto 0 auto;}
.title-describ:before{content:''; display:block;padding-top:15.469%;}

/*成果牆*/
.page-wall{ background: url(images/bg-sky.png) no-repeat center top/cover; position:relative; padding-top:8%;}
.title-wall{ background: url(images/title1.png) no-repeat center top/cover; width:60%; max-width:1000px; min-width:320px; margin:0 auto;}
.title-wall:before{ content:''; display:block; padding-top:35.85%;}
.datcloud{ background: url(images/cloud.png) no-repeat center top/cover; position:absolute; width:100%; top:-133px;}
.datcloud:before{ content:''; display:block; padding-top:18.6979%;}

.unslider{ width:100%; max-width:1000px; margin:0 auto;}
.banner{ position:relative;}
.banner:before{content:''; display:block; padding-top:65.69%; position: absolute;}
.banner ul{ text-align:center;}
.banner li{ background:url(images/bg-wall.png) no-repeat center top/cover; max-width:1000px; display:inline-block; cursor:move; text-align:center; position:relative;}
.banner li:before{ content:''; display:block; padding-top:65.69%;}
.banner li img{ width:100%; display:block; position:absolute; top:0; left:0;}

/*活動辦法*/
.page-rule{background: linear-gradient(#87D1F3,#B0DEF7); font-family:'微軟正黑體',Verdana, Geneva, sans-serif; line-height:1.5; color:#00033e; padding-bottom:50px;}
.title-rule{ background: url(images/title2.png) no-repeat center top/cover; width:60%; max-width:1000px; min-width:320px; margin:0 auto;}
.title-rule:before{ content:''; display:block; padding-top:16.966%;}
.rule-container{background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.1)); width:95%; margin:0 auto; padding:20px 50px; box-sizing: border-box; border-radius:10px;border:1px solid #fff;}

.rulerule li{ margin-bottom:15px;}
.rulerule ul{ margin-left:35px;}
.rulerule ul>li{ list-style:square;}
ol li{ list-style:decimal;}
.rule-title{font-weight:bold;}
fieldset{ border:1px solid #000; color:#000;}
legend{ font-weight:bold;}
.notes{ font-size:0.9em;}
.notes h4{ margin:20px 0 10px 0;}
.pp{background-color:#000; color:#fff;}

.gogozone{ text-align:center; margin-top:10px;}
.btn-go{ display:inline-block; height:80px; line-height:80px; font-size:1.5em; font-family:'微軟正黑體',Verdana, Geneva, sans-serif; font-weight:bold; padding:0 30px; border-radius:10px; text-decoration:none; margin:10px; }
.go-F{ box-shadow:0px 0px 20px rgba(77,158,251,1) inset; color:#146fd6;}
.go-L{ box-shadow:0px 0px 20px rgba(255,159,208,1) inset; color:#eb3f97;}
.btn-go:hover{box-shadow:0px 0px 20px rgba(255,240,0,1) inset; color:#fff000;}


/*地圖*/
.page-map{ background: url(images/bg-map.png) no-repeat center bottom/cover; position:relative;}
.title-map{ background: url(images/title3.png) no-repeat center top/cover; width:60%; max-width:1000px; min-width:320px; margin:0 auto;}
.title-map:before{ content:''; display:block; padding-top:17.365%;}
.map{ background:url(images/map.png) no-repeat center top/cover; width:100%; position:absolute;top:32%;}
.map:before{ content:''; display:block; padding-top:24.739%;}

.box-percent{ position:absolute; bottom:8%; width:100%; box-sizing:border-box; padding:0 10%;}
.box{ display:inline-block; width:33%; font-size:1em; font-family:'微軟正黑體',Verdana, Geneva, sans-serif; color:#fff; text-align:center; font-weight:bold;}
.percent{ font-size:3em; margin-left:20px;}
.percent sub{ font-size:0.33em; vertical-align: baseline;}

.dot-love{ width:8px; height:8px; border-radius:5px; background-color:#FC2BA3; position:absolute; cursor:pointer;}
.dot-fantasy{ width:8px; height:8px; border-radius:5px; background-color:#6D0FF4; position:absolute; cursor:pointer;}

.author{ display:none; width:75px; height:100px; position:absolute; top:-200px; left:-35px; text-decoration:none;}
.author:before{content:''; display:block; height:125px; width:2px; position:absolute; bottom:-100px; left:50%; margin-left:-1px;}
.author:after{ content:''; display:block; width:100%; height:125px;}
.dot-love .author:before{background-color:#FC2BA3; }
.dot-fantasy .author:before{background-color:#6D0FF4; }
.author-img{ display:block; width:100%; max-width:100px;  border-radius:50px; overflow:hidden;}
.author-img img{ width:100%; display:block;}
.author-name{display:block; font-size:0.75em; width:100%; position:absolute; top:-1.2em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#000;}
.dot-love:hover,.dot-fantasy:hover{ z-index:99;}
.dot-love:hover .author{ display:block;}
.dot-fantasy:hover .author{ display:block;}

.position1{ top:35%; left:9%;}
.position2{ top:36%; left:12.5%;}
.position3{ top:28%; left:16%;}
.position4{ top:61%; left:21%;}
.position5{ top:54%; left:25%;}
.position6{ top:34%; left:22.5%;}
.position7{ top:34%; left:33%;}
.position8{ top:35%; left:28%;}
.position9{ top:48%; left:18%;}
.position10{ top:18%; left:39%;}
.position11{ top:20%; left:35%;}
.position12{ top:36.2%; left:19.8%;}
.position13{ top:38.2%; left:14.3%;}
.position14{ top:28.9%; left:18.2%;}
.position15{ top:62.5%; left:18.8%;}
.position16{ top:56.8%; left:23.7%;}
.position17{ top:36.2%; left:22.8%;}
.position18{ top:44.8%; left:26.1%;}
.position19{ top:45.1%; left:28.6%;}
.position20{ top:42.8%; left:18.8%;}
.position21{ top:21.8%; left:37.2%;}
.position22{ top:36%; left:10.5%;}
.position23{ top:38%; left:15%;}
.position24{ top:30%; left:18%;}
.position25{ top:48%; left:22.5%;}
.position26{ top:50%; left:26%;}
.position27{ top:36%; left:24%;}
.position28{ top:38%; left:32.2%;}
.position29{ top:43.2%; left:12.8%;}
.position30{ top:45.2%; left:15.3%;}
.position31{ top:33.1%; left:18.2%;}
.position32{ top:53.1%; left:21.7%;}
.position33{ top:53.1%; left:26.7%;}
.position34{ top:38.2%; left:24.8%;}
.position35{ top:34.2%; left:32.1%;}
.position36{ top:38.1%; left:28.2%;}
.position37{ top:62.1%; left:20.1%;}
.position38{ top:29.2%; left:32.2%;}
.position39{ top:40%; left:28%;}
.position40{ top:42%; left:22%;}
.position41{ top:19%; left:32%;}
.position42{ top:17%; left:38%;}
.position43{ top:35%; left:21%;}
.position44{ top:61.1%; left:37.8%;}
.position45{ top:30%; left:41%;}
.position46{ top:29%; left:42%;}
.position47{ top:61.2%; left:42.1%;}
.position48{ top: 13%; left: 54%;}
.position49{ top:33%; left:46.5%;}
.position50{ top: 25.8%; left: 37.2%;}
.position51{ top:33.8%; left:45.7%;}

.position51{ top: 19.1%; left: 59.1%;}
.position52{ top:30.2%; left:50.2%;}
.position53{ top:32.8%; left:53.2%;}
.position54{ top:39.3%; left:49.3%;}
.position55{top:27.4%; left:54.4%;}
.position56{ top:37.5%; left:56.5%;}
.position57{ top:21.2%; left:57.8%;}
.position58{top:13.6%; left:60.6%;}
.position59{ top:18.7%; left:55.5%;}
.position60{ top:21.8%; left:53.7%;}
.position61{ top:47.9%; left:50.8%;}
.position62{ top:44.1%; left:49.9%;}
.position63{top:32.2%; left:54.1%;}
.position64{ top:42.3%; left:55.2%;}
.position65{ top:15.3%; left:57.8%;}
.position66{ top: 25.2%; left: 56.3%;}
.position67{ top:36.8%; left:51.6%;}
.position68{ top:32.8%; left:51.3%;}
.position69{ top:37.2%; left:49.8%;}
.position70{top:21.4%; left:54.9%;}
.position71{ top:32.2%; left:56.1%;}
.position72{ top:13.4%; left:57.3%;}
.position73{ top:31.5%; left:50.4%;}
.position74{ top:40.6%; left:49.5%;}
.position75{top:28.7%; left:54.6%;}
.position76{ top:29.8%; left:57.7%;}
.position77{ top:21.9%; left:58.8%;}
.position78{top:14.1%; left:60.9%;}
.position79{ top:19.2%; left:56.5%;}
.position80{ top:22.3%; left:56.1%;}
.position81{ top:48.4%; left:53.2%;}
.position82{ top:45.5%; left:52.3%;}
.position83{top:33.6%; left:57.4%;}
.position84{ top:43.7%; left:55.5%;}
.position85{ top:16.3%; left:60.8%;}
.position86{ top:15.2%; left:56.3%;}
.position87{ top:37.8%; left:51.6%;}
.position88{ top:33.8%; left:52.1%;}
.position89{ top:38.2%; left:49.8%;}
.position90{top:22.4%; left:54.9%;}
.position91{ top:33.2%; left:56.1%;}
.position92{ top:13.8%; left:57.6%;}
.position93{ top:31.9%; left:50.7%;}
.position94{ top:38.1%; left:49.8%;}
.position95{top:28.2%; left:54.9%;}
.position96{ top:38.3%; left:56.1%;}
.position97{ top:18.4%; left:60.2%;}
.position98{top:14.5%; left:60.3%;}
.position99{ top:19.6%; left:57.5%;}
.position100{ top:22.7%; left:53.4%;}
.position101{ top:48.8%; left:52.5%;}
.position102{ top:45.9%; left:49.6%;}
.position103{top:33.1%; left:54.7%;}
.position104{ top:40.2%; left:55.8%;}
.position105{ top:16.3%; left:59.8%;}
.position106{ top: 24.2%;left: 60.3%;}
.position107{ top:37.8%; left:51.6%;}
.position108{ top:33.8%; left:54.6%;}
.position109{ top:38.2%; left:49.8%;}
.position110{top:22.4%; left:54.9%;}
.position111{ top:33.2%; left:56.1%;}
.position112{ top:13.3%; left:57.9%;}
.position113{ top:31.4%; left:50.1%;}
.position114{ top:40.5%; left:49.2%;}
.position115{top:28.6%; left:54.3%;}
.position116{ top:38.7%; left:56.4%;}
.position117{ top:27.2%; left:58.5%;}
.position118{top:14.8%; left:60.5%;}
.position119{ top:19.9%; left:61.5%;}
.position120{ top:22.1%; left:53.6%;}
.position121{ top:48.2%; left:50.7%;}
.position122{ top:45.3%; left:49.8%;}
.position123{top:33.4%; left:54.9%;}
.position124{ top:52.5%; left:52.1%;}
.position125{ top:16.3%; left:56.8%;}
.position126{ top:15.2%; left:57.3%;}
.position127{ top:37.8%; left:51.6%;}
.position128{ top:33.8%; left:50.1%;}
.position129{ top:36.2%; left:49.8%;}
.position130{top:22.4%; left:54.9%;}
.position131{ top:33.2%; left:56.1%;}
.position132{ top:38.2%; left:49.8%;}
.position133{top:23.4%; left:53.9%;}
.position134{ top:33.6%; left:50.1%;}
.position135{ top:17.8%; left:61.2%;}
.position136{ top:31.6%; left:51.3%;}
.position137{ top:40.7%; left:50.8%;}
.position138{top:28.8%; left:52.1%;}
.position139{ top:23.5%; left:57.2%;}
.position140{ top:44.9%; left:53.8%;}
.position141{top:12.8%; left:60.2%;}
.position142{ top:12.1%; left:53.5%;}
.position143{ top:26.2%; left:52.3%;}
.position144{ top:48.3%; left:50.8%;}
.position145{ top:45.4%; left:52.6%;}
.position146{top:33.5%; left:54.3%;}
.position147{ top:45.6%; left:51.2%;}
.position148{ top:16.3%; left:58.8%;}
.position149{ top: 29.2%; left: 59.3%;}
.position150{ top:38.8%; left:52.6%;}
.position151{ top:32.8%; left:51.1%;}
.position152{ top:35.4%; left:51.8%;}
.position153{top:23.4%; left:52.6%;}

.position154{ top:74%; left:62%;}
.position155{ top:76%; left:66%;}
.position156{ top:10%; left:71%;}
.position157{top:8%; left:78%;}
.position158{  top:23%; left:77%;}
.position159{ top:14%; left:80%;}
.position160{ top:5%; left:76%;}
.position161{ top:5%; left:82%;}
.position162{ top:61%; left:87%;}
.position163{ top:53%; left:85%;}
.position164{ top:68%; left:90%;}
.position165{ top:68%; left:62%;}
.position166{ top:16%; left:78.5%;}
.position167{  top:33%; left:78%;}
.position168{ top:17.5%; left:77%;}
.position169{ top:25%; left:81%;}
.position170{ top:15%; left:82%;}
.position171{ top:11%; left:85%;}
.position172{ top:23%; left:82%;}
.position173{ top:28%; left:79%;}
.position174{ top:78.6%; left:60.4%;}
.position175{ top: 78.1%; left:66.3%;}
.position176{ top:13.5%; left:77.8%;}
.position177{ top:9.5%; left:75.2%;}
.position178{top:6.1%; left:72.9%;}
.position179{  top:25.7%; left:77.6%;}
.position180{ top:16.2%; left:78.8%;}
.position181{ top:5.8%; left:76.5%;}
.position182{ top:6.1%; left:80.4%;}
.position183{ top:70.2%; left:92.4%;}

/*作家的一句話*/
.page-author{ background:#005bb9 url(images/page-author2.png) no-repeat center bottom/contain;overflow:hidden; padding-top:15.156%; position:relative;}
.title-author{ background: url(images/title4.png) no-repeat center top/cover; width:60%; max-width:1000px; min-width:320px; margin:0 auto 50px auto; position:relative; z-index:10;}
.title-author:before{ content:''; display:block; padding-top:13.972%;}
.datflow{background:#005bb9 url(images/page-author1.png) no-repeat center top/contain; position:absolute; width:100%; top:0;}
.datflow:before{ content:''; display:block; padding-top:45.104%;}

.author-list{ text-align:center; position:relative; overflow:hidden;}
.author-list li{ float:left; display:inline-block; width:15%; height:15%; max-width:250px; max-height:250px;}
.author-list li:nth-child(2n+1){ animation:float 4s infinite;}
.author-list li:nth-child(2n){ animation:float 5s infinite;}
.author-list li img{ width:100%;}

.author-list li:nth-child(1){ margin:5% 2.5%;}
.author-list li:nth-child(2){ margin:0% 2%;}
.author-list li:nth-child(3){ margin:3% 2.5%;}
.author-list li:nth-child(4){ margin:0% 2%;}
.author-list li:nth-child(5){ margin:3% 2.5%;}
.author-list li:nth-child(6){ margin:0% 2.5%;}
.author-list li:nth-child(7){ margin:5% 3%;}
.author-list li:nth-child(8){ margin:2% 2.5%;}
.author-list li:nth-child(9){ margin:5% 2%;}
.author-list li:nth-child(10){ margin:-3% 2.5%;}
.author-list li:nth-child(11){ margin:5% 2.5%;}
.author-list li:nth-child(12){ margin:0% 2%;}
.author-list li:nth-child(13){ margin:3% 2.5%;}
.author-list li:nth-child(14){ margin:0% 2%;}
.author-list li:nth-child(15){ margin:3% 2.5%;}
.author-list li:nth-child(16){ margin:-14% 2.5%;}
.author-list li:nth-child(17){ margin:5% 3% 0% 3%;}
.author-list li:nth-child(18){ margin:-5% 2.5%;}
.author-list li:nth-child(19){ margin:-17% 2%;}
.author-list li:nth-child(20){ margin:0% 2.5%;}
.author-list li:nth-child(21){ margin:-4% 2.5%;}
.author-list li:nth-child(22){ margin:0% 2%;}
.author-list li:nth-child(23){ margin:3% 2.5%; clear:both;}
.author-list li:nth-child(24){ margin:0% 2%;}
.author-list li:nth-child(25){ margin:3% 2.5%;}
.author-list li:nth-child(26){ margin:0% 2.5%;}
.author-list li:nth-child(27){ margin:5% 3%;}
.author-list li:nth-child(28){ margin:2% 2.5%;}
.author-list li:nth-child(29){ margin:5% 2%;}
.author-list li:nth-child(30){ margin:-3% 2.5%;}
.author-list li:nth-child(31){ margin:5% 2.5%;}
.author-list li:nth-child(32){ margin:0% 2%;}
.author-list li:nth-child(33){ margin:3% 2.5%;}
.author-list li:nth-child(34){ margin:0% 2%;}
.author-list li:nth-child(35){ margin:3% 2.5%;}
.author-list li:nth-child(36){ margin:-14% 2.5%;}
.author-list li:nth-child(37){ margin:5% 3%;}
.author-list li:nth-child(38){ margin:-5% 2.5%;}
.author-list li:nth-child(39){ margin:0% 2%;}
.author-list li:nth-child(40){ margin:0% 2.5%;}
.author-list li:nth-child(41){ margin:0% 5%; clear:both;}
.author-list li:nth-child(42){ margin:-6% 4.5% 3% 4.5%;}
.author-list li:nth-child(43){ margin:0% 5.5% 3% 5.5%;}

.btn-close{ width:8px; height:50px; transform:rotate(45deg); background-color:#ffed4a; position:absolute; right:35px; top:15px;}
.btn-close:before{ content:''; display:block; height:8px; width:50px;background-color:#ffed4a;position: absolute;left: 50%;top: 50%;margin: -4px 0 0 -25px;}
.btns{ position:absolute; bottom:15px; right:20px;}
.btns li{ display:inline-block;}
.btns li+li{ margin-left:10px;}
.btn-fb{ display:inline-block; height:51px; width:51px; background:url(images/btn-share.png) no-repeat 0 0/cover;}
.btn-twitter{ display:inline-block; height:51px; width:51px; background:url(images/btn-share.png) no-repeat -73px 0/cover;}
.btn-plurk{ display:inline-block; height:51px; width:51px; background:url(images/btn-share.png) no-repeat -146px 0/cover;}
.btn-weibo{ display:inline-block; height:51px; width:51px; background:url(images/btn-share.png) no-repeat -220px 0/cover;}

.author_pop:before{ content:''; display:block; padding-top:46.875%;}
#author_pop1{ background: url(../images/author/一句話_DARK櫻薰.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop2{ background: url(../images/author/一句話_Misa.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop3{ background: url(../images/author/一句話_上官憶.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop4{ background: url(../images/author/一句話_于晴.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop5{ background: url(../images/author/一句話_小妖.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop6{ background: url(../images/author/一句話_天罪.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop7{ background: url(../images/author/一句話_水泉.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop8{ background: url(../images/author/一句話_央央.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop9{ background: url(../images/author/一句話_石子.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop10{ background: url(../images/author/一句話_冰如劍.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop11{ background: url(../images/author/一句話_艾小薇.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop12{ background: url(../images/author/一句話_宋亞樹.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop13{ background: url(../images/author/一句話_希澄.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop14{ background: url(../images/author/一句話_李穆梅.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop15{ background: url(../images/author/一句話_決明2點0.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop16{ background: url(../images/author/一句話_兔子說.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop17{ background: url(../images/author/一句話_夜兒.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop18{ background: url(../images/author/一句話_拆野拆替.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop19{ background: url(../images/author/一句話_明月聽風.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop20{ background: url(../images/author/一句話_東燁.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop21{ background: url(../images/author/一句話_林綠.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop22{ background: url(../images/author/一句話_帝柳.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop23{ background: url(../images/author/一句話_重花.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop24{ background: url(../images/author/一句話_琉影.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop25{ background: url(../images/author/一句話_草子信.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop26{ background: url(../images/author/一句話_草草泥.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop27{ background: url(../images/author/一句話_馬蘇蘇.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop28{ background: url(../images/author/一句話_唯綠.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop29{ background: url(../images/author/一句話_啞鳴.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop30{ background: url(../images/author/一句話_屠火火.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop31{ background: url(../images/author/一句話_張苡蔚.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop32{ background: url(../images/author/一句話_晨羽.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop33{ background: url(../images/author/一句話_笭菁.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop34{ background: url(../images/author/一句話_麻葉.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop35{ background: url(../images/author/一句話_喬一樵.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop36{ background: url(../images/author/一句話_雲端.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop37{ background: url(../images/author/一句話_煙波.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop38{ background: url(../images/author/一句話_雷雷夥伴.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop39{ background: url(../images/author/一句話_瑪琪朵.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop40{ background: url(../images/author/一句話_樊落.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop41{ background: url(../images/author/一句話_醉琉璃.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop42{ background: url(../images/author/一句話_憑虛.png) no-repeat center top/cover; width:95%; max-width:800px;}
#author_pop43{ background: url(../images/author/一句話_燃聿.png) no-repeat center top/cover; width:95%; max-width:800px;}


@media screen and (max-width: 1500px){
	.unslider{  max-width:800px; }
	.banner li{ max-width:800px;}
	.datcloud{ top:-100px;}
	}
	
@media screen and (max-width: 1199px){
	.box{ width:100%; text-align:right;}
	.box-percent{ bottom:0;}
	.sponcer-block img{ width:100px;}
	.sponcer-block img.popologo{ width:99px;}
	}

@media screen and (max-width: 999px){
	.box{ width:100%; text-align:right;}
	.box-percent{ bottom:0;}
	.sponcer-block img{ width:80px;}
	.sponcer-block img.popologo{ width:80px;}
	.btn-go{ font-size:1em; height:50px; line-height:50px;}
	}

@media screen and (max-width: 799px){
	.datcloud{ top:-30px;}
	.btn-close{ width:5px; height:35px;}
	.btn-close:before{ height:5px; width:35px; margin:-2px 0 0 -18px;}
	.btns li+li{ margin-left:5px;}
	.btn-fb{ height:40px; width:40px; background-size:213px 40px; background-position:0 0;}
	.btn-twitter{height:40px; width:40px; background-size:213px 40px; background-position:-57px 0;}
	.btn-plurk{ height:40px; width:40px; background-size:213px 40px; background-position:-114px 0;}
	.btn-weibo{ height:40px; width:40px; background-size:213px 40px; background-position:-170px 0;}
	
	.dot-love{ width:5px; height:5px;}
	.dot-fantasy{ width:5px; height:5px;}
	
	.MENU{right:10px; top:10px;}
	.NAV-ZONE{ font-size:1.5em;}
.block-NAV{ height:60px;}
.NAV-ZONE a:hover{ color:#999;}
.N-f30{ display:block; font-size:0.6em;}
.NAV01{ line-height:60px;}
.NAV02{}
.NAV03{ line-height:60px;}
.NAV04{ line-height:60px;}

.sponcer-block span{ display:block;}

.page-map{ min-height:450px;}
.percent{ font-size:2em;}

}
@media screen and (max-height: 568px){
	.NAV{ padding-top:0%;}
	.block-NAV{ height:55px;}
.NAV-ZONE a:hover{ color:#999;}
.N-f30{ display:block; font-size:0.6em;}
.NAV01{ line-height:55px;}
.NAV02{}
.NAV03{ line-height:55px;}
.NAV04{ line-height:55px;}
}

@media screen and (max-width: 480px){
		.NAV{ padding-top:20%;}

	
	.page-wall{ padding-top:25%; padding-bottom:5%; min-height:inherit;}
	
	.map{ top:43%;}
	
	.btn-close{ width:3px; height:20px; top:5px; right:15px;}
	.btn-close:before{ height:3px; width:20px; margin:-2px 0 0 -10px;}
	.btns{ right:10px; bottom:10px;}
	.btns li+li{ margin-left:2px;}
	.btn-fb{ height:20px; width:20px; background-size:107px 20px; background-position:0 0;}
	.btn-twitter{height:20px; width:20px; background-size:107px 20px; background-position:-29px 0;}
	.btn-plurk{ height:20px; width:20px; background-size:107px 20px; background-position:-58px 0;}
	.btn-weibo{ height:20px; width:20px; background-size:107px 20px; background-position:-87px 0;}
	
	.sponcer-block img{ width:60px;}
	.sponcer-block img.popologo{ width:60px;}
}