@charset "utf-8";

/* All **********************************************************************/

.gb-subTop {

    position: relative;

    background: url(img/sub_topBG.jpg) no-repeat center bottom;

    border-top: 3px solid #ffcb47;

    min-height: 289px;

    color: #fff;

    z-index: 0;

}

.gb-subTop h1 {

    position: absolute;

    margin-top: 13px;

    left: 50%;

    margin-left: -63px;

    display: inline-block;

    zoom: 1.1;

    *display: inline;

    z-index: 1000;

    background: url(img/gunbound_logo1.png) no-repeat top center;

    background-size: 100%;

    width: 130px;

    height: 115px;

    z-index: 999;

}

.gb-subTop h1 > a {

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 130px;

    height: 115px;

}



.gb-subTop h2 {

    margin-top: 140px;

    text-shadow: 0 0 5px #000, 0 0 5px #000; /* For IE 8 */

    *text-shadow: none;

    *filter: none;

    color: #fff;

}

.gb-subTop p {

    margin-top: 15px;

    color: #fff;

}



.after_login p.search {

    position: relative;

    display: inline-block;

    zoom: 1;

    *display: inline;

    background: #fff;

    width: 90%;

    padding: 4px 2% 6px;

    height: 43px;

    border: 3px solid #999;

    border-radius: 30px;

    overflow: hidden;

    *margin-top: 3px;

}

.after_login p.search .txt {

    float: left;

    border: 0;

    width: 180px;

    height: 16px;

    font-size: 16px;

    font-size: 1.6rem;

    margin: -5px 0;

    padding: 20px 0;

}

.after_login p.search .btn {

    position: absolute;

    top: 0;

    right: -2px;

    width: 100px;

    height: 60px;

    color: #fff;

    background: #999;

    font-family: Impact, Charcoal, sans-serif;

    font-size: 22px;

    font-size: 2.2rem;

    text-transform: uppercase;

    margin: -5px 0;

}



/* Sub Default */

.sub_area {

    padding: 0 !important;

    margin: 0 !important;

    text-align: left;

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 100%;

}

.sub_area > div > * {

    margin: 0 2%;

    width: 96%;

    padding-bottom: 40px;

}

h3 {

    font-family: Impact, Charcoal, sans-serif;

    font-size: 48px;

    font-size: 4.8rem;

    text-transform: uppercase;

    padding: 70px 0 40px;

    border-bottom: none;

}

h3 > em {

    color: #ff3030;

}



.sub_area h4 {

    clear: both;

    display: inline-block;

    zoom: 1;

    *display: inline;

    font-size: 20px;

    font-size: 2rem;

    padding-top: 50px;

    color: #960;

}

.sub_area h4 img {

    vertical-align: -2px;

}

.sub_area h5 {

    font-size: 16px;

    font-size: 1.6rem;

    margin-bottom: 10px;

    letter-spacing: -0.05em;

}

.small {

    font-size: 0.8em;

    font-weight: normal;

    color: #666;

}



.sub_area a {

    color: #666;

}

.sub_area a:hover {

    color: #ffffff;

}



.tabmenu ul {

    margin-top: 20px;

}

.tabmenu li {

    background: #fff;

    border: 1px solid #666;

    border-radius: 5px;

    margin-right: 10px;

    margin-bottom: 10px;

}

.tabmenu li:hover,

.tabmenu li.on {

    background: #c00;

    border: 1px solid #c00;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -ms-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}

.tabmenu li a:hover,

.tabmenu li.on,

.tabmenu li.on a {

    color: #fff;

}

.tabmenu li a {

    display: block;

    padding: 7px 10px 5px;

    color: #333;

}



.tabmenu li.on {

    position: relative;

    background: #c00;

    border: 1px solid #c00;

}

.tabmenu li.on:after,

.tabmenu li.on:before {

    top: 100%;

    left: 50%;

    border: solid transparent;

    content: "";

    height: 0;

    width: 0;

    position: absolute;

    pointer-events: none;

}

.tabmenu li.on:after {

    border-color: rgba(204, 0, 0, 0);

    border-top-color: #c00;

    border-width: 10px;

    margin-left: -10px;

}

.tabmenu li.on:before {

    border-color: rgba(204, 0, 0, 0);

    border-top-color: #c00;

    border-width: 11px;

    margin-left: -11px;

}



.tabSub ul {

    padding: 20px 0 10px;

    text-align: center;

    border-bottom: 1px dashed #ccc;

    border-top: 1px dashed #ccc;

}

.tabSub li {

    background: #e4e4e4;

    border: 1px solid #666;

    border-radius: 5px;

    margin-right: 10px;

    margin-bottom: 10px;

}

.tabSub a {

    padding: 7px 10px 5px;

    display: block;

}

.tabSub li:hover,

.tabSub li.on {

    background: #e4e4e4;

    border: 2px solid #c00;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -ms-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}

.tabSub li a:hover,

.tabSub li.on a {

    color: #c00;

}

.tabSub li.on {

    position: relative;

    background: #e4e4e4;

    border: 2px solid #c00;

    font-weight: bold;

}



.content {

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 100%;

    padding-bottom: 40px;

}

.content:after {

    content: "";

    display: block;

    clear: both;

} /* float? ???? ?? */



/* Ranking */

.ranking_top3,

.clan_top3 {

    display: none;

}

.ranking,

.clan {

    position: relative;

}

.rank_search {

    position: inherit;

}



.ranking ul {

    padding: 40px 0 20px;

    height: 20px;

}

.ranking li {

    float: left;

    margin-right: 10px;

}

.ranking li:after {

    content: "|";

    color: #ccc;

    padding-left: 5px;

}

.ranking li:last-child:after {

    content: "";

}

.ranking li.on a {

    color: #c00;

}



.myInfo_tab {

    position: relative;

}

.myInfo_tab ul {

    padding: 40px 0 20px;

}

.myInfo_tab li {

    float: left;

    margin-right: 10px;

}

.myInfo_tab li:after {

    content: "|";

    color: #ccc;

    padding-left: 5px;

}

.myInfo_tab li:last-child:after {

    content: "";

}

.myInfo_tab li.on a {

    color: #c00;

}



.myInfo_tab .small_btn {

    margin: 0;

    padding: 40px 0 20px;

    position: absolute;

    top: 0;

    right: 0;

}



.classic_server {

    padding: 20px 0;

    font-size: 28px;

    font-size: 2.8rem;

}

.classic_server a {

    float: left;

    margin-right: 10px;

}

.classic_server a:after {

    content: "|";

    color: #ccc;

    padding-left: 5px;

}

.classic_server a:last-child:after {

    content: "";

}

.classic_server a.on {

    color: #c00;

}



#divCountryList select {

    min-width: 250px;

    width: 30%;

    height: 40px;

    font-size: 1em;

    margin-bottom: 10px;

}



/* Basic Table */

.basic_tb {

    margin: 20px 0;

    display: inline;

    font-size: 0.7em;

}

.ranking table,

.basic_tb table {

    width: 100%;

}

.basic_tb table {

   border-top: 2px solid #faa200;

    border-bottom: 2px solid #faa200;

}

.ranking table th,

.basic_tb table th {

    background: url(img/tableBG_th.jpg) repeat center top;

    border-bottom: 2px solid #960;

    text-align: center;

    padding: 15px 10px 12px;

}

.ranking table td,

.basic_tb table td {

    

    padding: 10px;

    border-bottom: 1px solid #ededed;

}

.ranking table img,

.myInfo img,

.basic_tb table img {

    vertical-align: -1px;

}

.ranking .rank img,

#spRTotal img {

    vertical-align: 4px;

    margin: 0 0 0 4px;

}

