#topbar {
    position: fixed;
    width: 100%;
    height: 34px;
    top: 0;
    box-shadow: 0 0 3px #000;
    background: #F99920;
    z-index: 999999;
    font-family: helvetica neue, 微軟正黑體, Microsoft JhengHei, 蘋果儷中黑, Apple LiGothic Medium, 黑体, SimHei;
}

#topbar img {
    border: 0;
}

#topbar.clearfixed {
    position: relative;
}

#topbar_wrapper {
    width: 100%;
    min-width: 980px;
    display: inline-block;
    background: #F99920;
}

#topbar_nav {
    float: left;
    height: 34px;
    white-space: nowrap; /* overflow:hidden; */
    position: absolute;
    z-index: 1;
    left: 0px;
}

/* Edited by Angus 20140225 */
#topbar_nav .topbar_home {
    display: inline-block;
    height: 34px;
    vertical-align: top;
}

#topbar_nav .topbar_gid {
    display: inline-block;
    height: 17px;
    background-color: #484F52;
    border-radius: 5px 0 0 5px;
    padding: 4px 10px;
    margin: 5px 0 4px 0;
    vertical-align: top;
}

#topbar_nav .topbar_fid1a {
    display: inline-block;
    height: 17px;
    background-color: #5F676A;
    border-radius: 0 5px 5px 0;
    padding: 4px 10px;
    margin: 5px 0 4px 0;
    vertical-align: top;
}

#topbar_nav .topbar_fid1b {
    display: inline-block;
    height: 17px;
    background-color: #5F676A;
    border-radius: 0;
    padding: 4px 10px;
    margin: 5px 0 4px 0;
    vertical-align: top;
}

#topbar_nav .topbar_fid2 {
    display: inline-block;
    height: 17px;
    background-color: #787F82;
    border-radius: 0 5px 5px 0;
    padding: 4px 10px;
    margin: 5px 0 4px 0;
    vertical-align: top;
}

#topbar_nav .topbar_gid:hover {
    background-color: #383F42;
}

#topbar_nav .topbar_fid1a:hover {
    background-color: #4F575A;
}

#topbar_nav .topbar_fid1b:hover {
    background-color: #4F575A;
}

#topbar_nav .topbar_fid2:hover {
    background-color: #686F72;
}

#topbar_nav .topbar_gid a {
    font-size: 13px;
    color: #ffffff;
    line-height: 17px;
}

#topbar_nav .topbar_fid1a a {
    font-size: 13px;
    color: #ffffff;
    line-height: 17px;
}

#topbar_nav .topbar_fid1b a {
    font-size: 13px;
    color: #ffffff;
    line-height: 17px;
}

#topbar_nav .topbar_fid2 a {
    font-size: 13px;
    color: #ffffff;
    line-height: 17px;
}

#topbar_nav .topbar_gid a:hover {
    text-decoration: none;
}

#topbar_nav .topbar_fid1a a:hover {
    text-decoration: none;
}

#topbar_nav .topbar_fid1b a:hover {
    text-decoration: none;
}

#topbar_nav .topbar_fid2 a:hover {
    text-decoration: none;
}

#topbar_nav .topbar_tid {
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    vertical-align: top;
    cursor: default;
}

#topbar_nav .topbar_tid a {
    text-decoration: none;
}

#topbar_blank {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    display: block;
}

#topbar_control {
    float: right;
    position: relative;
    z-index: 2;
    padding-left: 20px;
    background: #F99920;
}

.topbar_control_vline {
    width: 1px;
    height: 34px;
    border-right: 1px solid #d06e17;
    background: #f9b85c;
    display: inline-block;
    float: left;
}

.register_btn {
    float: left;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background: #f99920;
}

/* Edited by Angus 20140225 */
.register_btn a {
    text-decoration: none;
    color: #fff;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0 8px;
}

/* Edited by Angus 20140225 */
.register_btn:hover {
    background: #ffaa33;
}

