@charset "UTF-8";

/*HEADER
-------------------------------------------------------------------*/
  .maintop{
    width: 100%;
    margin: 0px auto;
    float: left;
    z-index: 2;
    /*background: #ff0;*/
    padding: 1.3% 0;
    border-bottom: 1px solid #ccc;
  }

  /*logo*/
  .logo{
    width: auto;
    float: left;
    width: 26%;
    /*padding: 1.8% 0 0 0
    background: url(../images/homebg.png);*/
  }

  /*TOOLS(活動辦法)*/
  .tools{
    width: 36%;
    float: right;
    /*background: #F00;*/
    padding: 0% 0 0 0;
    margin: 2%  0 0 0;
  }

  .toolsbtn{
    width: 35%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #3cc5fc;
    background: none;
    padding:3px 10px;
    margin:0px 1%;
    float: left;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
  }

  .toolsbtn{
    width: 45px;
  }

  .toolsbtn a{
    color:#fff;
    font-size: 14px;
  }

  .toolsbtn:hover{
    cursor: pointer;
  }


/*footer資訊框架
--------------------------------------------------------------------*/
  
  .footer .info,.footer .infosec2{
    float: left;
    line-height: 26px;
    margin: 5% 0;
  }

  .footer .info,.footer .infosec2{
    padding: 0% 8%;
  }

  .footer .info header,.footer .infosec2 header{
    color: #444;
  }

  .footer .info,.footer .infosec2,.footer .info a,.footer .infosec2 a{
    color: #666;
    text-transform:uppercase;
    -o-transition:color .3s linear,background .3s linear;
    -webkit-transition:color .3s linear,background .3s linear;
    -moz-transition:color .3s linear,background .3s linear;
    transition:color .3s linear,background .3s linear
  }

  .footer .info a:hover,.footer .infosec2 a:hover{
    color: #3cc5fc;
  }

  .footer .serlink{
    padding: 1% 0% 1% 0%;
    float: left;
    width: 100%;
  }

  .footer .left,.footer .right{
    float: left;
    width: 50%;
    padding: 0 2%;
  }
  
/*作品集
-------------------------------------------------------*/
  .portfolio .all{
    background: #fff;
    height: auto;
    float: left;
    margin: 2% 0; 
    width: 100%;
  }
  .portfolio .title{
    padding: 5%;
  }

  .portfolio .contents{
    padding: 2%;
  }

  .portfolio .picontents{
    padding: 2%;
  }
  
  .portfolio .all .names{
    color: #555;
    font-size: 17px;
    font-weight:lighter;
    line-height: 35px;
    font-family: myFirstFont;
  }
  .portfolio .all h3{
    color: #3cc5fc;
    margin: 6% 0;
    letter-spacing: 1px;
  }

  .portfolio .all p{
    margin: 0% 0;
    font-size: 12px;
    color: #444;
    line-height: 20px;
  }

  .borlef{
    border-left:1px solid #aaa;
    margin: 1% 0;
    padding: 0 0 0 3%;
    float: left;
    width: 100%;
  }

  .borlef span{
    width: 100%;
    float: left;
    /*margin: 1% 0;*/
  }

  .portfolio .contents .actor{
    padding: 12% 5%
  }

  .portfolio .nextleft{
    padding: 0% 0% 2% 2%;
  }

  .portfolio .nextright{
    padding: 0% 2% 2% 0%;
  }

  .portfolio .all .po-4x{
    width: 52.5%
  }

  .portfolio .all .po-2x{
    width: 47.5%
  }

  .portfolio .all .po-3x{
    width: 50%
  }

  .portfolio .all .po-1x{
    width: 16.5%
  }
  
  .portfolio .all .po-5x{
    width: 78.5%;/*69.5*/
  }

  .portfolio .job{
    width: 100%!important;
  }

  .portfolio .all .mobile .po-1x{
    width:30px;
  }

  .portfolio .all .mobile .po-5x{
    width:88%;
    margin: 0 0 5% 0;
  }

  .tininfo,.tininfo-2x{
    font-size: 12px!important;
    color:#aaa;
    margin: 2% 0;
    display:inline-block;
    line-height: 20px;
    -webkit-transform:scale(0.8);
  }

  .tininfo-2x{
    width: 33%!important;
  }
  