.basic_tb table td {

    padding: 0 10px;

    height: 40px;

}

table td.rank1 img,

table td.rank2 img,

table td.rank3 img,

table td.rank4 img,

table td.rank5 img,

table td.rank6 img,

table td.rank7 img,

table td.rank8 img,

table td.rank9 img,

table td.rank10 img {

    margin-left: 60px;

}

table td.rank1 {

    background: url(img/ranking_top10.gif) no-repeat center 2px;

}

table td.rank2 {

    background: url(img/ranking_top10.gif) no-repeat center -36px;

}

table td.rank3 {

    background: url(img/ranking_top10.gif) no-repeat center -74px;

}

table td.rank4 {

    background: url(img/ranking_top10.gif) no-repeat center -112px;

}

table td.rank5 {

    background: url(img/ranking_top10.gif) no-repeat center -148px;

}

table td.rank6 {

    background: url(img/ranking_top10.gif) no-repeat center -184px;

}

table td.rank7 {

    background: url(img/ranking_top10.gif) no-repeat center -220px;

}

table td.rank8 {

    background: url(img/ranking_top10.gif) no-repeat center -254px;

}

table td.rank9 {

    background: url(img/ranking_top10.gif) no-repeat center -292px;

}

table td.rank10 {

    background: url(img/ranking_top10.gif) no-repeat center -328px;

}



.basic_tb input[type="text"],

.basic_tb input[type="password"] {

    border: 1px solid #999;

    min-width: 120px;

    width: 90%;

    max-width: 670px;

    height: 18px;

    padding: 3px 5px;

    margin: 5px 0;

}

.basic_tb textarea {

    min-width: 120px;

    width: 90%;

    max-width: 680px;

    padding: 3px 5px;

    height: 100px;

    margin: 5px 0;

}

.basic_tb table th {

    border-bottom: 1px solid #ededed;

}

.basic_tb table caption {

    font-size: 18px;

    font-size: 1.8rem;

    text-align: left;

    padding: 10px 0 10px 20px;

    font-weight: bold;

}



.basic_tb li {

    display: inline-block;

    zoom: 1;

    *display: inline;

    margin-right: 10px;

    padding: 10px 5px;

}

.basic_tb li span {

    font-weight: bold;

    color: #333;

}

.basic_tb li:after {

    content: "|";

    color: #ccc;

    padding-left: 5px;

}

.basic_tb li:last-child:after {

    content: "";

}



.like_btn i {

    background: url(img/btn_like.gif) no-repeat -37px 0;

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 25px;

    height: 30px;

    cursor: pointer;

}

.like_btn .like i {

    background: url(img/btn_like.gif) no-repeat 0 6px;

}



.mobile_tb > table {

    width: 100%;

    min-width: 280px;

}



.comment_area {

    background: #f0f0f0;

    padding: 20px 10px;

}

.comment_area textarea {

    width: 95%;

}

.comment_area ul.list {

    position: relative;

    border-bottom: 1px solid #ccc;

    min-height: 50px;

}

.comment_area ul.list > li {

    margin-right: 20px;

    min-width: 200px;

    vertical-align: top;

}

.comment_area ul.list > li.date {

    color: #999;

    font-size: 11px;

    font-size: 1.1rem;

}

.comment_area ul.list > li.btn_close {

    position: absolute;

    top: 10px;

    right: 10px;

    float: right;

    color: #999;

    font-size: 11px;

    font-size: 1.1rem;

    cursor: pointer;

    min-width: 10px;

    margin-right: 0;

}

.comment_area img,

.basic_tb img {

    vertical-align: -2px;

}

