@charset "utf-8";

/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0 0; padding:0 0; -webkit-text-size-adjust:none;}
table {border-collapse:collapse; border-spacing:0;}
img {border:0;}
ol, ul {list-style:none;}
a{ border:0; outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none;}
input , textarea{outline:none;}

body{ font-family:arial,"微軟正黑體"; background:url(../images/body_bg.jpg) center top fixed no-repeat; -moz-background-size:cover; background-size:cover;}

/*other*/
.ps{ color:#c41230;}
.subtitle{ font-size:21px;}
.bkbg{ border-radius:10px; padding:10px; margin:10px 0; background:rgba(0,0,0,.8); color:#fff !important; font-size:20px !important;}

/* header */
#header{position:relative; width:100%; background:rgba(255,255,255,0.8);}
#header span{ display:block;width:90%; max-width:1200px; margin:0 auto; padding:5px 0; overflow:hidden;}
#logo{float:left; display:block; width:150px; height:60px; background:url(../images/logo.png); background-size:100%; box-sizing:border-box;}
#header .info{position:relative; top:0px; float:right;}
#header .info a{ font-size:15px; color:#555; font-weight:bold; transition:all .3s;}
#header .info a:before{content:""; position:relative; top:12px; display:inline-block; width:35px; height:35px; margin-right:5px; border-radius:50px;}
#header .info:hover a{ color:#000;}
#header .info .mail{margin-right:10px;}
#header .info .mail:before{ background:url(../images/links.png) no-repeat left #eb6543; transition:all .3s;}
#header .info .phone:before{ background:url(../images/links.png) no-repeat right #eb6543; transition:all .3s;}
#header .info .mail:hover:before{ background:url(../images/links.png) no-repeat left #c51230;}
#header .info .phone:hover:before{ background:url(../images/links.png) no-repeat right #c51230;}

/* menu */
#menu{position:relative; width:100%; background:#c41230; z-index:2;}
#menu ul{ width:90%; max-width:1200px; margin:0 auto; overflow:hidden; text-align:center; letter-spacing:0; word-spacing:0; font-size:0;}
#menu li{ display:inline-block; width:33%;}
#menu li a{ width:100%; padding:5px 0; overflow:hidden; font-size:20px; color:#fff; letter-spacing:normal; word-spacing:normal; display:inline-block; *display:inline; zoom:1; transition:all .5s;}
#menu li a:hover{ background:#8d0008; letter-spacing:2px; text-shadow:0 0 10px #fff;}

/* banner */
#banner{position:relative;}
#banner .item img{display:block; margin:0 auto; max-width:100%; height:auto; opacity:1; transition:all .3s;}
#banner .owl-buttons{display:none;}
#banner .owl-pagination{padding:20px 0; text-align:center;}
#banner .owl-pagination .owl-page{display:inline-block; width:10px; height:10px; margin:0 5px; background:#FFF; border-radius:50%;}
#banner .owl-pagination .owl-page.active{background:#F00;}

/* navigation */
#navigation{position:relative; width:1400px; margin:0 auto; padding-bottom:20px; box-sizing:border-box;}
#navigation .rank{width:50%; overflow:hidden; box-sizing:border-box;}
#navigation .left{float:left; padding-left:1%;}
#navigation .right{float:right; padding-right:1%;}
#navigation .rank a{float:left; display:block; width:33.3%; padding:1px; box-sizing:border-box;}
#navigation .rank a:hover{ opacity:.5;}
#navigation .rank img{display:block; width:100%; height:auto;}
#navigation .vote.small{display:none; overflow:hidden;}
#navigation .vote.small a{float:left; display:block; width:50%; padding:1px; box-sizing:border-box;}
#navigation .vote.small a img{display:block; width:100%; height:auto;}
#navigation.inside .rank{visibility:hidden;}
#navigation:after{content:""; display:block; clear:both;}

.index-btn{ text-align:center;}
.index-btn li{ display:inline-block; width:36%; margin:5% 1%;}
.index-btn li a{ display:block; background:url(../images/btn_bg.jpg); padding:2% 5%; line-height:36px; color:#fff; font-size:22px; border-radius:3px;}
.index-btn li a:hover{ background:#c41230;}

#direct{display:none; text-align:center; overflow:hidden;}
#direct a{float:left; display:block; width:16.6%;}
#direct a img{display:block; max-width:100%; height:auto; margin:0 auto; cursor:pointer;}
#direct a:hover{opacity:.6;}

/* container */
#container{width:100%; max-width:1000px; margin:0 auto; padding:0 0 20px 0; margin-bottom:70px;}
#container h1.title{ display:block; font-size:20px; color:#000; font-weight:normal; text-align:center; margin:0 auto; letter-spacing:1px;}
#container h1.title p{ font-size:30px; color:#fff; padding:15px 0 0 0; z-index:5; background:url(../images/title-bg.png) center -1px no-repeat; height:100px;}
#container .ad{padding-top:20px; display:none;}
#container .ad img{display:block; width:100%; height:auto;}
#index-film{width:100%; height:600px;}

/*winner notice*/
#winner{ letter-spacing:1.5px; padding:30px 20px; border-top:2px dotted #666;}
#winner h3{ font-size:22px; color:#000; line-height:36px; padding:5px 0;}
#winner p{ font-size:18px; color:#666; line-height:30px;}
#winner strong{ font-size:18px; color:#ff8a00; line-height:30px;}
#winner img{ width:100%; height:auto; display:block; margin:10px 0;}

/* event */
#event{padding:0 20px;}
#event img{ max-width:100%; height:auto;}
#event h3{ font-size:22px; color:#000; line-height:32px; font-weight:normal;}
#event h4{ font-size:22px; color:#c41230; line-height:32px; font-weight:normal; padding:30px 0 0 0;}
#event a{ color:#000; font-weight:bold;}
#event a:hover{ color:#c41230;}
#event > dl{ padding:20px 0 10px 0; margin:10px 0; overflow:hidden; word-break:break-all; letter-spacing:0.5px;}
#event > dl > dt{padding-bottom:10px;}
#event > dl > dt img{display:block; max-width:100%; height:auto;}
#event > dl#e1 ol{ padding-left:20px;}
#event > dl#e1 ol li{ list-style:decimal; padding:inherit; margin:inherit;}
#event > dl > dd{font-size:17px; color:#000; line-height:30px;}
#event > dl > dd > ul{ padding-bottom:10px;}
#event > dl > dd .icon{ color:#6CF;}
#event > dl > dd .ind-1{padding:5px 0 5px 20px; text-indent:-20px;}
#event > dl > dd .ind-1:before{ content:'★ ';}
#event > dl#e4 > dd .ind-1{padding-left:25px; margin:5px 0; text-indent:-25px; line-height:36px;}
#event > dl#e5 ol{ margin-left:15px;}
#event > dl > dd ol .ind-2{ list-style:decimal; padding:inherit; margin:inherit;}
#event > dl > dd .ind-3{padding-left:25px; text-indent:-25px;}
#event > dl > dd .ind-4{padding-left:80px; text-indent:-80px;}
#event > dl > dd .red{color:#e60012;}
#event > dl > dd .red-s{color:#e5005a; font-size:16px;}
#event > dl > dd .normal{font-weight:normal;}
#event > dl > dd .big-font{font-size:23px;}
#event > dl > dd dl{position:relative; padding:20px 0 20px 110px;}
#event > dl > dd dt{position:absolute; left:0; top:25px;}
#event > dl > dd{line-height:30px;}
#event > dl > dd a{ transition:all .3s;}
#event > dl > dd a.sign-up{ font-size:16px; color:#FFF; background:#3dbff2; padding:6px 15px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
#event > dl > dd a.sign-up:hover{ background:#e72653;}
#event > dl > dd a.mail{ color:#2b97ea;}
#event > dl > dd a.mail:hover{ color:#0fbeff; text-decoration:underline;}
#event > dl#e1, #event > dl#e2, #event > dl#e3, #event > dl#e4, #event > dl#e5, #event > dl#e6{ border-top:2px dotted #666;}
#event > dl#e1{ border-top:0;}
#event > dl#e6{ border-bottom:0;}

/* event winners */
.winners{ color:#fff; display:inline-block; background: #900; padding:2% 5%; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;}
.winners h2{ border-bottom:1px dashed #fff; padding:5px 0; margin-bottom:10px;}
.winners h3{ line-height:36px; font-weight:normal;}

/* event 1 2 3 4 5 ... */
.number{ color:#fff; background:#000; font-size:12px; font-family:Georgia; display:inline-block; margin-right:5px; text-indent:0px; text-align:center; width:20px; line-height:20px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;}

/* star */
#star{margin-bottom:20px; overflow:hidden;}
#star li{float:left; width:25%; padding:1%; box-sizing:border-box; transition:all .3s;}
#star li a{position:relative; display:block; transition:all .3s;}
#star li a:before{content:""; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:url(../images/more_boy.png) center center; opacity:0; transition:all .3s}
#star li a img{display:block; width:100%; height:auto;}
#star li a:hover:before{opacity:1;}

/* footer */
#footer{background:#000; font-size:13px; color:#FFF; letter-spacing:1px; text-align:center; padding:5px 0; position:fixed; bottom:0; width:100%; z-index:999;}
#footer a{ color:#fff; text-decoration:none; display:inline-block; opacity:.5; transition:all .3s;}
#footer a:hover{ opacity:1;}

/* social */
#social{position:absolute; right:2%; top:40%; display:none;}
#social a{display:block; width:76px; height:77px; text-indent:-9999px; background:url(../images/social.png); transition:all .3s;}
#social a:hover{opacity:.6;}
#social .fb{background-position:left top;}
#social .pinky{background-position:center top;}
#social .uc{background-position:right top;}

/* top */
#gotop{position:fixed; right:3%; bottom:6%; display:block; width:100px; height:115px; background:url(../images/top.gif) no-repeat; box-sizing:border-box; cursor:pointer; transition:all .3s; z-index:1;}
#gotop:hover{ bottom:7%; opacity:.9;}

/* mobile */
#mobile{position:fixed; left:0; top:0; display:none; width:100%; background:#FFF; box-shadow:0 0 10px #000; box-sizing:border-box; z-index:100;}
#mobile .logo{ position:fixed; top:5px; left:5%; width:134px; height:29px; z-index:3; background:url(../images/logo_mobile.png) 0 0 no-repeat;}
#mobi-btn{position:relative; display:block; width:100%; height:40px; background:#FFF; cursor:pointer; box-shadow:0 0 10px #999; z-index:2; cursor:default;}
#mobi-btn:before{content:""; position:absolute; right:5%; top:8px; width:30px; height:23px; background:url(../images/mobi_btn.png); display:none;}
#mobile .wrapper{display:none;}
#mobile h1{position:relative; font-size:20px; color:#FFF; line-height:45px; background:#F00; text-align:center; padding:0 10px;}
#mobile .vote{position:relative; width:100%; margin:0 auto; padding:15px; overflow:hidden; box-sizing:border-box;}
#mobile .vote a{display:block; width:50%; float:left;}
#mobile .vote img{display:block; width:100%; height:auto;}
#mobile #social{position:static; display:none; text-align:center; padding-bottom:10px;}
#mobile #social a{display:inline-block;}
#mobi-ft{background:#000; font-size:18px; color:#FFF; line-height:30px; text-align:center; padding:10px 0;}
#mobi-ft p{position:relative; width:300px; margin:0 auto;}
#mobi-ft p a{color:#FFF;}
#mobi-ft p .mail ,
#mobi-ft p .phone{position:absolute; top:10px; display:none; width:40px; height:40px; background:url(../images/mobi_links.png) no-repeat;}
#mobi-ft p .mail{left:0; background-position:left;}
#mobi-ft p .phone{right:0; background-position:right;}
#mobi-spacer{display:none; height:40px;}

/* mask */
#mask{position:fixed; left:0; top:0; display:none; width:100%; height:100%; z-index:99}

/* vote */
#vote{overflow:hidden;}
#vote h2{ font-size:24px; padding:20px 20px 0 20px; line-height:36px;}
#vote h2 span{ font-size:15px; padding:0 5px; vertical-align:top; font-weight:normal; color:#666;}
#vote dl{float:left; width:25%; padding:30px 2%; box-sizing:border-box;}
#vote dt{position:relative; box-shadow:1px 1px 5px #aaa; box-sizing:border-box; overflow:hidden;}
#vote dt a{position:absolute;left:0;top:-5px;display:block;width:100%;height:100%;-webkit-transition:width 1s, height 1s, -webkit-transform 1s;transition:width 1s, height 1s, transform 1s;}
#vote dt img{display:block; margin:0 auto; width:100%; height:auto;}
#vote.girl dt:hover a{ top:0; background:url(../images/more_girl.png); background-size:100%; -webkit-transform:rotate(180deg); transform:rotate(180deg);}
#vote.boy dt:hover a{ top:0;background:url(../images/more_boy.png); background-size:100%; -webkit-transform:rotate(180deg); transform:rotate(180deg);}
#vote dd{position:relative; color:#000; font-weight:bold; padding:10px 130px 10px 0;}
#vote dd .name{font-size:20px; line-height:25px; color:#000;}
#vote dd .count{ padding:3px 10px; color:#fff; background:#000; font-size:14px; letter-spacing:1px; display:inline-block; text-align:center; line-height:20px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
#vote dd .school{font-size:15px; font-weight:normal;}
#vote dd .love{position:absolute; right:0; top:5px; display:block; width:133px; height:59px; font-size:20px; line-height:58px; color:#000; text-indent:60px; background:url(../images/label.png); cursor:pointer; transition:all .3s;}
#vote dd .love:hover{ background:url(../images/label-hover.png); color:#fff;}

.page{clear:both; padding:50px 10px; text-align:center;}
.page a{display:inline-block;width:40px;height:40px; font-size:18px; line-height:40px; font-weight:bold; border-radius:50%; margin:10px; box-shadow:0 0 10px #999; box-sizing:border-box; transition:all .3s;}
.page a{color:#e4005a; border:2px solid #000;}
.page a:hover ,
.page a.active{background:#c41230; color:#FFF;}
.page a{color:#000; border:2px solid #000;}
.page a:hover{ color:#FFF; background:#000; border:2px solid #000;}
.page a.active{ color:#FFF; background:#c41230; border:2px solid #c41230;}

/* information */
#information{padding:30px 20px; color:#fff; font-size:24px;}
#information dl{position:relative; height:500px; padding-left:392px; background:rgba(0,0,0,.8);}
#information dt{position:absolute; left:0; top:0; width:90%; max-width:392px; box-sizing:border-box;}
#information dt .wrapper{position:relative;}
#information dt .love{position:absolute; right:-160px; bottom:10px; display:block; width:135px; font-size:20px; line-height:35px; background:#FFF; cursor:pointer; box-shadow:1px 1px 2px #666; border-radius:10px; padding:5px;}
#information dt .love span{position:relative;display:block; font-size:18px; color:#666; text-align:center;}
#information dt .love span:before{content:""; position:absolute; left:5px; top:8px; display:block; width:21px; height:18px; background:url(../images/vote.jpg) no-repeat;}
#information dt .love .wrapper{padding-left:75px; padding-right:5px; color:#c41230;}
#information dt .love .wrapper:before{content:""; position:absolute; left:5px; top:8px; display:block; width:21px; height:18px; background:url(../images/love.jpg) no-repeat;}
#information dt .love .wrapper:after{content:"票數"; position:absolute; left:30px; top:5px; font-size:18px; color:#666; line-height:normal;}
#information dd{width:100%; height:100%; font-size:18px; color:#fff; line-height:36px; padding:20px; box-sizing:border-box; letter-spacing:1px;}
#information dd .subtitle{}
#information dd .name{}
#information dd .info{max-height:290px; overflow:hidden;}
.back{padding-top:3%; text-align:center;}
.back a{ display:inline-block; font-size:15px; color:#FFF; line-height:30px; font-weight:normal; text-align:center; text-indent:0; background:#000; padding:5px 20px; border:5px solid transparent; box-shadow:0px 2px 1px #aaa; -webkit-border-radius:10px; -moz-border-radius:50px; border-radius:50px; box-sizing:border-box; cursor:pointer; transition:all .3s;}
.back a:hover{ background:#c41230; border:5px solid #c41230; box-shadow:0px 2px 1px transparent;}
#editor{padding:50px 0;}
#editor img{display:block; max-width:100%; height:auto;}
#fb-comment{padding:30px; background:#FFF; display:none;}
#edit{ padding:20px 0; font-size:18px; color:#000; line-height:26px; border-top:1px dashed #000;}

/* album */
#album{position:relative; overflow:hidden;}
#album ul{position:relative; left:0; top:0; overflow:hidden;}
#album li{float:left;}
#album li img{display:block; width:100%; height:auto;}
#album a.prev, #album a.next{position:absolute; top:45%; display:block; width:37px; height:64px; background:url(../images/arrow.png); text-indent:-9999px; cursor:pointer; z-index:2;}
#album a.prev{left:20px; background-position:left;}
#album a.next{right:20px; background-position:right;}
#album #pagination{display:none;}

/* list */
.list{ text-align:center;}
.list li, .list li a, .list li a img{ display:block; -webkit-border-radius:300px; -moz-border-radius:300px; border-radius:300px; overflow:hidden; background:#000;}
.list li{ position:relative; width:268px; height:268px; overflow:hidden; margin:18px 10px; border:10px solid #222; display:inline-block;}
.list li a p{ position:absolute; left:0; top:46%; background:rgba(0,0,0,1); display:block; color:#fff; padding:10px; text-align:right; font-size:large; display:block;}
.list li span{ display:block; color:#ff8f58; font-size:12px;}
.list li b{ display:block; color:#FC0; font-size:12px;}
.list li a img{ width:100%; height:auto; margin-top:-20px;}

/* taiwan */
#voting{position:relative; width:1000px; height:700px; margin:0 auto; padding:0 0 0 25px; overflow:hidden; box-sizing:border-box; z-index:1; background:url(../images/vote.png) center top no-repeat;}
#voting .map{position:relative; float:left; width:671px; height:924px; background:url(../images/map.png) center center no-repeat;}
#voting .map li{position:absolute;}
#voting .map li a{position:relative; display:block; width:50px; height:50px; color:#fff; line-height:50px; font-size:22px; text-align:center; background:#b7253f; border-radius:50%; box-sizing:border-box; cursor:pointer; transition:all .3s; z-index:1; overflow:hidden; animation:anime 2.5s linear infinite alternate;}
@keyframes anime{
0%	{ background:#ad172b;}
25%	{ background:#f03859;}
50%	{ background:#ad172b;}
75%	{ background:#f03859;}
100%{ background:#ad172b;}
}
#voting .map li a:hover{ margin:-5px; margin:-5px; box-shadow:0 0 10px #000; width:60px; height:60px; font-size:26px; line-height:60px; border:3px solid #000;}
.small-name{ font-size:16px !important;}
#voting .map #mark-1 {left:600px; top:10px;}/*基隆*/
#voting .map #mark-2 {left:550px; top:20px;}/*台北*/
#voting .map #mark-3 {left:587px; top:60px;}/*新北*/
#voting .map #mark-4 {left:500px; top:40px;}/*桃園*/
#voting .map #mark-5 {left:500px; top:110px;}/*新竹縣*/
#voting .map #mark-18 {left:460px; top:80px;}/*新竹市*/
#voting .map #mark-6 {left:440px; top:140px;}/*苗栗*/
#voting .map #mark-7 {left:460px; top:290px;}/*南投*/
#voting .map #mark-8 {left:395px; top:205px;}/*台中*/
#voting .map #mark-9 {left:360px; top:260px;}/*彰化*/
#voting .map #mark-10{left:330px; top:310px;}/*雲林*/
#voting .map #mark-11{left:355px; top:360px;}/*嘉義*/
#voting .map #mark-12{left:330px; top:420px;}/*台南*/
#voting .map #mark-13{left:380px; top:460px;}/*高雄*/
#voting .map #mark-14{left:380px; top:540px;}/*屏東*/
#voting .map #mark-15{left:470px; top:460px;}/*台東*/
#voting .map #mark-16{left:550px; top:290px;}/*花蓮*/
#voting .map #mark-17{left:580px; top:140px;}/*宜蘭*/

/* voting list */
#voting-list{ padding:0 20px 20px 20px; overflow:hidden;}
#voting-list form{ padding:10px 0; vertical-align:top;}
#voting-list select, #voting-list input{ display:inline-block; margin:0 5px 5px 0; font-size:17px; line-height:21px; letter-spacing:1px; font-family:"微軟正黑體"; border-radius:3px;}
#voting-list select{ background:#000; color:#fff; padding:6px 10px; border:0; width:21%;}
#voting-list input{ background:#fff; padding:7px 10px; border:1px solid #000; width:42%}
#voting-list input.search{ background:#333; color:#ccc; width:10%; transition:all .3s;}
#voting-list input.search:hover{ background:#000; color:#fff; cursor:pointer;}
#voting-list .open{ vertical-align:top; display:inline-block; font-size:17px; line-height:21px; padding:8px 10px; background:#cc3e56; color:#fff; border-radius:3px; transition:all .3s;}
#voting-list .open:hover{ background:#c41230;}

/* rwd-table */
.rwd-table { overflow:hidden; min-width:100%;}
.rwd-table thead tr{ font-weight:bold; font-size:18px; line-height:21px; text-align:left; color:#fff; background:rgba(196,18,48,.8);}
.rwd-table tr{ border-bottom:1px solid #999;}
.rwd-table td:before {display: none;}
.rwd-table tbody td{ padding:10px;}
.rwd-table tbody tr:nth-of-type(2n){ background:rgba(204,204,204,0.3);}
.rwd-table tbody tr:hover{ background:rgba(255,255,255,0.5);}
.rwd-table th, .rwd-table td { display:table-cell; line-height:26px;}
.rwd-table th:first-child, .rwd-table td:first-child {padding-left:'';}
.rwd-table th:last-child, .rwd-table td:last-child {padding-right:'';}
.rwd-table th, .rwd-table td { padding:10px;}
.btn-vote{ width:26px; height:26px; display:block; background:url(../images/btn-vote.png) right top no-repeat; text-indent:-9999px; transition:all .3s;}
.btn-vote:hover{ background:url(../images/btn-vote.png) left top no-repeat;}

/* download */
#download{ position:relative;}
#download img{isplay:block; max-width:100%; height:auto; box-shadow:1px 1px 10px #aaa;}
#download .pic{ position:relative; display:block; margin:20px auto 0 auto; width:90%;}
#download .pic:hover img{ box-shadow:1px 1px 10px #fff;}
#download .download-btn{ position:relative;}
#download .download-btn a{ position:absolute; margin:5px; display:inline-block; font-size:15px; color:#FFF; line-height:30px; font-weight:normal; text-align:center; padding:5px 20px; box-shadow:0px 2px 1px #aaa; -webkit-border-radius:10px; -moz-border-radius:50px; border-radius:50px; box-sizing:border-box; cursor:pointer; transition:all .3s;}
#download .download-btn a:hover{ box-shadow:0px 2px 1px transparent;}
#download .download-btn .down{ top:-60px; right:40px; background:#c41230;}
#download .download-btn .home{ top:-60px; right:120px; background:#333;}


/* RWD */
@media screen and (max-width:1400px){
/* navigation */
#navigation{width:100%; max-width:1200px;}

/* banner */
#banner .item img{ width:80%;}
}

@media screen and (max-width:1200px){
/* navigation */
#navigation .vote{bottom:5%;}

/* information */
#information{ width:90%; margin:0 auto;}
#information dt{}
#fb-comment{ margin-bottom:20px;}
#information .back{padding:0 20px;}

/* voting list */
#voting-list{ width:90%; margin:0 auto;}
#voting-list select{ width:19%;}
#voting-list input{ width:39%}
#voting-list input.search{ width:12%;}

/* rwd-table */
.rwd-table{ min-width:auto; width:100%;}
}

@media screen and (max-width:960px){
/* vote */
#vote dl{width:33%;}

/* taiwan */
#voting{position:static; width:100%; height:auto; margin:0 auto; padding:0 0 0 0; overflow:hidden; box-sizing:border-box; z-index:0; background:none;}
#voting .map{position:static; float:none; display:block; margin:0 auto; width:92%; height:auto; background:none; text-align:center;}
#voting .map li{ position:static; margin:1%; padding:0; float:left; transition:all .3s;}
#voting .map li a{ margin:0; padding:0; width:80px; height:80px; line-height:80px; border-radius:90px; background:#c41230; border:1px dashed #999; color:#fff; font-weight:bold; animation:none;}
#voting .map li a:hover{ margin:0; padding:0; width:80px; height:80px; line-height:80px; background:#000; border:0; opacity:.8;}
}

@media screen and (max-width:830px){
/* navigation */
#navigation .vote{bottom:8%;}

/* information */
#information{}
#information dl{height:auto; padding-left:0; background:none;}
#information dt{position:static; max-width:392px; margin:0 auto; padding:0;}
#information dt .love{right:auto; left:10px; bottom:10px;}
#information dd{width:90%; max-width:392px; margin:0 auto; padding:10px 0; color:#000;}
#edit{ max-width:392px; display:block; margin:0 auto;}
}

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

#container{ max-width:100%; overflow:hidden;}	
	
/* menu */
#menu li a{ background:none;}

/* star */
#star li{width:33%;}

/* direct */
#direct a{width:29%; margin:2%;}

/* voting list */
#voting-list{ width:100%; margin:0; float:left;}
#voting-list select{ width:36%; float:left;}
#voting-list input{ width:63%; float:left;}
#voting-list input.search{ width:20%;}

/* rwd-table */
.rwd-table tbody tr{ display:block; padding:10px; width:90%; border-radius:20px; background:rgba(255,255,255,.8); margin:10px 0;}
.rwd-table tbody tr:nth-of-type(2n){ background:rgba(204,204,204,0.5);}
.rwd-table th { display:none;}
.rwd-table td { display:block;}
.rwd-table tbody td{ width:100%; padding:3px 0;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.rwd-table td:before {content:attr(data-th) " : ";font-weight: bold; width:5.5em;display: inline-block;}
.rwd-table th, .rwd-table td {text-align: left;}
.rwd-table th, .rwd-table td:before { font-weight: bold;}
.rwd-table .btn-vote{ display:inline-block; text-indent:inherit; width:auto; background:none #000; color:#fff; border-radius:3px; padding:2px 20px;}
.rwd-table .btn-vote:hover{ background:none #c41230;}
}

@media screen and (max-width:720px){
/* vote */
#vote dl{width:50%;}
}

@media screen and (max-width:640px){
/* header */
#header{ position:fixed; top:0; z-index:999; padding:5px;}
#header span{ padding:0;}
#header a.mail,
#header a.phone { display:inline-block; overflow:hidden !important; width:35px; height:35px; border-radius:50px; text-indent:-9999px;}
#header a.mail:before,
#header a.phone:before{ display:none;}
#header a.mail{ background:url(../images/links.png) 0 0 no-repeat #eb6543;}
#header a.phone{ background:url(../images/links.png) -35px 0 no-repeat #eb6543;}

/* logo */
#logo{ width:100px; height:40px; background:url(../images/logo_mobile.png);}

/* menu */
#menu{ position:fixed; top:50px; z-index:999;}
#menu ul{ width:100%;}
#menu li a{ font-size:18px; padding:10px 0;}
#menu li a:hover{ font-size:16px !important;}


/* banner */
#banner{ margin-top:50px;}
#banner .item img{ width:96%;}
 
/* navigation */
#navigation{padding:20px; padding-top:0;}
#navigation .left ,
#navigation .right{padding:0;}
#navigation .rank a{float:none; width:100%;}
#navigation .rank .boy , 
#navigation .rank .girl{display:none;}
#navigation .vote.small{position:static; width:100%; margin:0 auto; display:block;}
#navigation.inside .rank{display:none;}

/* vote btn */
#vote-btn .vote.small{display:block;}

/* container */
#container{ margin-top:90px;}
#container h1.title{ position:relative; border-radius:0; font-size:15px;}
#container h1.title p{ font-size:24px; background:url(../images/title-bg-m.png) center top no-repeat; height:83px;}
.m-margin{ margin-top:0 !important;}

/* social */
#social{display:none;}

/* voting list */
#voting-list{ width:96%;}

#download .download-btn .down{ top:-60px; right:20px;}
#download .download-btn .home{ top:-60px; right:''; left:20px; display:inline-table;}
}

@media screen and (max-width:480px){
/* mobile */
#mobile h1{text-align:center; font-size:18px;}
#mobi-ft{ line-height:21px;}
#mobi-ft p a{ font-size:15px;}

/* banner */
#banner{ margin-top:100px;}

/* vote */
#vote dl{ width:80%; float:none; margin:0 auto;}

/* vote */
#navigation{ padding:0;}

/* star */
#star li{width:50%;}

/* event */
#event > dl{ margin:0; padding:10px 0;}
#event > dl > dd dt{ display:none;}
#event > dl > dd dl{ position:relative; padding:20px 0 20px 0;}
#event > dl > dd .red{ font-weight:normal;}
#event > dl > dd .red-s{ font-size:14px; font-weight:normal;}
#event > dl > dd a.sign-up{ display:inline-block; margin:5px 0;}
#event > dl#e3 > dd .ind-1{ line-height:26px; padding-left:25px; text-indent:-25px;}
#event > dl#e4 > dd .ind-1{ line-height:26px; padding-left:25px; text-indent:-25px; margin:5px 0;}
#event > dl > dd .ind-4{ line-height:26px; padding-left:0px; text-indent:0px;}
#event > dl > dd .ind-4 strong{ display:block;}
#event > dl > dd .ind-4 li{ margin:5px 0;}

/* top */
#gotop{ display:none;}

/* footer */
#footer{ font-size:12px; letter-spacing:0;}

#index-film{height:300px;}

/* voting list */
#voting-list{ width:92%;}
#voting-list select{ width:34%;}
#voting-list input.search{ width:22%;}
#voting-list input{ padding:6px 0;}
#voting-list select, #voting-list input{ font-size:15px; letter-spacing:0;}
}

@media screen and (max-width:400px){
/* star */
#star li{float:none; width:90%; padding:0; margin:20px auto;}

/* voting */
#voting .map li a{margin:0;padding:0;width:75px; height:75px; line-height:75px;}
#voting .map li a:hover{margin:0;padding:0;width:75px; height:75px; line-height:75px;}

#download .download-btn .down{ right:2%;}
#download .download-btn .home{ left:2%;}
}
@media screen and (max-width:320px){
/* voting */
#voting .map li a{margin:0;padding:0;width:65px; height:65px; line-height:65px;}
#voting .map li a:hover{margin:0;padding:0;width:65px; height:65px; line-height:65px;}

/* list */
.list li{ width:240px; height:240px;}

/* voting list */
.rwd-table tbody tr{ width:80%;}
.rwd-table tbody td{ width:80%;}
}