/*我要投稿
-------------------------------------------------------*/
  .publish .all{
    background: #fff;
    height: auto;
    float: left;
    margin: 2% 0; 
    width: 100%;
    box-shadow: 4px 4px 10px #999;
    border-radius: 10px;
    border:1px solid #bbb;
  }
  .publish .title{
    padding: 5%;
  }

  .publish .contents{
    padding: 0% 3% 5% 3%;
  }

  .publish .picontents{
    padding: 3% 3% 0% 3%;
  }
  
  .publish .all .names{
    color: #555;
    font-size: 40px;
    font-weight:lighter;
    line-height: 60px;
  }
  .publish .all h3{
    color: #3cc5fc;
    margin: 6% 0;
    letter-spacing: 1px;
  }

  .publish .all p{
    margin: 4% 0;
    font-size: 15px;
    color: #444;
  }

  .publish .all .login{
    margin: 0% auto;
    padding: 2% 6%;
    background: #3cc5fc url(../images/login.png) right center no-repeat;
    font-size: 17px;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    float: none;
    width: 84%;
  }

  .publish .all .login:hover{
    cursor: pointer;
  }

  .publish .all .login a{
    color: #fff;
  }

  .publish .all .login a:active{
    background: none;
    outline: 0px;
  }

  /*首頁手機板*/
  .publish-mobile{
    background: #444;
    float: left;
    width: 100%;
    padding: 2% 0 0 0;
  }

  .publish-mobile p{
    text-align: right;
    margin: 2% 0 2% 0;
    font-size: 12px;
    line-height: 16px;
  }
  
  .publish-mobile .po-2x{
    width: 25%;
  }

  .publish-mobile .po-4x{
    width: 75%;
  }

  .publish-mobile .po-2x,
  .publish-mobile .po-4x{
    padding: 0% 2%;
  }

  .publish-mobile a{    
    color: #fff;
  }

  .publish-mobile .topic{
    font-size: 16px;
  }