.comment {

    max-width: 700px;

    height: 60px;

    -webkit-box-orient: vertical;

    word-break: break-all;

    -webkit-line-clamp: 3; /* text line */

    line-height: 1.2em;

    height: 3.6em; /* line-height 1.2em * 5 = 6em */

    overflow: hidden;

    text-overflow: ellipsis;

    -o-text-overow: ellipsis;

    -moz-binding: url(/js/ellipsis.xml#ellipsis) undefinedundefinedundefined;

}



/* Ranking */

.ranking .rank {

    width: inherit;

}

.ranking .name,

.basic_tb .left {

    text-align: left;

}

.ranking .mobile,

.basic_tb .mobile {

    display: none;

}



.interRank {

    display: none;

}



.myInfo {

    width: 100%;

    margin-top: 80px;

    *margin-top: 60px;

    background: #efefef url(img/myInfo_bg.jpg) no-repeat center top;

}

.myInfo h4 {

    background: #960 url(img/myInfo_titleBG.jpg) no-repeat left top;

    text-align: center;

    padding: 15px 0 12px;

    color: #fff;

    width: 100%;

}

.myInfo h5 {

    color: #960;

}

.myInfo p {

    text-align: center;

    padding: 0 10px 12px;

}

.myInfo p.name {

    padding: 25px 10px 12px;

}

.myInfo ul {

    padding-left: 5%;

}

.myInfo li {

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 40%;

    margin-right: 5%;

    margin-bottom: 10px;

    vertical-align: top;

}



.ranking_tb_page {

    text-align: center;

    padding-top: 10px;

}

.ranking_tb_page > li {

    display: inline-block;

    zoom: 1;

    *display: inline;

    float: inherit !important;

    padding: 10px 2px;

    margin: 0 !important;

    background: none !important;

    width: inherit !important;

    *width: 30px !important;

    border: 0 !important;

}

.ranking_tb_page > li:after {

    content: none;

    padding: 0px !important;

}

.ranking_tb_page > li a {

    display: inline-block;

    padding: 5px 7px;

    border: 1px solid #999;

}

.ranking_tb_page > li a:hover,

.ranking_tb_page > li.on a {

    background: #cc0000;

    border: 0px;

    border: 1px solid #cc0000;

    color: #fff;

}



.rank_search,

.guild_search {

    clear: both;

    position: inherit;

    min-width: 280px;

    width: 100%;

}

.rank_search input[type="text"],

.guild_search input[type="text"] {

    float: left;

    border: 1px solid #ccc;

    border-radius: 5px;

    background: #fff;

    height: 29px;

    width: 68%;

    margin-right: 20px;

    padding: 5px 2%;

    font-size: 18px;

    font-size: 1.8rem;

    margin-bottom: 20px;

    outline: none;

}

.rank_search input[type="button"],

.guild_search input[type="button"] {

    float: inherit;

    border-radius: 5px;

    background: #333 url(img/mrg_search.gif) no-repeat 50% 50%;

    width: 48px;

    height: 40px;

    margin-bottom: 20px;

    cursor: pointer;

    margin-right: 35px;

    outline: none;

}

.rank_search a,

.guild_search a {

    display: block;

    text-align: center;

    color: #666;

    width: 200px;

}



.guild_search {

    position: relative;

    margin-top: 30px;

}



.guild_search select {

    width: 70%;

    height: 40px;

    font-size: 1em;

    margin-bottom: 10px;

}

.guild_search input[type="text"] {

    width: 66%;

}

.guild_search input[type="button"] {

    position: absolute;

    right: 0;

    bottom: 0;

}



.guild_search:after {

    content: "";

    display: block;

    clear: both;

}



/* Clan */

.clan > ul {

    padding: 40px 0 50px;

    text-align: center;

    width: 100%;

    position: relative;

    clear: both;

}

.clan > ul > li {

    position: relative;

    display: inline-block;

    zoom: 1;

    *display: inline;

    min-width: 280px;

    width: 96%;

    max-width: 300px;

    margin-right: 2.5%;

    margin-bottom: 30px;

    padding: 30px 2% 20px;

    vertical-align: top;

    border-right: 1px solid #999;

    border-bottom: 3px solid #999;

    background: #efefef url(img/clanList_bg.jpg) no-repeat center top;

    cursor: pointer;

    text-align: left;

}



.clan > ul > li > span.clan_rank {

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 50px;

    text-align: center;

    position: absolute;

    top: 26px;

    left: 25px;

    color: #960;

    font-size: 26px;

    font-size: 2.6rem;

    font-weight: bold;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.clan > ul > li > span.clan_member {

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 40px;

    text-align: left;

    position: absolute;

    top: 35px;

    right: 0;

}

.clan > ul > li > h5 {

    color: #960;

    text-align: center;

    font-size: 20px;

    font-size: 2rem;

}

.clan > ul > li > p {

    font-size: 13px;

    font-size: 1.3rem;

    text-align: center;

}



.clan_top3 li {

    margin-left: 1%;

}



.clan_view > ul > li {

    width: 95%;

    background: #efefef url(img/clanView_bg.jpg) no-repeat left top;

    cursor: inherit;

    max-width: inherit;

    *position: relative;

}

.clan_view h6 {

    font-size: 16px;

    font-size: 1.6rem;

    text-align: left;

    margin-top: 20px;

}

.clan_view .pre {

    background: #fff;

    border: #ccc solid 1px;

    padding: 2px;

    text-align: left;

    font-size: 14px;

    font-size: 1.4rem;

    line-height: 24px;

    margin-bottom: 10px;

    height: 120px;

    width: 100%;

    overflow: auto;

    overflow: auto \9;

}



#ulGuildList h5 {

    margin-bottom: 30px;

}

#ulGuildList p {

    margin-bottom: 10px;

    overflow: hidden;

    text-overflow: ellipsis;

    -o-text-overow: ellipsis;

    -moz-binding: url(/js/ellipsis.xml#ellipsis) undefinedundefinedundefined;

    word-wrap: break-word;

}



#ulGuildList .pre {

    font-size: 13px;

    background: #fff;

    border: #ccc solid 1px;

    padding: 2px;

    height: 150px;

    overflow: hidden;

    *position: relative;

    text-align: center;

}



