/*
 * fansala_main.css 侧边栏联系客服相关样式提取
 * 提取自：/Users/new_kidd/Documents/myproject/jds/public/static/module/index/default/css/fansala_main.css
 * 相关HTML文件：/Users/new_kidd/Documents/myproject/jds/template/index/default/common/footer.html#L85-155
 */



/* ===== 侧边栏基础样式 ===== */
.sidebar *,
.sidebar :after,
.sidebar :before {
    box-sizing: border-box;
}

.sidebar {
    border-radius: 3px 0 0 3px;
    min-width: 60px;
    position: absolute;
    right: 0;
    top: 210px;
    z-index: 1001;
}

.sidebar.animation-active {
    transition: opacity .2s ease-out, transform .3s ease;
}

.sidebar.animation-active .toggle-box {
    transition: width .25s ease;
}

.sidebar.animation-active .sidebar-content {
    transition: transform .25s ease;
}

.sidebar.animation-active select {
    transition: background-color .2s ease-in-out;
}

.sidebar.animation-active .sidebar-button {
    transition: all .2s ease-in-out;
}

/* ===== 侧边栏响应式样式 ===== */
@media (max-width:1199px) {
    .sidebar {
        display: none;
        z-index: 0;
    }
}

.sidebar h3 {
    font-size: 25px;
}

.scroll-initial .sidebar {
    opacity: 0;
}

.sidebar.affix {
    position: fixed;
    top: 72px;
    transform: translateY(78px);
}

.meta-active .sidebar.affix {
    top: 68px;
    transform: translateY(80px);
}

.sidebar.active-item .sidebar-list {
    overflow-y: initial;
}

.sidebar .sidebar-list {
    height: 100%;
    overflow-y: auto;
    position: relative;
    width: 100%;
}

/* ===== 切换框样式 ===== */
.sidebar .toggle-box {
    background: #1852a3;
    clear: both;
    color: #fff;
    float: right;
    height: 60px;
    margin-bottom: 1px;
    overflow: hidden;
    position: relative;
    width: 60px;
}

@media (max-width:1599px) {
    .sidebar .toggle-box {
        height: 60px;
        width: 60px;
    }
}

@media (max-width:1199px) {
    .sidebar .toggle-box {
        border-bottom: 1px solid #fff;
        float: none;
        width: auto;
    }
}

.sidebar .toggle-box.active {
    background: none;
    border-radius: 10px;
    color: #000;
    height: auto;
    margin-left: 15px;
    max-width: 430px;
    min-height: 563px;
    min-width: 60px;
    width: 100%;
    z-index: 2100;
}

.sidebar .toggle-box.active .sidebar-content {
    transform: translateX(0);
}

.sidebar .toggle-box.active .sidebar-button {
    display: none;
    left: 20px;
    position: absolute;
    text-align: left;
    top: 20px;
}

.sidebar .toggle-box.active .icon {
    font-size: 50px;
    font-weight: 400;
    margin: -10px 10px 0 -5px;
}

@media (max-width:1199px) {
    .sidebar .toggle-box.active {
        bottom: 0;
        height: 100%;
        left: 0;
        margin-left: 0;
        overflow-y: scroll;
        padding-bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
    }
}

/* ===== 侧边栏按钮样式 ===== */
.sidebar .toggle-box .button-label {
    display: none;
}

@media (max-width:1199px) {
    .sidebar .toggle-box .button-label {
        display: inline-block;
        padding-left: 5px;
    }
}

.sidebar .icon {
    display: inline-block;
    font-size: 50px;
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
}

@media (max-width:1599px) {
    .sidebar .icon {
        font-size: 40px;
    }
}

/* ===== 侧边栏头部样式 ===== */
.sidebar .sidebar-header {
    margin: 0 0 10px;
    float: left;
}

.sidebar .sidebar-header h3 {
    margin: 0;
}

@media (max-width:767px) {
    .sidebar .sidebar-header h3+span {
        font-size: 14px;
        font-size: 1.4rem;
    }
}

.sidebar .sidebar-inner {
    margin-top: 20px;
}

/* ===== 侧边栏内容样式 ===== */
.sidebar .sidebar-content {
    position: relative;
    transform: translateX(100%);
}

@media (max-width:767px) {
    .sidebar .sidebar-content {
        font-size: 14px;
        font-size: 1.4rem;
    }
}

.sidebar .sidebar-content .icon {
    vertical-align: top;
}

.sidebar .sidebar-content .icon-control {
    color: #fff;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0;
}

@media (max-width:1199px) {
    .sidebar .sidebar-content .icon-control {
        display: block;
        margin-bottom: 20px;
        padding: 0;
        position: relative;
    }
}