/*投票
--------------------------------------------------------------*/
  
  .location span{
    font-size: 22px;
    font-weight: bold;
  }

  .vote form *:focus {
  border: 0px solid #09F;
  outline: none;
  box-shadow:0px 0px 0px #06C;
  background:none;
  }

  .vote .searchs *:focus {
  border: 1px solid #09F;
  outline: none;
  box-shadow:0px 0px 1px #06C;
  background:none;
  }

   .vote .searchs {
    padding: 0 0 ;
    margin: 0 0;
    overflow: hidden; 
  }

  .vote .searchs fieldset{
    padding: 0 0 ;
    margin: 0 0;
    width: 100%;
    right:0px;
    float: right;
  }
  
  .vote .all{
    background: #fff;
    height: auto;
    float: left;
    margin: 2% 0; 
    width: 100%;
    box-shadow: 4px 4px 10px #999;
    border-radius: 10px;
    border:1px solid #bbb;
  }
  .vote .title{
    padding: 5%;
  }

  .vote .contents{
    padding: 0% 3% 5% 3%;
  }

  .vote .picontents{
    padding: 3% 3% 0% 3%;
  }
  
  .vote .votework,.votework .up,.votework .photo,.votework .down,.votework .rows,.votework .identity,.votework .identity_name{
    float: left;
    width: 100%;
  }

  .vote .votework{
    width:90%;
    padding: 0% 0%;
    margin: 3% 5%;
    border:1px solid #bbb;
  }
  
  .votework .down{
    padding: 8% 6% 4% 6%;
  }
  
  .votework .rows{
    margin: 2% 0;
  }
  .vote .identity{
    width: 20%;
    height: 48px;
    border-radius:50px; 
    overflow: hidden;
  }

  .vote .identity img{
    border-radius:50px; 
  }

  .vote .identity_name{
    width: 80%;
    line-height: 20px;
    font-size: 15px;
    padding: 0 0 0 1% ;
  }
  .vote .main{
    color: #000;
    line-height: 20px;
  }
  .vote .talks{
    color: #000;
    line-height: 18px;
  }
  .vote .votebtn{
    margin:7% 0 0 0;
  }

  .vote .nums{
    text-align: right;
    padding: 0 5%;
    line-height: 35px;
  }
  .vote .all h3{
    color: #3cc5fc;
    margin: 6% 0;
    letter-spacing: 1px;
  }
  .vote .all p{
    font-size: 13px;
    color: #444;
  }
  .vote .all a{
    color: #222;
    text-transform:uppercase;
    -o-transition:color .2s linear,background .2s linear;
    -webkit-transition:color .2s linear,background .2s linear;
    -moz-transition:color .2s linear,background .2s linear;
    transition:color .2s linear,background .2s linear
  }

  .vote .all a:hover{
    color: #3cc5fc;
    cursor: pointer;
  }

  .vote .all .login{
    margin: 0% auto;
    padding: 2% 6%;
    background: #3cc5fc url(../images/login.png) right center no-repeat;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    float: none;
    width: 80%;
  }

  .vote .all .login a{
    color: #fff;
  }

  .vote .all .login a:active{
    background: none;
    outline: 0px;
  }

  .citys ul{
    width: 100%;
    float:left;
  }

  .citys ul li{
    float:left;
    width: 19%;
    padding: 3% 1%;
    margin: .1% 0;
    text-align: center;
    /*height:50px;*/
    border:1px solid #fff;
    font-size: 14px
  }

  .citys ul li:hover{
    cursor: pointer;
    color:#3cc5fc;
  }

  .citys .active{
    border:1px solid #3cc5fc;
  }

  /*投票內容*/
  .voteinfo,.voteinfo .rows,.infotopic,.infowords,.picsall,.smapic{
    float:left;
  }

  .voteinfo,.voteinfo .rows{
    float:left;
    width: 100%;
  }
  
  .describe{
    padding: 5% 5% 5% 5%;
    width: 60%
  }
  
  .describepic{
    background-color: #ccc;
    float: right;
  }
  
  .five .describepic{/*有5張小圖*/
    width: 100%;
    float: right;
  }

  .five .describepic .smapic{
    width: 50%;
    margin: -1px 0;
  }

  .four .describepic{/*有3-4張小圖*/
    width: 60%;
    float: right;
  }

  .four .describepic .smapic {/*有3-4張小圖*/
    width: 50%;
  }

  
  .infotopic{
    font-size: 18px;
    color: #754c24;
    padding: 0% 0% 0% 0%;
    margin: 2% 0;
    line-height: 22px;
  }

  .infowords{
    font-size: 14px;
    line-height: 18px;
    margin: 2% 0;
  }

  .picsall{
    padding: 2% 0% 2% 6%;
    width: 40%;
  }

  .auth{
    float:left;
    width: 100%;
    font-size: 14px;
  }

  .auth img{
    vertical-align:middle;
  }

  .auth .identity{
    border-radius: 50px;
  }

  .authvote .nums p{
    text-align: right;
  }
  .authbox{
    padding: 0 0% 2% 5%;
  }
  .authbox .right{
    float: right;
    margin:4% 0 0 0;
  }
  .authbox .po-2x{
    width: 100%;
  }
  .authbox .po-3x{
    width: 100%;
  }


/*頁數
----------------------------------------------------------*/
.pageschange{
  width: 100%;
  float: right;
  /*background-color: #F00;*/
  margin: 0 0 0 0%
}

.pagescontent{
  padding: 0% 3% 5% 3%;
  margin: 1% 0 2% 0;
  float: right;
}
.pages{
  float: left;
  border:1px solid #ccc;
  padding: 1% 1.5%;
  margin:0 .8%;
  font-size: 12px;
  color: #999;
}

.pages:hover{
  cursor: pointer;
  border: 1px solid #3cc5fc;
  color: #3cc5fc;
}


@media only screen and (min-width: 420px) {

  .tools{
    width: 25%;
    padding: 0% 0 0 0;
    margin: 1.6%  0 0 0;
  }

  .logo{
    width: 45%;
  }

  .vote .votework{
    width:49%;
    padding: 0% 0%;
    margin: 3% .5%;
    border:1px solid #bbb;
  }
  .authbox .po-2x{
    width: 50%;
  }
  .authbox .po-3x{
    width: 50%;
  }

 

}