#ulGuildList a {

    overflow: hidden;

    text-overflow: ellipsis;

    word-wrap: break-word;

    text-align: left;

    color: #8d8d8d;

    position: relative;

    -webkit-line-clamp: 10; /* text line */

    line-height: 1.2em;

    height: 11.8em /* line-height 1.2em * 3 = 3.6em */;

    max-height: 150px;

    *position: relative;

}



.text_overflow {

    overflow: hidden;

    text-overflow: ellipsis;

    -o-text-overow: ellipsis;

    -moz-binding: url(/js/ellipsis.xml#ellipsis) undefinedundefinedundefined;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    word-wrap: break-word;

}



/* Download */

.download li {

    display: inline-block;

    zoom: 1;

    *display: inline;

    padding: 10px 1%;

    text-align: center;

}

.artwork_img li {

    display: inline-block;

    zoom: 1;

    *display: inline;

    padding: 10px 1%;

    text-align: center;

    vertical-align: top;

    min-height: 160px;

    max-width: 160px;

}

.artwork_img li img,

.music_list li > img {

    width: 100%;

    max-width: 157px;

    border: 2px solid #ccc;

}

.artwork_img li div {

    margin-top: 10px;

}



.music_list li {

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 17.7%;

    min-width: 190px;

    padding: 10px 1%;

    text-align: center;

    vertical-align: top;

}



/* itemShop */

.item_table > ul {

    width: 100%;

    margin: 20px 0 40px;

    margin-right: -3%;

    overflow: hidden;

}

.item_table > ul > li {

    display: inline-block;

    zoom: 1;

    *display: inline;

    min-height: 100px;

    min-width: 280px;

    width: 98%;

    border-bottom: 1px solid #ccc;

    padding: 10px 0 5px;

    vertical-align: top;

}

.item_table .item_img {

    float: left;

    vertical-align: top;

    display: inline-block;

    zoom: 1;

    *display: inline;

    margin-right: 5px;

    margin-left: 5px;

}

.item_table > ul > li div {

    float: none;

    vertical-align: top;

    display: inline;

    zoom: 1;

    *display: inline;

}

.item_table > ul > li ul {

    margin: 5px 0 10px;

}

.item_table > ul > li li {

    font-size: 13px;

    font-size: 1.3rem;

    color: #999;

}

.item_table h5 {

    color: #960;

}



.mobile_table .item_img {

    width: 45%;

    height: 140px;

    margin-top: 10px;

}

.mobile_table > ul > li div {

    width: 53%;

}

.mobile_table > ul > li div h5 {

    margin-top: 5px;

}



/* GameInfo */

#gameInfo {

    background: #fdcf94;

    text-align: left;

}

#scenario {

    background: #6f6f6f;

    text-align: left;

    color: #fff;

}

#gameInfo > div,

#scenario > div {

    padding: 0 1%;

    width: 98%;

}



#gameInfo h4 {

    color: #930;

    font-size: 22px;

    font-size: 2.2rem;

    margin-top: 20px;

}

#scenario h4 {

    color: #fc0;

    font-size: 22px;

    font-size: 2.2rem;

    margin-top: 20px;

}



.beginner > div {

    border-bottom: 1px solid #ccc;

}

.beginner h4 {

    margin-bottom: 40px;

}

.beginner p {

    margin-bottom: 20px;

}

.beginner p > img {

    margin-bottom: 10px;

}

.beginner strong {

    color: #960;

    font-weight: bold;

}



.a_list li {

    list-style: lower-alpha;

    margin-bottom: 20px;

    margin-left: 30px;

}

.o_list li {

    list-style: disc;

    margin-bottom: 20px;

    margin-left: 20px;

}

.n_list li {

    list-style: decimal;

    margin-bottom: 20px;

    margin-left: 20px;

}



.gameinfo_level {

    border: 2px solid #ccc;

    padding: 20px;

    margin: 40px 0;

}

.gameinfo_level li {

    display: inline-block;

    zoom: 1;

    *display: inline;

    margin-right: 5%;

}



/* mobile */

#mobileInfo h3 {

    color: #333;

    font-size: 1.25em;

    margin: 40px 0 10px;

}

#mobileInfo h4 {

    color: #333;

    font-size: 1em;

    margin: 20px 0 5px;

}



#mobileInfo ol {

    width: 102%;

    margin: 20px 0 40px;

    margin-right: -3%;

    overflow: hidden;

}

#mobileInfo ol > li {

    display: inline-block;

    zoom: 1;

    *display: inline;

    min-height: 100px;

    min-width: 280px;

    width: 98%;

    border-bottom: 1px solid #eee;

    border-right: 1px solid #eee;

    padding: 20px 0;

    margin-left: 0 !important;

    margin-bottom: 0 !important;

}

#mobileInfo .item_img {

    float: left;

    vertical-align: top;

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 40%;

    height: 100px;

}

#mobileInfo ol > li ul {

    float: left;

    vertical-align: top;

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 60%;

}

#mobileInfo ol > li li {

    font-size: 13px;

    font-size: 1.3rem;

    color: #999;

}