#login_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background: #f99920;
    cursor: pointer;
}

/* Edited by Angus 20140225 */
/*#login_btn:hover, #login_btn.active{ background:#f6f6f6; } Edited by Angus 20140225 */
#login_btn:hover, #login_btn.active {
    background: #ffaa33;
}

/* Edited by Dicky Ng 20161014 */
#login_btn a {
    text-decoration: none;
    color: #fff;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0 8px;
}

/* Edited by Angus 20140225 */
/*#login_btn:hover a, #login_btn.active a{ color:#666; } Edited by Dicky Ng 20161014 */
#searchcontainer {
    float: left;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0 14px 0 8px;
    color: #fff;
    background: #f99920;
}

#login_form {
    z-index: 9999000;
    position: absolute;
    top: 0;
    left: 0;
    width: 160px; /* height:180px; */
    padding: 10px 20px;
    margin-top: 34px;
    background: #f9f9f9;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 3px #ddd;
    overflow: hidden;
    display: none;
    text-align: left;
}

/* Edited by Angus 20140225 */
#login_form .field_title {
    display: block;
    padding: 2px;
    margin-top: 10px;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    color: #666;
}

#login_form .login_submit {
    margin: 0 auto;
    background: #f99920;
    color: #fff;
    border: none;
    padding: 3px 15px;
    cursor: pointer;
}

#login_form .login_submit:hover {
    background: #ffaa33;
    box-shadow: 0 1px 2px #888;
}

#login_form .submit_row {
    display: block;
    width: 100%;
    margin-top: 15px;
    text-align: center;
}

#login_form .forgot_pw {
    text-decoration: none;
    color: #999;
}

#login_form .forgot_pw:hover {
    text-decoration: underline;
}

#login_form .other_link {
    margin-top: 15px;
}

#login_form .username, #login_form .password {
    border: 1px solid #ccc;
}

#login_form .username:focus, #login_form .password:focus {
    border: 1px solid #cb9;
    box-shadow: inset 0 0 3px #fec;
}

#profile_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background-color: #f99920;
    cursor: pointer;
}

#profile_btn:hover, #profile_btn.active {
    background-color: #f6f6f6;
    color: #666;
}

#profile_btn a {
    text-decoration: none;
    color: #fff;
}

#profile_btn_icon {
    background-image: url(/images/icons/profile_icon.png?v=20170222);
    width: 24px;
    height: 34px;
    display: block;
    float: left;
}

#profile_menu {
    z-index: 9999000;
    position: absolute;
    top: 0;
    left: 0; /* width:70px; */
    min-width: 60px;
    padding: 10px 20px;
    margin-top: 34px;
    background: #f9f9f9;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 3px #ddd;
    overflow: hidden;
    display: none;
    font-size: 12px;
    text-align: left;
}

/* Edited by Angus 20140225 */
#profile_menu a {
    text-decoration: none;
    color: #666;
    display: block;
    line-height: 28px;
}

#profile_menu a:hover {
    text-decoration: underline;
}

#profile_user {
    display: inline-block;
    line-height: 20px;
    white-space: nowrap;
    font-family: arial, sans-serif;
    color: #000;
}

#profile_user #profile_name {
    display: block;
    font-size: 15px;
    color: #000;
    line-height: 16px;
}

#profile_user #profile_group {
    display: block;
    font-size: 12px;
    color: #999;
    line-height: 16px;
}

.dottedline {
    width: 100%;
    height: 4px;
    line-height: 4px;
    margin: 0 0 4px;
    padding: 0;
    border-bottom: 1px dotted #aaa;
    display: block;
}

#pm_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background-color: #f99920;
    cursor: pointer;
}

#pm_btn:hover {
    background-color: #ffaa33;
}

#pm_btn_icon {
    background-image: url(/images/icons/pm_icon.png);
    width: 24px;
    height: 34px;
    display: block;
}

#admin_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background-color: #f99920;
    cursor: pointer;
}

