.btnSearch { background: url(/Areas/GuildRank/common/img/btn_background.png) no-repeat; width: 32px; height: 32px; display: inline-block; vertical-align: middle; position: relative; margin: 0 2px; background-position: center; }
.btnSearch:hover:before { content: ''; width: 100%; height: 100%; display: inline-block; background: rgba(255,255,255,0.18); position: absolute; z-index: 10; border-radius: 4px; }
.btnSearch:active:before { background: rgba(0,0,0,0.18); }
.btnSearch img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
.btnSearch.active { background: url(/Areas/GuildRank/common/img/btn_background_active.png) no-repeat; }
.btnSearch.active:before { display: none; }

.btnSearch.sail { content: url(/Areas/GuildRank/common/img/icn_sail.png); background: none; }
.btnSearch.sail:hover { content: url(/Areas/GuildRank/common/img/icn_sail_hover.png); }
.btnSearch.sail:active, .btnSearch.sail.active { content: url(/Areas/GuildRank/common/img/icn_sail_active.png); top: -1px; left: -1px; }
.btnSearch.sail:hover:before { display: none; }
.btnSearch.sail:active:before { display: none; }
.btnSearch.sail img { display: none; }

#top { height: 40px; }
#top .area div { display: inline-block; vertical-align: middle; color: #cdbc9e; font-size: 14px; }
#top .area .item { float: left; overflow: hidden; }
#top .area .branch { float: right; overflow: hidden; }
#top .area .item > span,
#top .area .branch > span { margin-right: 10px; overflow: hidden; }
#top .area .item .buttonArea,
#top .area .branch .buttonArea { overflow: hidden; }

#container { height: calc(100% - 80px); }
#container .area { width: 100%; height: 100%; }
#container .area .content { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.3); height: calc(100% - 62px); position: relative; z-index: 1; }

#container .area .content .table.guildList { display: table; width: 100%; table-layout: fixed; }
#container .area .content .table.guildList .tcaption { display: table-caption; color: #cdcdcd; font-size: 13px; text-align: center; vertical-align: middle; height: 28px; line-height: 28px; background: rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,255,255,0.2); box-sizing: border-box; cursor: default; }
#container .area .content .table.guildList .thead { background: #201f1c; }
#container .area .content .table.guildList .thead .col { border: 1px solid white; border-right: 0; border-left: 0; border-top-color: rgba(0,0,0,0.5); border-bottom-color: rgba(255,255,255,0.11); color: #8f8f8f; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#container .area .content .table.guildList .row { height: 28px; }
#container .area .content .table.guildList .row .col > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; max-width: 100%; }
#container .area .content .table.guildList .tbody { background: rgba(0,0,0,0.6); }
#container .area .content .table.guildList .tbody .row { /*background: rgba(255,255,255,0.3);*/ cursor: pointer; }
#container .area .content .table.guildList .tbody .row.block { cursor: default; }
#container .area .content .table.guildList .tbody .row.block:hover { background: none; }
#container .area .content .table.guildList .tbody .row:hover { background: rgba(255,255,255,0.3); }
#container .area .content .table.guildList .tbody .row:hover .col[attr-data="C_guildName"] { color: white; }
#container .area .content .table.guildList .row .col.active { color: white !important; }
#container .area .content .table.guildList .row .col img { vertical-align: middle; }
#container .area .content .table.guildList .row .col[attr-data="C_guildName"] > span { width: inherit; }
#container .area .content .table.guildList .row .col[attr-data="C_masterUserNickname"] > span { max-width: calc(100%); width: 100%; }

#container .area .content .table.guildList .row .col[attr-data="rank"],
#container .area .content .table.guildList .row .col[attr-data="C_rank"] { width: 5%; }
#container .area .content .table.guildList .row .col[attr-data="guildName"],
#container .area .content .table.guildList .row .col[attr-data="C_guildName"] { width: 26%; position: relative; }
#container .area .content .table.guildList .row .col[attr-data="C_guildName"] span { width: calc(100% - 30px); }
#container .area .content .table.guildList .row .col[attr-data="guildMasterNickname"],
#container .area .content .table.guildList .row .col[attr-data="C_masterUserNickname"] { width: 13%; }

#container .area .content .table.guildList .row .col[attr-data="node"],
#container .area .content .table.guildList .row .col[attr-data="C_regionKey1"] { width: 8%; }
#container .area .content .table.guildList .row .col[attr-data="duelWarScore"],
#container .area .content .table.guildList .row .col[attr-data="C_guildBattleRating"] { width: 10%; }
#container .area .content .table.guildList .row .col[attr-data="duelWar"],
#container .area .content .table.guildList .row .col[attr-data="C_winCount"] { min-width: 8%; }
#container .area .content .table.guildList .row .col[attr-data="point"],
#container .area .content .table.guildList .row .col[attr-data="C_aquiredSkillPoint"] { width: 7%; }
#container .area .content .table.guildList .row .col[attr-data="personnel"],
#container .area .content .table.guildList .row .col[attr-data="C_memberCount"] { width: 11%; }
#container .area .content .table.guildList .row .col[attr-data="guildInfo"],
#container .area .content .table.guildList .row .col[attr-data="C_isIntroduction"] { width: 6%; }
#container .area .content .table.guildList .row .col[attr-data="comment"],
#container .area .content .table.guildList .row .col[attr-data="C_commentCount"] { width: 6%; }