.attr {

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 60%;

}

.attr > li {

    background: none;

    display: block;

    width: 100%;

    height: 20px;

}

.attr > li:hover {

    background: none;

}



.attr > li em {

    border-top: ridge #63c 15px;

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: inherit;

    height: 0;

    margin: 0;

    padding: 0;

    width: 15px;

    margin-right: 1px;

}

.attr > li > span {

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 30%;

    height: 17px;

    background: url(img/movil_icon.png) no-repeat;

    padding-left: 10%;

}

.attr > li.attr1 em {

    border-color: #63c;

}

.attr > li.attr1 > span {

    background-position: 0 0;

}

.attr > li.attr2 em {

    border-color: #36c;

}

.attr > li.attr2 > span {

    background-position: 0 -24px;

    border-color: #36c;

}

.attr > li.attr3 em {

    border-color: #c00;

}

.attr > li.attr3 > span {

    background-position: 0 -48px;

    border-color: #c00;

}

.attr > li.attr4 em {

    border-color: #090;

}

.attr > li.attr4 > span {

    background-position: 0 -72px;

    border-color: #090;

}

.attr > li.attr5 em {

    border-color: #990;

}

.attr > li.attr5 > span {

    background-position: 0 -96px;

    border-color: #990;

}



/* my Gunbound */

.guildTit .gulidName {

    padding-bottom: 0;

    width: 100%;

    font-weight: bold;

}

.guildTit .gulidName > span {

    padding: 10px;

    background: #e4e4e4;

}

.guildTit .basic_btn {

    padding-bottom: 0;

    width: 100%;

    text-align: right;

}

.guildTit:after {

    content: "";

    display: block;

    clear: both;

}



/* basic Btn */

.basic_btn {

    padding: 20px 0 40px;

    font-family: Impact, Charcoal, sans-serif;

    font-size: 18px;

    font-size: 1.8rem;

    letter-spacing: normal;

}

.basic_btn a {

        display: block;

    color: #fff;

    background: #ff3030;

    border-radius: 5px;

    margin-right: 10px;

    margin-bottom: 10px;

    word-break: break-all;

    text-align: center;

    padding: 12px 1% 10px;

    width: 300px;

}

.basic_btn a:hover,