#admin_btn:hover {
    background-color: #ffaa33;
}

#admin_btn_icon {
    background-image: url(/images/icons/admin_icon.png);
    width: 24px;
    height: 34px;
    display: block;
}

#setting_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background-color: #f99920;
    cursor: pointer;
}

#setting_btn:hover, #setting_btn.active {
    background: #f6f6f6;
    color: #666;
}

#setting_btn a {
    text-decoration: none;
    color: #fff;
}

#setting_btn_icon {
    background-image: url(/images/icons/setting_icon.png);
    width: 24px;
    height: 34px;
    display: block;
}

#setting_menu {
    z-index: 9999000;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    padding: 10px 20px;
    margin-top: 34px;
    background: #f9f9f9;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 3px #ddd;
    overflow: hidden;
    display: none;
    font-size: 12px;
    text-align: left;
}

#setting_menu a {
    text-decoration: none;
    color: #666;
    display: block;
    line-height: 28px;
}

/* Edited by Angus 20140225 */
#setting_menu a:hover {
    text-decoration: underline;
}

.btn_icon {
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center center;
}

#weibo_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background-color: #f99920;
    cursor: pointer;
}

#weibo_btn:hover {
    background-color: #ffaa33;
}

#weibo_btn_icon {
    background-image: url(/images/icons/weibo_icon.png);
    width: 24px;
    height: 34px;
    display: block;
}

#group148_btn_icon {
    background-image: url("/images/icons/group148_icon.png");
    display: block;
    height: 30px;
    width: 24px;
}

#group148_btn {
    background-color: #F99920;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 30px;
    line-height: 30px;
    padding: 0;
    position: relative;
    text-decoration: none;
}

#group148_btn:hover {
    background-color: #FFAA33;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    .btn_icon {
        background-size: 24px 24px;
    }

    #profile_btn_icon {
        background-image: url(/images/icons/profile_icon@2x.png);
    }

    #setting_btn_icon {
        background-image: url(/images/icons/setting_icon_2x.png);
    }

    #pm_btn_icon {
        background-image: url(/images/icons/pm_icon_2x.png);
    }

    #admin_btn_icon {
        background-image: url(/images/icons/admin_icon_2x.png);
    }

    #weibo_btn_icon {
        background-image: url(/images/icons/weibo_icon_2x.png);
    }

    #group148_btn_icon {
        background-image: url(/images/icons/group148_icon_2x.png);
    }

    a.top_nav_btn {
        background-image: url(/images/icons/top_nav_icons_2x.png);
        background-size: 720px 160px;
    }
}

@media only screen and (max-width: 979px), only screen and (max-height: 420px) {
    #topbar {
        position: relative !important;
        box-shadow: none;
    }

    #topbar_blank {
        height: 19px;
        margin-bottom: 0;
    }
}

#service_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background: #f99920;
    cursor: pointer;
}

#service_btn:hover, #service_btn.active {
    background: #f6f6f6;
    color: #666;
}

#service_btn a {
    text-decoration: none;
    color: #fff;
}

#service_btn_icon {
    background-image: url(/images/icons/service_icon.png);
    width: 24px;
    height: 34px;
    display: block;
    float: left;
}

#service_menu {
    z-index: 9999000;
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    padding: 10px 20px;
    margin-top: 34px;
    background: #f9f9f9;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 3px #ddd;
    overflow: hidden;
    display: none;
    font-size: 13px;
    text-align: left;
}

#service_menu a {
    text-decoration: none;
    color: #666;
    display: block;
    line-height: 28px;
}

#service_menu a:hover {
    text-decoration: underline;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    #service_btn_icon {
        background-image: url(/images/icons/service_icon_2x.png);
    }
}

#searchbox {
    float: left;
    height: 20px;
    line-height: 20px;
    margin: 7px 0;
    padding: 0 0 0 3px;
    text-align: left;
    background: #FFF;
    position: relative;
}