.sidebar .sidebar-content .icon-control:before {
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e906";
    display: inline-block;
    font-family: geze_ui !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
}

@media (max-width:1199px) {
    .sidebar .sidebar-content .icon-control:before {
        content: "\e91a";
        transform: rotate(180deg);
    }
}

/* ===== 客服相关样式 ===== */
.kefu-top-bg {
    background: #1852a3;
    padding: 20px 30px 5px 30px;
    width: 430px;
    float: left;
    color: #fff;
}

.kefu-top-bg img {
    float: left;
    margin-right: 20px;
}

.sidebar-header h3 {
    font-size: 20px;
}

.sidebar-header span {
    margin-top: 10px;
    font-size: 14px;
}

.kefu-list-box {
    float: left;
    padding: 20px 30px 0;
    width: 430px;
}

.kefu-list {
    float: left;
    width: 100%;
    margin-top: 20px;
    padding: 10px 0;
    background: #f6f7f9;
    border-left: 5px solid #1852a3;
}

.kefu-list dl {
    float: left;
    width: 100%;
    margin-bottom: 0px;
}

.kefu-list dl span {
    float: left;
    margin-left: 15px;
}

.kefu-list dl span img {
    height: 50px;
}

.kefu-list dl dd {
    float: left;
    margin-left: 15px;
    color: #61605a;
    line-height: 25px;
}

.kefu-list dl dt {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
}

.kefu-list dl dt img {
    height: 30px;
}

.kefu-box-bg {
    background: #e1e1e1;
    padding-bottom: 30px;
    border-radius: 10px;
    width: 100%;
    float: left;
}

.kefu-close {
    width: 100%;
    float: left;
    text-align: right;
    margin-top: 20px;
}

.kefu-close img {
    height: 60px;
}

.kefu-pup {
    float: left;
    width: 60px;
    height: 60px;
}

.kefu-pup img {
    float: left;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    margin-top: 10px;
}

/* ===== 侧边栏按钮样式 ===== */
.sidebar .sidebar-button {
    color: #fff;
    display: inline-block;
    font-family: NeufileGrotesk-MediumExtended, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.sidebar .sidebar-button:focus {
    text-decoration: none;
}

@media (max-width:1199px) {
    .sidebar .sidebar-button:after {
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\e91a";
        font-family: geze_ui !important;
        font-size: 10px;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        line-height: 1;
        position: absolute;
        right: 0;
        text-transform: none;
        top: calc(50% - 5px);
    }
}

/* ===== 移动端侧边栏激活状态 ===== */
@media (max-width:480px) {

    html.sidebar-active,
    html.sidebar-active body {
        height: 100%;
        overflow-y: hidden;
        position: relative;
    }
}

html.sidebar-active .header .navbar>.container:before {
    box-shadow: none;
}

@media (max-width:480px) {
    html.sidebar-active .header .navbar>.container:before {
        background: #002364;
    }
}

@media (max-width:1199px) {
    html.sidebar-active .sidebar {
        display: block;
    }

    html.sidebar-active .sidebar.affix,
    html.sidebar-active .sidebar.affix-top {
        opacity: 1;
    }

    html.sidebar-active .sidebar {
        background: #002364;
        border-radius: 0;
        bottom: 0;
        left: calc(100% - 460px);
        position: fixed;
        right: 0;
        top: 59px;
        z-index: 1001;
    }
}

@media (max-width:480px) {
    html.sidebar-active .sidebar {
        left: 0;
    }
}

html.sidebar-active .header .navbar>.container .sidebar-header-button {
    border-left: none;
}

html.sidebar-active .header .navbar>.container .sidebar-header-button .ico-close {
    display: inline-block;
}

html.sidebar-active .header .navbar>.container .productfinder-header-button,
html.sidebar-active .header .navbar>.container .sidebar-header-button .ico-sidebar,
html.sidebar-active.sidebar-elemente-active .header .navbar>.container .productfinder-header-button {
    display: none;
}

html.sidebar-active.sidebar-elemente-active .header .navbar>.container .sidebar-header-button {
    background: #002364;
    color: #fff;
}

@media (max-width:480px) {
    html.sidebar-active.sidebar-elemente-active .header .navbar>.container:before {
        background: #002364;
    }
}

@media (max-width:1199px) {
    .sidebar-active.sidebar-elemente-active .select2-container--open .select2-dropdown--below {
        border-top: 0;
        margin-top: -2px;
        z-index: 9999;
    }

    .sidebar-active .sidebar {
        z-index: 1001;
    }
}