.basic_btn a.on {

    color: #fff;

    background: #c00;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -ms-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}



.basic_btn a.red {

    color: #fff;

    background: #c00;

}

.basic_btn a.red:hover {

    color: #fff;

    background: #960;

}



.basic_btn a.green {

    color: #fff;

    background: #060;

}

.basic_btn a.green:hover {

    color: #fff;

    background: #330;

}



.basic_btn a.gray {

    color: #333;

    background: #999;

}

.basic_btn a.gray:hover {

    color: #333;

    background: #999;

}



.small_btn {

    padding: 5px 0;

}

.small_btn a {

    display: inline-block;

    zoom: 1;

    *display: inline;

    width: 23%;

    color: #666;

    font-size: 12px;

    font-size: 1.2rem;

    letter-spacing: -0.05em;

    background: #e4e4e4;

    border: 1px solid #ccc;

    border-radius: 3px;

    padding: 3px 5% 4px;

    margin-bottom: 5px;

    word-break: break-all;

    text-align: center;

}

.small_btn a:hover,

.small_btn a.on {

    color: #fff;

    background: #c00;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -ms-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}



.copy a {

    display: inline-block;

    zoom: 1;

    *display: inline;

    background: #f4f4f4;

    border: 1px solid #ccc;

    padding: 7px 1% 5px;

    word-break: break-all;

}

.copy span {

    display: inline-block;

    zoom: 1;

    *display: inline;

    background: #c00;

    border: 1px solid #c00;

    padding: 7px 1% 5px;

    color: #fff;

    text-transform: uppercase;

}



/* Modal Window */

.mw_layer {

    visibility: hidden;

    position: fixed;

    _position: absolute;

    top: 0;

    left: 0;

    width: 100% !important;

    height: 100% !important;

    z-index: 9997;

}

.mw_layer .bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: 0.8;

    filter: alpha(opacity=80);

    z-index: 9998;

}



.mw_layer .fg {

    position: absolute;

    overflow-y: scroll;

    top: 50%;

    left: 50%;

    background: #fff;

    border: 2px solid #ccc;

    padding: 20px;

    width: 280px;

    height: 600px;

    margin: -320px 0 0 -160px;

    z-index: 9999;

}

.mw_layer .fg h3 {

    font-family: Titillium Web, Verdana, Geneva, sans-serif;

    font-size: 24px;

    font-size: 2.4rem;

    margin: 0;

    padding: 0;

    text-transform: none;

}

.mw_layer .fg p {

    font-size: 16px;

    font-size: 1.6rem;

}

.close {

    display: inline-block;

    position: absolute;

    top: 0;

    right: 0;

    color: #fff;

    margin: 0;

    font-size: 2em;

    width: 20px;

    height: 20px;

    background: #333;

    padding: 0;

    text-align: center;

}



.mw_layer .fg input {

    border: 1px solid #999;

    padding: 3px 5px;

}



.item_sub {

    position: absolute;

    overflow-y: scroll;

    top: 50%;

    left: 50%;

    background: #fff;

    border: 2px solid #ccc;

    padding: 20px;

    width: 280px !important;

    height: 600px !important;

    margin: -320px 0 0 -160px;

    z-index: 9999;

}

.item_sub h4 {

    padding-top: 20px;

}

.item_sub h5 {

    margin-top: 20px;

}



/* Tablet & Deasktop **********************************************************************/

@media all and (min-width: 768px) {

    /* btn */

    .basic_btn a {

        display: inline-block;

        zoom: 1;

        *display: inline;

    }



    .gb-subTop {

        min-height: 289px;

        padding: 0;

    }

    .gb-subTop h1 {

        margin-left: -65px;

        width: 130px;

        height: 115px;

        margin-top: 35px;

    }

    .gb-subTop h1 > a {

        width: 130px;

        height: 115px;

    }



    .gb-subTop h2 {

        margin-top: 170px;

        text-align: center;

    }

    .gb-subTop p {

        text-align: center;

    }



    .start-area {

        position: relative;

        margin-top: 0;

        height: 130px;

        z-index: 1;

        visibility: visible; /* Permalink - use to edit and share this gradient:http://colorzilla.com/gradient-editor/#feffff+0,a8a8a8+100 */

        background: rgb(237, 232, 231); /* Old browsers */

        background: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(237, 232, 231, 1) 100%); /* FF3.6+ */

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(252, 252, 252, 1)), color-stop(100%, rgba(237, 232, 231, 1))); /* Chrome,Safari4+ */

        background: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(237, 232, 231, 1) 100%); /* Chrome10+,Safari5.1+ */

        background: -o-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(237, 232, 231, 1) 100%); /* Opera 11.10+ */

        background: -ms-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(237, 232, 231, 1) 100%); /* IE10+ */

        background: linear-gradient(to bottom, rgba(252, 252, 252, 1) 0%, rgba(237, 232, 231, 1) 100%); /* W3C */

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc',endColorstr='#ede8e7',GradientType=0); /* IE6-9 */

    }



    .start-area > div {

        position: relative;

    }

    .before_login,

    .after_login {

        display: none;

    }



    .before_login .btn_gameStart {

        display: block;

        position: absolute;

        right: 0;

        top: -20px;

        z-index: 5;

        zoom: 1;

        cursor: pointer;

    }

    .before_login p {

        float: left;

        min-width: 780px;

        height: 95px;

        margin-top: 25px;

        padding-top: 10px;

        text-align: left;

        background: url(img/sub_startBG.jpg) no-repeat right bottom;

    }



    .after_login {

        display: block;

    }

    .after_login {

        text-align: center;

        padding-top: 40px;

        padding-bottom: 40px;

    }

    .after_login a {

        display: inline-block;

        zoom: 1;

        *display: inline;

        font-family: Impact, Charcoal, sans-serif;

        text-transform: uppercase;

        font-size: 2.2rem;

        font-size: 22px;

        line-height: 1em;

        text-align: center;

        overflow: hidden;

        z-index: 1;

        color: #333;

        background: #fff;

        width: 115px;

        padding: 4px 2% 6px;

        height: 43px;

        border: 3px solid #333;

        border-radius: 30px;

    }

    .after_login a:hover {

        color: #999;

    }

    .after_login p {

        float: left;

        float: left;

        min-width: 460px;

        height: 75px;

        padding-bottom: 15px;

        text-align: left;

        background: url(img/sub_startBG.jpg) no-repeat right bottom;

    }



    .after_login p.search {

        float: right;

        position: relative;

        display: inline-block;

        zoom: 1;

        *display: inline;

        background: #fff;

        border: 3px solid #999;

        border-radius: 30px;

        overflow: hidden;

        width: 300px;

        min-width: 260px;

        padding: 4px 2% 6px;

        height: 43px;

        *margin-top: 3px;

    }

    .after_login p.search .txt {

        float: left;

        border: 0;

        width: 180px;

        height: 16px;

        font-size: 16px;

        font-size: 1.6rem;

        margin: -5px 0;

        padding: 20px 0;

    }

    .after_login p.search .btn {

        position: absolute;

        top: 0;

        right: -2px;

        width: 100px;

        height: 60px;

        color: #fff;

        background: #999;

        font-family: Impact, Charcoal, sans-serif;

        font-size: 22px;

        font-size: 2.2rem;

        text-transform: uppercase;

        margin: -5px 0;

    }



    .start-fixed {

        _position: absolute;

        position: fixed;

        top: 0;

        left: 0;

        z-index: 999;

        zoom: 1;

        width: 100%;

        -webkit-transition: all 0.5s ease;

        -moz-transition: all 0.5s ease;

        -ms-transition: all 0.5s ease;

        -o-transition: all 0.5s ease;

        transition: all 0.5s ease;

    }

    .start-fixed > div {

        min-width: 998px;

        max-width: 1120px;

        margin: 0 auto;

    }

    .start-fixed .btn_gameStart {

        top: 0;

    }



    .start-area:after {

        content: "";

        display: block;

        clear: both;

    }



    /* Sub Layout */

    .sub_area > div {

        border-left: 1px solid #ccc;

        border-right: 1px solid #ccc;

    }

    .out_time {

        float: right;

        margin-top: 50px;

    }



    /* Ranking */

    .sub_area h3 {

        background: url(img/sub_titleBG01.jpg) no-repeat right bottom;

        border-bottom: 1px solid #ccc;

    }

    .tabmenu li,

    .tabSub li {

        display: inline-block;

        zoom: 1;

        *display: inline;

        vertical-align: top;

    }



    .ranking_top3 {

        display: block;

        padding-top: 40px;

    }

    .ranking_top3 ul {

        text-align: center;

    }

    .ranking_top3 li {

        display: inline-block;

        zoom: 1;

        *display: inline;

        min-width: 240px;

        width: 20%;

        height: 100px;

        padding: 175px 5% 0 0;

        margin-left: 5%;

        text-align: center;

        border-right: 1px solid #ddd;

        background: url(img/ranking_top3_BG.jpg) no-repeat center top;

    }

    .ranking_top3 li:last-child {

        border-right: 0;

    }

    .ranking_top3 li img {

        vertical-align: -1px;

        margin-right: 3px;

    }

    .ranking_top3 li p {

        margin-bottom: 10px;

    }

    .ranking_top3 li p:first-child {

        color: #fff;

        margin-bottom: 20px;

        font-weight: bold;

    }

    .ranking_top3 li.rank1 {

        background-position: 0 0;

    }

    .ranking_top3 li.rank2 {

        background-position: -374px 0;

    }

    .ranking_top3 li.rank3 {

        background-position: -732px 0;

    }



    .interRank {

        display: block;

        padding-top: 40px;

        padding-bottom: 20px;

    }

    .interRank > div {

        display: inline-block;

        zoom: 1;

        *display: inline;

        min-width: 100px;

        width: 14%;

        height: 200px;

        padding: 20px 5% 0 0;

        margin-left: 5%;

        text-align: center;

        border-right: 1px solid #ddd;

    }

    .interRank > div.interRank4 {

        border-right: 0;

    }

    .interRank > div h4 {

        padding-top: 0;

    }

    .interRank > div li {

        padding-bottom: 5px;

    }



    .ranking .mobile {

        display: table-cell;

    }

    .myInfo_tab {

        position: relative;

    }

    .myInfo_tab ul {

        display: inline-block;

        zoom: 1;

        *display: inline;

    }

    .myInfo_tab .basic_btn {

        display: inline-block;

        zoom: 1;

        *display: inline;

        float: right;

        padding-top: 30px;

    }



    .rank_search {

        position: absolute;

        float: right;

        margin-left: 50%;

        width: 50%;

        top: 30px;

    }

    .rank_search input[type="text"] {

        float: right;

        width: 40%;

    }

    .rank_search input[type="button"] {

        float: right;

    }

    .rank_search:after {

        content: "";

        display: block;

        clear: both;

    }



    .guild_search {

        margin-left: 50%;

        width: 50%;

        top: 30px;

    }



    .guild_search select {

        width: 40%;

        float: left;

        margin-right: 10px;

    }

    .guild_search input[type="text"] {

        width: 40%;

    }

    .guild_search input[type="button"] {

        float: right;

    }



    .classic_server {

        margin-right: 200px;

    }



    .comment_area ul.list {

        position: relative;

        clear: both;

        border-bottom: 1px solid #ccc;

        min-height: 50px;

        padding: 10px 0 20px;

    }

    .comment_area ul.list > li {

        display: inline-block;

        zoom: 1;

        *display: inline;

        margin-right: 20px;

        min-width: 200px;

        vertical-align: top;

    }

    .comment_area ul.list > li.date {

        position: absolute;

        left: 0;

        top: 40px;

        color: #999;

        font-size: 11px;

        font-size: 1.1rem;

    }

    .comment_area ul.list > li.btn_close {

        float: right;

        color: #999;

        font-size: 11px;

        font-size: 1.1rem;

        cursor: pointer;

        min-width: 10px;

        margin-right: 0;

    }

    .comment_area img,

    .basic_tb img {

        vertical-align: -2px;

    }

    .comment {

        max-width: 700px;

        height: 60px;

        -webkit-box-orient: vertical;

        word-break: break-all;

        -webkit-line-clamp: 3; /* text line */

        line-height: 1.2em;

        height: 3.6em; /* line-height 1.2em * 5 = 6em */

        overflow: hidden;

        text-overflow: ellipsis;

        -o-text-overow: ellipsis;

        -moz-binding: url(/js/ellipsis.xml#ellipsis) undefinedundefinedundefined;

    }



    /* Clan */

    .clan_top3 {

        display: block;

    }

    .clan_top3 ul {

        text-align: center;

    }

    .clan_top3 li {

        display: inline-block;

        zoom: 1;

        *display: inline;

        min-width: 240px;

        width: 20%;

        height: 100px;

        padding: 195px 5% 0 0;

        margin-left: 3%;

        text-align: center;

        border-right: 1px solid #ddd;

        background: url(img/clan_top3_BG.jpg) no-repeat center top;

    }

    .clan_top3 li:last-child {

        border-right: 0;

    }

    .clan_top3 li img {

        vertical-align: -1px;

        margin-right: 3px;

    }

    .clan_top3 li p {

        margin-bottom: 10px;

    }

    .clan_top3 li p:first-child {

        margin-bottom: 20px;

        font-weight: bold;

    }

    .clan_top3 li.rank1 {

        background-position: 0 0;

    }

    .clan_top3 li.rank2 {

        background-position: -374px 0;

    }

    .clan_top3 li.rank3 {

        background-position: -732px 0;

    }



    .clan > ul > li {

        min-width: 280px;

        width: 25%;

        margin-right: 2.5%;

        padding: 30px 2% 20px;

        min-height: 290px;

    }

    .clan_view > ul > li {

        width: 95.5%;

        max-width: 1035px;

        height: auto;

    }



    .clan_view .pre {

        min-height: 300px;

    }



    /* Download */

    .download li {

        display: inline-block;

        zoom: 1;

        *display: inline;

    }

    .artwork_img li {

        display: inline-block;

        zoom: 1;

        *display: inline;

        width: 22.3%;

    }

    .artwork_img li .basic_btn {

        width: 100%;

    }



    /* itemShop */

    .item_table > ul > li {

        width: 29.65%;

        border-right: 1px solid #ccc;

        border-left: 1px solid #ccc;

        border-top: solid 1px #ccc;

        margin-bottom: 5px;

        margin-right: 2px;

    }

    #mobileInfo ol > li {

        width: 29.65%;

        border-right: 1px solid #ccc;

        margin-right: 3%;

    }



    /* my Gunbound */

    .guildTit .gulidName {

        display: inline-block;

        zoom: 1;

        *display: inline;

        float: left;

        width: 20%;

        max-width: 363px;

        margin-top: 30px;

    }

    .guildTit .basic_btn {

        display: inline-block;

        zoom: 1;

        *display: inline;

        float: right;

        width: 50%;

        max-width: 540px;

    }



    /* Modal Window */

    .mw_layer .fg {

        width: 630px;

        height: 500px;

        margin: -270px 0 0 -335px;

    }

    .item_sub {

        width: 630px !important;

        height: 500px !important;

        margin: -270px 0 0 -335px;

    }



    .basic_tb {

        display: flex;

        font-size: 1em;

    }

    .mobile_tb > table {

        float: left;

        width: 50%;

        *width: 49%;

        min-width: 280px;

    }

    .ranking .mobile,

    .basic_tb .mobile {

        display: table-cell;

    }

}