#searchbox img {
    vertical-align: middle;
}

input#srchtxt {
    float: left;
    width: 100px;
    height: 20px;
    line-height: 20px;
    margin: 7px 0;
    padding: 0 3px;
    font-size: 12px;
    border: 0;
    color: #666;
    background: #FFF;
    border-left: 1px solid #ddd;
}

#currentsearchitem {
    float: left;
    height: 20px;
    line-height: 20px;
}

#searchbox a {
    font-size: 12px;
    line-height: 20px;
    border: 0;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

#searchbox_menu {
    position: absolute;
    top: 20px;
    left: 0px;
    display: none;
    font-size: 12px;
}

#popup_search_items {
    width: 38px;
    margin: 0;
    padding: 0 0 0 2px;
    border-top: 0;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #FFF;
    text-align: left;
}

#popup_search_items li {
    list-style: none;
}

#popup_search_items li a {
    color: #333;
    font-size: 12px;
    text-decoration: none;
}

#popup_search_items li a:hover {
    color: #888;
}

#searchcontainer .submit {
    float: left;
    margin: 7px 0 7px 2px;
    border: 0px;
    padding: 0px;
}

#mycircle_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background-color: #f99920;
    cursor: pointer;
}

/* Edited by Angus 20140918 */
#mycircle_btn:hover {
    background-color: #ffaa33;
}

#mycircle_btn_icon {
    background-image: url(/images/icons/mycircle_icon.png);
    width: 24px;
    height: 34px;
    display: block;
}

/* Edited by Angus 20140918 */

.noticenew {
    background-color: #f92020 !important;
}

.topbar_gid_dropdown {
    position: absolute;
}

.topbar_gid_dropdown ul, .topbar_gid_dropdown ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.topbar_gid_dropdown ul li {
    width: 80px;
    background: #fec;
}

.topbar_gid_dropdown ul li a {
    background: #fec;
    padding: 3px 5px;
    font-size: 13px;
    text-decoration: none;
}

#topbar_nav .topbar_home, #topbar_nav .topbar_gid, #topbar_nav .topbar_fid1a, #topbar_nav .topbar_fid1b, #topbar_nav .topbar_fid2 {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

/* Edited by Angus 20140225 */

/*---------------------0815-notification----------------------*/
#noti_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

#topbar_fb_share {
    width: 70px;
    display: inline-block;
    float: left;
    padding: 6px 5px;
}

#noti_btn_icon {
    background-image: url(../images/notification/icon_notification.png?v=20160824);
    width: 24px;
    height: 34px;
    display: block;
}

#top-menu-btn-notification-num {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 2px;
    top: 2px;
    text-indent: initial;
    background-color: red;
    border-radius: 17px;
    line-height: 16px;
    color: white;
    font-size: 10px;
    text-align: center;
    display: none;
}

#notification {
    position: relative;
}

#notification .inner {
    padding: 5px 0;
}

#noti_wrapper {
    z-index: 9999000;
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    margin-top: 34px;
    background: #EEECED;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 3px #ddd;
    display: none;
    max-height: 750px;
    overflow: hidden;
    overflow-y: auto;
}

#noti_arrow {
    z-index: 9999000;
    position: absolute;
    bottom: 0;
    right: 7px;
    background-image: url(../images/notification/icon_arrow.png?v=20160824);
    height: 7px;
    width: 19px;
    display: none;
}

.notification-content {
    color: #000;
    font-size: 16px;
    width: 80%;
    height: 50px;
    overflow: hidden;
    word-wrap: break-word;
    line-height: 150%;
    text-align: left;
}

.my-history-container-empty {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: block;
    margin: 0px auto;
    text-align: center;
    color: #000;
}

.my-history-container-empty img {
    height: 160px;
    height: 160px;
    margin: 15px;

}

.notification-msg {
    display: block;
    margin: 6px;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
}

.notification-msg span {
    color: #8B8B8B;
    font-size: 14px;
}