#container .area .content .table.guildList .col { vertical-align: middle; height: 28px; text-align: center; color: #b8b8b8; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.2); box-sizing: border-box; padding: 0 3px; }
#container .area .content .table.guildList .tbody .col[attr-data="C_winCount"] { color: #00c0ff; }
#container .area .content .table.guildList .tbody .col[attr-data="C_guildName"] { text-align: left; padding-left: 10px; }
#container .area .content .table.guildList .tbody .col[attr-data="C_guildName"] img { width: 20px; height: 20px; vertical-align: middle; margin-right: 5px; border: 1px solid #666; display: inline-block; box-sizing: border-box; /* position: absolute; */ /* top: 3px; */ /* left: 10px; */ }
#container .area .content .table.guildList .col.new { color: #d8ba60; }
#container .area .content .scroll { height: calc(100% - 27px); position: relative; }
#container .area .content .scroll::-webkit-scrollbar { width: 13px; }
#container .area .content .scroll .popup { position: fixed; background: rgba(0,0,0,0.9); box-sizing: border-box; border-radius: 5px; color: white; font-size: 12px; width: 320px; min-height: 70px; padding: 10px; }
#container .area .content .scroll .popup table { width: 100%; border-spacing: 0; }
#container .area .content .scroll .popup table td { line-height: 20px; }
#container .area .content .scroll .popup table td img { width: 50px; height: 50px; border: 1px solid orange; }


#container .area .paging { }


#bottom { height: 40px; }
#bottom .area { height: 37px; background-color: rgba(0,0,0,0.5); border-radius: 5px; width: 100%; height: 100%; display: table; padding: 0 10px; box-sizing: border-box; }
#bottom .area > span { color: #5f5f5f; font-size: 13px; display: table-cell; vertical-align: middle; min-width: 435px; width: 55%; }
#bottom .area > .searchArea { display: table-cell; vertical-align: middle; text-align: right; }
#bottom .area > .searchArea .search { height: 26px; padding: 0; margin: 0; border: 0; box-sizing: border-box; background-color: #222528; border: 1px solid #4d5458; border-radius: 3px; font-size: 12px; padding: 5px; color: #a1a1a1; }
#bottom .area > .searchArea .search.comboBox { min-width: 100px; display: inline-block; vertical-align: middle; text-align: left; position: relative; }
#bottom .area > .searchArea .search.comboBox:after { content: ''; width: 9px; height: 7px; position: absolute; background: url(/Areas/GuildRank/common/img/icn_arrow.svg) no-repeat; right: 6px; top: 9px; background-size: 9px 7px; }
#bottom .area > .searchArea .search.comboBox ul { position: fixed; bottom: 45px; right: 290px; box-sizing: border-box; background-color: #222528; border: 1px solid #4d5458; border-radius: 3px; font-size: 12px; color: #a1a1a1; text-align: left; min-width: 100px; z-index: 1; }
#bottom .area > .searchArea .search.comboBox ul li { display: block; padding: 5px 10px 7px; }
#bottom .area > .searchArea .search.comboBox ul li:hover { background-color: rgba(255,255,255,0.1); color: white; }
#bottom .area > .searchArea .search.comboBox span { padding-right: 15px; }
#bottom .area > .searchArea .search.text { width: 50px; }
#bottom .area > .searchArea .search.btn { min-width: 73px; line-height: 26px; padding: 0 5px; width: auto; color: #d1d1d1; background: #1c2d3f; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,.2)); text-shadow: 0 1px 1px rgba(0,0,0,1); border: none; }
#bottom .area > .searchArea .search.btn:before { background: transparent; }
#bottom .area > .searchArea .search.btn:hover:before { background: rgba(255,255,255,0.1); }
#bottom .area > .searchArea .search.btn:active:before { background: rgba(0,0,0,0.1); }
#bottom .area > .searchArea .search.btn:after { display: none; }

#paging { margin: 16px auto 18px; }
#paging > div:not(.disabled) { color: #B9B9B9; background-color: #5F5F5F; }
#paging > div.active { color: #000; background-color: #eee; }
#paging > div:not(.disabled):hover { color: #000; background-color: #eee; }
#paging div.arrow_left.disabled, #paging div.arrow_right.disabled, #paging div.arrow_first.disabled, #paging div.arrow_last.disabled { cursor: default; background-color: #A0A0A0; }

@media screen and (max-width: 3003px) {
    html { zoom: 2.5; }
}

@media screen and (max-width: 2002px) {
    html { zoom: 2; }
}

@media screen and (max-width: 1335px) {
    html { zoom: 1.5; }
}

@media screen and (max-width: 890px) {
    html { zoom: 1; }
}