@charset "utf-8";
/* CSS Document */
/* --------------------------------------
 * Layout.css
 * -------------------------------------- */



/* --------------------------------------
 * RWD投票主頁
 * -------------------------------------- */

/*分享icon偏移
.Area_topshare { right: 13vw;}*/

.Area_top .btn_more { display: none!important;}




/* --------------------------------------
 * RWD排行榜
 * -------------------------------------- */



/*可拖移廣告icon*/
.Area_hammerAD { z-index: 300; position: fixed; bottom: -130px; right: 0;/* width: 25%;*/ transform: translate3d(0,100px,0); /*background-color: rgba(0,0,0,0.5);*/}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 90%; height: auto;}
.Area_hammerAD .closeButton a { display:block; cursor:pointer; position:absolute; top: 1vw; right: 1vw; width:20px; height:20px; border-radius:50%; font:bold 20px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5); text-decoration: none; z-index:2}
  @media screen and (max-width:767px){ 
    .Area_hammerAD { width: 23%; bottom: 0;}

}













/*排行榜*/
.Area_toplist { margin-top: 50px;}
    @media screen and (max-width:767px){
      .Area_toplist { margin-top: 5vw;}
    }
    /*篩選按鈕*/
    .Area_toplist .box_tab { }
        @media screen and (max-width:767px){
          .Area_toplist .box_tab { margin: 3vw 0;}
        }
    /*卡片樣式*/
    .Area_toplist .box_cards { padding: 20px;}
    .Area_toplist .box_cards ul { margin: 0; padding: 0; list-style: none;}
    .Area_toplist .box_cards ul:after { content: ""; display: block; clear: both;}
    .Area_toplist .box_cards li { float: left; z-index: 0; position: relative; margin: 0; margin-bottom: 20px; box-sizing: border-box; overflow: hidden; width: 1180px; height: 120px; text-align: left; background-color: #fff; letter-spacing: -0.1rem;
                                      -webkit-transition: all 0.3s ease;
                                         -moz-transition: all 0.3s ease;
                                          -ms-transition: all 0.3s ease;
                                           -o-transition: all 0.3s ease;
                                              transition: all 0.3s ease;}  
    .Area_toplist .box_cards li:hover { box-shadow: 0 0 14px rgba(0,0,0,0.3);}
    .Area_toplist .box_cards li:after  { content: ""; pointer-events: none; z-index: -1; position: absolute; top: 0; left: 0; display: block; width: 16px; height: 100%; }
    .Area_toplist .box_cards .cardstyle_ a { display: block; padding: 10px;}
    .Area_toplist .box_cards .cardstyle_  h3 { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 160px; text-align: center; font-size: 50px; font-weight: 300; line-height: 120px; font-family:'Century Gothic';}
    .Area_toplist .box_cards .cardstyle_ .card_img { float: left; margin: 0 30px 0 150px; border-radius: 50%; overflow: hidden; width:100px; height: 0; padding-bottom: 100px; background-color: #f7f9fe; background-image: linear-gradient(0deg,#e4e8ea, #f4f7fb);}
    .Area_toplist .box_cards .cardstyle_ .card_img img { margin-top: -4%; margin-left: -49%; width:180%; height: auto;}
    .Area_toplist .box_cards .cardstyle_ h4 { margin: 0; padding:38px 0 10px 0; font-size: 32px; color: #484848;}
    .Area_toplist .box_cards .cardstyle_ h4 i:before {display: none; content: ""; display: block; font-style: normal; font-size: 24px; font-weight: 300; color: #7f7f7f;}
    .Area_toplist .box_cards .cardstyle_ h4 > span { }
    .Area_toplist .box_cards .cardstyle_ h4 b { font-size: 26px; font-weight: 800;}
    .Area_toplist .box_cards .cardstyle_ h4 b span { font-size: 36px; font-weight: 300; font-family:'Century Gothic';}

    .Area_toplist .box_cards .cardstyle_ h5 { margin: 0; padding: 10px 0 0 0; font-size: 24px; color: #484848;}
    /* .Area_toplist .box_cards .cardstyle_ h5 i:before { content: "ＯＯ王"; display: block; font-style: normal; font-size: 24px; font-weight: 300; color: #7f7f7f;} */
    .Area_toplist .box_cards .cardstyle_ h5 > span { }
    .Area_toplist .box_cards .cardstyle_ h5 b { font-size: 26px; font-weight: 800;}
    .Area_toplist .box_cards .cardstyle_ h5 b span { font-size: 36px; font-weight: 300; font-family:'Century Gothic';}


    .Area_toplist .box_cards .cardstyle_ h6 { position: absolute; top: 0; left: 630px; margin: 0; padding: 0; width: 270px; color: #e06e11; font-size: 24px; line-height: 120px; font-weight: 800; text-align: right;}
    .Area_toplist .box_cards .cardstyle_ h6 span { font-size: 60px; font-family:'Century Gothic'; letter-spacing: -0.1rem; font-weight: 300;}
    /*球隊樣式*/
    .Area_toplist .box_cards_for_tame .cardstyle_ .card_img img { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width:100%; height: auto;}
    .Area_toplist .box_cards_for_tame .cardstyle_ .card_btns { padding: 28px 64px 0;}
    /* .Area_toplist .box_cards_for_tame .cardstyle_ h4 i:before { content: "ＯＯ組";} */
        @media screen and (max-width:767px){
          .Area_toplist .box_cards { padding: 3%; margin-bottom: 20vw}
          .Area_toplist .box_cards li { margin-bottom: 3%; width: 100%; height: auto;}  
          .Area_toplist .box_cards li:after  { width: 8px;}
          .Area_toplist .box_cards .cardstyle_ a { padding: 5% 0;}
          .Area_toplist .box_cards .cardstyle_ h3 { top: 50%; transform: translateY(-50%); width: 16%; font-size: 6vw; line-height: 1;}
          .Area_toplist .box_cards .cardstyle_ .card_img { position: relative; margin: 0 3% 0 15%; width:25%; height: 0; padding-bottom: 25%;}
          .Area_toplist .box_cards .cardstyle_ .card_img img { margin-top: 0; margin-left: 0; width:100%; height: auto;}
          .Area_toplist .box_cards .cardstyle_ h4 { position: relative; margin: 0; padding: 0; font-size: 5vw; color: #484848;}
          .Area_toplist .box_cards .cardstyle_ h4 b {position: absolute;font-size: 5vw;top: 1vw;left: 65%;}
          .Area_toplist .box_cards .cardstyle_ h4 b span { font-size: 6vw;}
          
          .Area_toplist .box_cards .cardstyle_ h5 { position: relative; margin: 0; padding: 0; font-size: 4.5vw; color: #484848;}
          .Area_toplist .box_cards .cardstyle_ h5 b { font-size: 5vw;}
          .Area_toplist .box_cards .cardstyle_ h5 b span { font-size: 6vw;}
			
			
		.Area_toplist .box_cards .cardstyle_ h6 { position: relative; top: inherit; left: inherit; width: inherit; font-size: 5vw; line-height: 1; text-align: left;}
          .Area_toplist .box_cards .cardstyle_ h6 span { font-size: 9vw;}          
        }
        /*按鈕*/
        .Area_toplist .box_cards .cardstyle_ .card_btns { position: absolute; top: 0; right: 0; padding: 38px 64px 0; width: 160px; height: 120px;}
        .Area_toplist .box_cards .cardstyle_ .card_btns:after { content: ""; display: block; clear: both;}
        .Area_toplist .box_cards .cardstyle_ .card_btns h6 { margin: 0; padding: 0; color: #fff; font-size: 20px; font-weight: 300;}
        .Area_toplist .box_cards .cardstyle_ .card_btns h6 span { position: relative; top: 1px; margin-left: 5px; font-size: 38px; font-family:'Century Gothic'; letter-spacing: -0.1rem;}
        .Area_toplist .box_cards .cardstyle_ .card_btns .btn_ { float: left; margin: 0; width: 100%; text-align: center; background-color: #ffb229;}
        .Area_toplist .box_cards .cardstyle_ .card_btns .btn_:first-child { margin-left: 0;}
        .Area_toplist .box_cards .cardstyle_ .card_btns .btn_:hover { filter: brightness(120%);}
        .Area_toplist .box_cards .cardstyle_ .card_btns .btn_ a { display: block; font-size: 26px; line-height: 1.7; font-weight: 800; color: #fff;}
            @media screen and (max-width:767px){
        .Area_toplist .box_cards .cardstyle_ .card_btns {position: absolute;top: 62%;right: 6%;padding: 0;width: 23%;height: 20%;}
        .Area_toplist .box_cards .cardstyle_ .card_btns .btn_ a {  font-size: 5vw; line-height: 1.4;  }

}
    /*配色*/
    /* .Area_toplist .box_cards .cardstyle_A h4 i:before { content: "人氣王";} */
    .Area_toplist .box_cards .cardstyle_B:after,
    .Area_toplist .box_cards .cardstyle_B h4:before,
    .Area_toplist .box_cards .cardstyle_B .card_btns .btn_more { background-color: #ff5929;}
    .Area_toplist .box_cards .cardstyle_B h3 { color: #ff5929;}
    /* .Area_toplist .box_cards .cardstyle_B h4 i:before { content: "人氣后";} */
    .Area_toplist .box_cards .cardstyle_C:after,
    .Area_toplist .box_cards .cardstyle_C h4:before,
    .Area_toplist .box_cards .cardstyle_C .card_btns .btn_more { background-color: #298aff;}
    .Area_toplist .box_cards .cardstyle_C h3 { color: #298aff;}
    /* .Area_toplist .box_cards .cardstyle_C h4 i:before { content: "新人王";} */
    .Area_toplist .box_cards .cardstyle_D:after,
    .Area_toplist .box_cards .cardstyle_D h4:before,
    .Area_toplist .box_cards .cardstyle_D .card_btns .btn_more { background-color: #ff7617;}
    .Area_toplist .box_cards .cardstyle_D h3 { color: #ff7617;}
    /* .Area_toplist .box_cards .cardstyle_D h4 i:before { content: "新人后";} */
    /*球隊樣式*/
    /* .Area_toplist .box_cards_for_tame .cardstyle_A h4 i:before { content: "人氣王";}
    .Area_toplist .box_cards_for_tame .cardstyle_B h4 i:before { content: "人氣后";}
    .Area_toplist .box_cards_for_tame .cardstyle_C h4 i:before { content: "新人王";}
    .Area_toplist .box_cards_for_tame .cardstyle_D h4 i:before { content: "新人后";} */