/* Tablet **********************************************************************/

@media all and (min-width: 800px) and (max-width: 1024px) {

    /* Ranking */

    .ranking {

        float: left;

        width: 67%;

    }

    .myInfo {

        float: right;

        min-width: 230px;

        width: 25%;

    }



    .artwork_img li {

        display: inline-block;

        zoom: 1;

        *display: inline;

        width: 22.3%;

    }



    /* itemShop */

    .item_table > ul > li {

        width: 46.65%;

    }

    #mobileInfo ol > li {

        width: 46.65%;

    }



    /* GameInfo */

    #gameInfo {

        width: 100%;

        max-width: none;

        background: url(img/AboutGB_Introduction.jpg) no-repeat center top;

        height: 900px;

    }

    #scenario {

        width: 100%;

        max-width: none;

        background: url(img/AboutGB_Scenario.jpg) no-repeat center top;

        height: 1325px;

    }



    #gameInfo > div,

    #scenario > div {

        max-width: 1120px;

        margin: 0 auto;

        z-index: 1;

    }

    #gameInfo h3,

    #scenario h3 {

        padding-top: 130px;

    }

    #gameInfo .text {

        width: 40%;

        margin-left: 40%;

        margin-bottom: 40px;

    }

    #scenario .text {

        width: 56%;

        margin-left: 40%;

        margin-bottom: 40px;

    }

    #scenario .sub_title {

        margin-top: 160px;

    }

    #scenario .vs {

        margin-bottom: 40px;

    }

    #scenario .vs li {

        display: inline-block;

        zoom: 1;

        *display: inline;

        width: 30%;

        margin-left: 15%;

        text-align: center;

        vertical-align: top;

    }



    .comment_area textarea {

        width: 70%;

    }

    .comment_area .basic_btn {

        display: inline-block;

        width: 200px;

        vertical-align: top;

        margin: 0 0 0 20px;

        padding: 0;

    }

    .comment_area .basic_btn a {

        width: 100%;

        height: 20px;

        padding: 30px 10px;

    }

}