@media only screen and (min-width:600px) {
  
  .maintop{
    width: 100%;
    position: relative;
  }
  .logo{
    padding: 1% 0;
    /*width: 50%;*/
  }
  
  /*TOOLS(活動辦法)*/
  .tools{
    width: 27%;
    padding: .6% 0 0 0;
    margin: 1%  0 0 0;
  }
  .toolsbtn{
    width: auto;
    height: auto;
    padding:4% 8%;
    margin:0px 1%;
    line-height: 24px;
  }

  .toolsbtn a{
   /* color:#3cc5fc;*/
    font-size: 20px;
  }

  .publish-mobile p{ 
    font-size: 18px;
  }
  .publish-mobile .topic{
    font-size: 24px;
  }
  
/*作品集
-------------------------------------------*/

  .portfolio .all .po-4x{
    width: 66.5%
  }

  .portfolio .all .po-2x{
    width: 33.5%
  }
  .portfolio .all .po-1x{
    width: 21.5%;/*15.5*/
  }
  .portfolio .all .mobile .po-5x{
    width:91%;
    margin: 0 0 5% 0;
  }

  .portfolio .contents{
    padding: 5%;
  }
  
  .portfolio .actor{
    padding: 12% 5%!important;
  }
  .portfolio .all .names{
    font-size: 30px;
    font-weight:lighter;
    line-height: 31px;
    text-align: right;
    padding: 0 8% 0 0 ;
    color: #754c24;
  }

  .portfolio .all p{
    margin: 4% 0;
    font-size: 14px;
    line-height: 20px;
  }
   .portfolio .person p{
    margin: 0 0;
  }

   .mobile .po-5x p{
    margin:0 0 ; 
   }

  .tininfo,.tininfo-2x{
    font-size: 14px!important;
    -webkit-transform:scale(1);
  }

  /*footer
  ---------------------------*/
  .footer .info,.footer .infosec2{
    margin: 5% 0;
  }


  .vote .votework{
    width:43.5%;
    margin: 2% 3%;
  }
   
  .vote .all p{
    font-size: 15px;
  }

  .location span{
    font-size: 22px;
    font-weight: bold;
  }
   .vote .all .login{
    margin: 0% auto;
    padding: 2% 6%;
    width: 55%;
  }
  .citys ul li{
    font-size: 20px
  }
  .vote .main{
    color: #000;
    line-height: 25px;
  }

  .vote .searchs fieldset{
    width: 80%;
  }

  .voteinfo,.voteinfo .rows{
    float:left;
    width: 100%;
  }
  
  .describe{
    padding: 5% 5% 5% 5%;
    width: 60%
  }
  
  .describepic{
    background-color: #ccc;
    float: right;
  }
  
  .five .describepic{/*有5張小圖*/
    width: 100%;
    float: right;
  }

  .five .describepic .smapic{
    width: 50%;
    margin: -1px 0;
  }

  .four .describepic{/*有3-4張小圖*/
    width: 60%;
    float: right;
  }

  .four .describepic .smapic {/*有3-4張小圖*/
    width: 50%;
  }

  .publish .all .login{
    width: 50%;
  }

  .infotopic{
    font-size: 18px;
    color: #754c24;
    padding: 0% 0% 0% 0%;
    margin: 2% 0;
    line-height: 22px;
  }

  .infowords{
    font-size: 14px;
    line-height: 18px;
    margin: 2% 0;
  }

  .picsall{
    padding: 2% 0% 2% 6%;
    width: 40%;
  }

  .auth{
    float:left;
    width: 100%;
    font-size: 14px;
  }

  .auth img{
    vertical-align:middle;
  }

  .auth .identity{
    border-radius: 50px;
  }

  .authvote .nums p{
    text-align: right;
  }
  .authbox{
    padding: 0 0% 2% 5%;
  }
  .authbox .right{
    float: right;
    margin:4% 0 0 0;
  }
  .authbox .po-2x{
    width: 50%;
  }
  .authbox .po-3x{
    width: 50%;
  }

  .pageschange{
    width: 70%;
    margin: 0 0 0 30%
  }

  .pagescontent{
    padding: 0% 3% 5% 3%;
    margin: 1% 0 2% 0;
  }

  .pages{
   
    padding: 1% 1.5%;
    margin:0 1.25%;
  }
  

  

}