#notification a {
    text-decoration: none;
    color: #000;
}

.notification-new {
    /*background-color: #FCFCE5;*/
    border-color: #fec72c transparent transparent;
    border-style: solid;
    border-width: 18px 18px 0 0;
    left: -1px;
    top: -1px;
    position: absolute;
}

.notification-msg-icon {
    background-size: cover;
    background-position: 1px 0px;
}

.notification-msg-icon-quote {
    background-image: url(../images/notification/quote.png?v=20160824);
    background-position: center center;
}

.notification-msg-icon-pm {
    background-image: url(../images/notification/pm.png?v=20160824);
    background-position: center center;
}

.notification-msg-icon-subscription {
    background-image: url(../images/notification/followPost.png?v=20160824);
    background-position: center center;
}

.notification-msg-icon-hotrank, .notification-msg-icon-achievement {
    background-image: url(../images/notification/hot.png?v=20160824);
    background-position: center center;
}

.notification-msg-icon-marketing {
    background-image: url(../images/notification/promote.png?v=20160824);
    background-position: center center;
}

.notification-msg-icon-follow {
    background-size: cover;
    background-position: center center;
}

.notification-msg-icon-notice {
    background-image: url(../images/notification/system.png?v=20161122);
    background-position: center center;
}

.notification-msg-icon-new_fan {
    background-image: url(../images/notification/fans@2x.png?v=20170117);
    background-position: center center;

}

.notification-msg-icon-gift {
    background-image: url(../images/notification/gift.png?v=20170727);
    background-position: center center;
}

.notification-msg-icon {
    cursor: pointer;
    height: 33px;
    width: 33px;
    float: left;
    overflow: hidden;
    border-radius: 30px;
    margin-right: 12px;
}

.notification-msg span {
    clear: left;
    display: block;
    text-align: right;
}

.notification-msg-icon-time {
    background-image: url(../images/notification/icon-time.png);
    background-size: cover;
    background-position: center center;
}

.notification-msg-icon-time {
    cursor: pointer;
    height: 12px;
    width: 12px;
    overflow: hidden;
    display: inline-block;
    margin-bottom: -1px;
    margin-right: 3px;
}

#noti_wrapper {
    width: 370px;
    max-height: 650px;
}

.notification-content {
    font-size: 14px;
    line-height: 180%;
}

.notification-msg span {
    font-size: 12px;
}

#noti_btn {
    line-height: 15px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    .notification-msg-icon-quote {
        background-image: url(../images/notification/quote@2x.png?v=20160824);
        background-position: center center;
    }

    .notification-msg-icon-pm {
        background-image: url(../images/notification/pm@2x.png?v=20160824);
        background-position: center center;
    }

    .notification-msg-icon-subscription {
        background-image: url(../images/notification/followPost@2x.png?v=20160824);
        background-position: center center;
    }

    .notification-msg-icon-hotrank, .notification-msg-icon-achievement {
        background-image: url(../images/notification/hot@2x.png?v=20160824);
        background-position: center center;
    }

    .notification-msg-icon-marketing {
        background-image: url(../images/notification/promote@2x.png?v=20160824);
        background-position: center center;
    }

    .notification-msg-icon-notice {
        background-image: url(../images/notification/system.png?v=20161122);
        background-position: center center;
    }

    .notification-msg-icon-new_fan {
        background-image: url(../images/notification/fans@2x.png?v=20170117);
        background-position: center center;
    }

    .notification-msg-icon-gift {
        background-image: url(../images/notification/gift@2x.png?v=20170727);
        background-position: center center;
    }

}

/* Added by Edmund 20170706 */
#home_btn {
    float: left;
    position: relative;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background-color: #f99920;
    cursor: pointer;
}

#home_btn:hover {
    background-color: #ffaa33;
}

#home_btn_icon {
    background-image: url(/images/icons/home_icon.png);
    width: 24px;
    height: 34px;
    display: block;
}