/* Deasktop **********************************************************************/

@media all and (min-width: 1024px) {

    .sub_area {

        display: block;

    }



    /* Ranking */

    .ranking {

        float: left;

        width: 70%;

    }

    .myInfo {

        float: right;

        min-width: 280px;

        width: 27%;

    }



    /* download */

    .artwork_img li {

        display: inline-block;

        zoom: 1;

        *display: inline;

        width: 14.3%;

    }



    /* itemShop */

    .item_table > ul > li {

        width: 29.9%;

        width: 29.5% \0;

        height: 140px;

    }

    #mobileInfo ol > li {

        width: 29.9%;

        width: 29.5% \0;

    }



    .item_table50 > ul > li {

        width: 46%;

    }

    .item_table50 .item_img {

        width: 45%;

    }



    /* GameInfo */

    #gameInfo {

        width: 100%;

        max-width: none;

        background: url(img/AboutGB_Introduction.jpg) no-repeat center top;

        height: 900px;

    }

    #scenario {

        width: 100%;

        max-width: none;

        background: url(img/AboutGB_Scenario.jpg) no-repeat center top;

        height: 1325px;

    }



    #gameInfo > div,

    #scenario > div {

        max-width: 1120px;

        margin: 0 auto;

        z-index: 1;

    }

    #gameInfo h3,

    #scenario h3 {

        padding-top: 130px;

    }

    #gameInfo .text {

        width: 40%;

        margin-left: 40%;

        margin-bottom: 40px;

    }

    #scenario .text {

        width: 56%;

        margin-left: 40%;

        margin-bottom: 40px;

    }

    #scenario .sub_title {

        margin-top: 160px;

    }

    #scenario .vs {

        margin-bottom: 40px;

    }

    #scenario .vs li {

        display: inline-block;

        zoom: 1;

        *display: inline;

        width: 30%;

        margin-left: 15%;

        text-align: center;

        vertical-align: top;

    }

    .beginner .item_table > ul > li {

        width: 43%;

        width: 29.5% \0;

        padding-left: 1%;

        margin-right: 1%;

        margin-bottom: 20px;

        border-bottom: 0px solid #eee;

        border-right: 1px solid #eee;

        vertical-align: top;

    }



    .comment_area textarea {

        width: 70%;

    }

    .comment_area .basic_btn {

        display: inline-block;

        width: 200px;

        vertical-align: top;

        margin: 0 0 0 20px;

        padding: 0;

    }

    .comment_area .basic_btn a {

        width: 100%;

        height: 20px;

        padding: 30px 10px;

    }

}