@media only screen and (min-width:900px) {

  /*logo*/
  .logo{
    width: 29%;
    padding: 0% 0 0 0;
    margin: 0 auto;
    float: none;
  }

  .maintop{
    padding: .3% 0;
    border-bottom: 0px solid #ccc;
  }

  /*TOOLS(活動辦法)*/
  .tools{
    width: 15%;
    padding: 0% 0 0 0;
    margin: 1% 0 0 0;
    float: none;
    position: absolute;
    right: 0%;
  }

  .toolsbtn{
    width: 50px;
    height: 50px;
    border-radius: 40px;
    padding:4px 8px 8px 8px;
    margin:0px 1%;
    line-height: 14px;
    background: #3cc5fc;
  }

  .toolsbtn,.tool-fb{
    border: 2px solid #3cc5fc;
  }

  .toolsbtn a{       
    font-size: 13px;
  }

  .toolsbtn,.toolsbtn .tool-fb a{
    font-size: 28px;
  }
  
  .tool-fb{
    line-height: 32px;
  }

  .tool-fb h5{
    font-size: 28px;
  }

  .footer .info,.footer .infosec2{
    font-size: 12px;
  }
  .footer .info{
    padding: 0% 0%;
  }
  .footer .infosec2{
    padding: 0% 17%;
  }

/*我要投稿
--------------------------------------------------*/
  .publish .contents{
    padding: 5% 3%;
  }

  .publish .picontents{
    padding: 3% 3%;
  }
  
  .publish .all .login{
    width: 80%;
  }

  /*投票
--------------------------------------------------*/
  .vote .contents{
    padding: 5% 3.5%;
  }

  .vote .picontents{
    padding: 3% 3%;
  }
  
  .vote .all .login{
    width: 40%;
  }

  .vote .votework{
    width:24%;
    margin: 2% .5%;
    line-height: 20px;
  }
  .vote .identity_name{
    width: 80%;
    line-height: 18px;
    font-size: 15px;
    padding: 0 0 0 1% ;
  }
  .votework .down{
    padding: 8% 5% 4% 5%;
  }
  .vote h4{
    font-size: 16px;
  }
  
  .citys,.maps{
    width: 100%;
    float:left;
  }

  .citys ul li{
    float:left;
    width: 19%;
    padding: 2.5%;
    text-align: center;
    /*height:50px;*/
    border:1px solid #fff;
     font-size: 16px
  }


  .maps{
    background-size:100%;
    background-repeat:no-repeat; 
    height:400px;
    background-image:url(../images/vote/m0.jpg);
  }

  .t1{
    background: #f00;
  }

  .t2{
    background: #FF0;
  }

  
  .vote .all p{
    font-size: 12.85px;
  }

  .vote .main{
    line-height: 20px;
  }

  /*投票作品內容*/
  .voteinfo,.voteinfo .rows{
    float:left;
    width: 100%;
  }
  
  .describe{
    padding: 5% 5% 5% 5%;
    width: 50%;
  }
  
  .describepic{
    background-color: #ccc;
    float: right;
  }
  
  .five .describepic{/*有5張小圖*/
    width: 100%;
    float: right;
  }

  .five .describepic .smapic{
    width: 33.3%;
    margin: -1px 0;
  }

  .four .describepic{/*有3-4張小圖*/
    width: 60%;
    float: right;
  }

  .four .describepic .smapic {/*有3-4張小圖*/
    width: 50%;
  }

  
  .infotopic{
    font-size: 18px;
    color: #754c24;
    padding: 0% 0% 0% 0%;
    margin: 2% 0;
    line-height: 22px;
  }

  .infowords{
    font-size: 14px;
    line-height: 18px;
    margin: 2% 0;
  }

  .picsall{
    padding: 2% 0% 2% 6%;
    width: 50%;
  }

  .auth{
    float:left;
    width: 100%;
    font-size: 14px;
  }

  .auth img{
    vertical-align:middle;
  }

  .auth .identity{
    border-radius: 50px;
  }

  .authvote .nums p{
    text-align: right;
  }
  .authbox{
    padding: 0 0% 2% 5%;
  }
  .authbox .right{
    float: right;
    margin:4% 0 0 0;
  }
  .authbox .po-2x{
    width: 50%;
  }

  .pageschange{
    width: 85%;
    margin: 0 0 0 15%
  }

  .pagescontent{
    padding: 0% 3% 5% 3%;
    margin: 1% 0 2% 0;
  }

/*作品集
------------------------------------------------*/
  
  
  .portfolio .person{
    padding: 2%;
  }
 
  .portfolio .job{
    background: #754c24;
    color: #fff;
    padding:5px 5px 30px 10px;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    width: 15%!important;
  }
  .portfolio .topic{
    /*width: 88%;*/
    padding: 50% 30% 10% 10%;
    margin: 6% 0 0 0; 
    background:#3cc5fc;
    float: left;
    color: #fff;
    font-size:18px; 
  }
  .portfolio .all .po-1x{
    width: 15.5%;/*15.5*/
  }
  .portfolio .all .names{
    font-size: 26px;
    line-height: 30px;
    padding: 0 8% 0 0 ;
  }

  .borlef{
    border:0px;
  }
  .borlef span{
    width: 100%;
    float: left;
    margin: 1% 0;
    padding: 0 0 0 4%;
    background: url(../images/portfolio/dots.jpg) 0 5px no-repeat; 
  }

}

/*@media only screen and (min-width: 1280px) {

}*/
@media only screen and (min-width: 1200px) {
  /*logo*/
  .logo{
    width: 21%;
  }
  .footer .info,.footer .infosec2{
    font-size: 14px;
  }
  .tools{
    margin: .5% 0 0 0;
  }

  .publish .all .login{
    width: 65%;
  }

/*投票
--------------------------------------------------------------*/
  .vote .votework{
    width:24%;
    margin: 2% .5%;
  }
  
  .votework .down{
    padding: 8% 4% 4% 4%;
  }

  .vote .identity_name{
    line-height:50px;
    font-size: 14px;
    padding: 0 0 0 1% ;
  }

  .vote .nums{
    text-align: right;
    padding: 0 5%;
    line-height: 27px;
  }

  .maps{
    height:500px;
  }

  .pageschange{
    width: 80%;
    margin: 0 0 0 20%
  }

  .pagescontent{
    padding: 0% 0% 5% 3%;
    margin: 1% 0 2% 0;
  }

/*作品集
---------------------------------------------*/
  .portfolio .job{
    padding:5px 5px 30px 10px;
    font-size: 16px;
    line-height: 28px;
    width: 15%!important;
  }
  .portfolio .topic{
    /*width: 88%;*/
    padding: 50% 30% 10% 10%;
    margin: 15% 0 0 0; 
    background:#3cc5fc;
    float: left;
    color: #fff;
    font-size:18px; 
  }
  .portfolio .all .names{
    font-size: 26px;
    line-height: 32px;
    padding: 0 8% 0 0 ;
  }

}

/*# sourceMappingURL=style.css.map */
@media only screen and (min-width: 1366px) {
 
  .maps{
    height:500px;
  }

  .portfolio .job{
    width: 15.5%!important;
    padding:5px 5px 32px 10px;
  }
  .portfolio .topic{
    padding: 50% 30% 10% 10%;
    margin: 6px 0 0 0; 
  }
  .portfolio .all p{
    font-size: 13px;
    line-height: 22px;
  }
}

@media only screen and (min-width: 1440px) {
   
/*投票
--------------------------------------------------------------*/
  .pagescontent{
    padding: 0% .5% 5% 3%;
    margin: 1% 0 2% 0;
  }

}
@media only screen and (min-width: 1600px) {
   /*TOOLS(活動辦法)*/
  .tools{
    width: 10%;
  }

  .portfolio .topic{
    /*width: 88%;*/
    padding: 50% 30% 10% 10%;
    margin: 0% 0 0 0; 
  }

  .portfolio .job{
    width: 13%!important;
     padding:5px 5px 34px 10px;
  }

/*投票
--------------------------------------------------------------*/
  .votework .down{
    padding: 8% 7% 4% 7%;
  }

  .vote .identity_name{
    line-height:50px;
  }
  
  .maps{
    height:570px;
  }

  .pagescontent{
    padding: 0% 0% 5% 3%;
    margin: 1% -1% 2% 0;
  }
}