.footer {
    background: #121212;
    z-index: 21;
    padding: 0px;
}

.footer-colors {
    width: 100%;
    height: 4px;
    background-color: #333;
    background-position: 0 0;
    background-repeat: repeat;
    background-image: -webkit-repeating-linear-gradient(to right, #68103b, #68103b 50px, #703f28 50px, #703f28 100px, #a16b13 100px, #a16b13 150px, #a5a02c 150px, #a5a02c 200px, #5e812d 200px, #5e812d 250px, #1c6075 250px, #1c6075 300px, #403161 300px, #403161 350px);
    background-image: -o-repeating-linear-gradient(to right, #68103b, #68103b 50px, #703f28 50px, #703f28 100px, #a16b13 100px, #a16b13 150px, #a5a02c 150px, #a5a02c 200px, #5e812d 200px, #5e812d 250px, #1c6075 250px, #1c6075 300px, #403161 300px, #403161 350px);
    background-image: -webkit-repeating-linear-gradient(left, #68103b, #68103b 50px, #703f28 50px, #703f28 100px, #a16b13 100px, #a16b13 150px, #a5a02c 150px, #a5a02c 200px, #5e812d 200px, #5e812d 250px, #1c6075 250px, #1c6075 300px, #403161 300px, #403161 350px);
    background-image: -moz- oldrepeating-linear-gradient(left, #68103b, #68103b 50px, #703f28 50px, #703f28 100px, #a16b13 100px, #a16b13 150px, #a5a02c 150px, #a5a02c 200px, #5e812d 200px, #5e812d 250px, #1c6075 250px, #1c6075 300px, #403161 300px, #403161 350px);
    background-image: -o-repeating-linear-gradient(left, #68103b, #68103b 50px, #703f28 50px, #703f28 100px, #a16b13 100px, #a16b13 150px, #a5a02c 150px, #a5a02c 200px, #5e812d 200px, #5e812d 250px, #1c6075 250px, #1c6075 300px, #403161 300px, #403161 350px);
    background-image: repeating-linear-gradient(to right, #68103b, #68103b 50px, #703f28 50px, #703f28 100px, #a16b13 100px, #a16b13 150px, #a5a02c 150px, #a5a02c 200px, #5e812d 200px, #5e812d 250px, #1c6075 250px, #1c6075 300px, #403161 300px, #403161 350px);
    -webkit-animation: animate-colors 200s infinite linear;
    -moz-animation: animate-colors 200s infinite linear;
    -o-animation: animate-colors 200s infinite linear;
    animation: animate-colors 200s infinite linear;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused
}

.footer:hover .footer-colors {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running
}

.colors-shadow {
    position: absolute;
    left: 0;
    right: 0;
    height: 50px
}

.colors-shadow::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(18,18,18,0.8)), to(#121212));
    background: -webkit-linear-gradient(top, rgba(18,18,18,0.8), #121212);
    background: -moz- oldlinear-gradient(top, rgba(18,18,18,0.8), #121212);
    background: -o-linear-gradient(top, rgba(18,18,18,0.8), #121212);
    background: linear-gradient(to bottom, rgba(18,18,18,0.8), #121212)
}

@-webkit-keyframes animate-colors {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 7000px 0
    }
}

@-moz-keyframes animate-colors {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 7000px 0
    }
}

@-o-keyframes animate-colors {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 7000px 0
    }
}

@keyframes animate-colors {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 7000px 0
    }
}

.footer .containers {
    padding-top: 20px;
    padding-bottom: 20px;
}

.containers, .home-slide .vitara_slide_in .slide_item_containers {
    position: relative;
}

.friendlinks {
    color: #4f4f4f;
    line-height: 2;
    font-size: 12px;
    margin: 0 -0.5em 20px;
    word-break: keep-all
}

.friendlinks h6 {
    font-size: 12px;
    font-weight: normal;
    display: inline;
    margin: 0 .5em
}

.friendlinks ul {
    display: inline
}

.friendlinks li {
    display: inline;
    margin: 0 .5em
}

.friendlinks a {
    color: #4f4f4f
}

.friendlinks a:hover {
    color: #acacac
}

.copyright {
    line-height: 1.5;
    font-size: 12px;
    text-align: center;
    color: #7f7f7f
}

@media (min-width: 768px) {
    .copyright {
        color:#545454
    }
}

.copyright .asline {
    font-style: normal;
    display: block
}

@media (min-width: 768px) {
    .copyright .asline {
        display:inline
    }
}

.copyright p {
    padding: .5em 0;
    -webkit-border-radius: .06rem;
    -moz-border-radius: .06rem;
    border-radius: 0.6rem
}

@media (min-width: 768px) {
    .copyright p {
        background:#000;
        display: inline-block;
        padding: .8em 3em
    }
}

.copyright a {
    color: #7f7f7f
}

@media (min-width: 768px) {
    .copyright a {
        color:#545454
    }
}

.copyright a:hover {
    color: #acacac
}

@media (min-width: 1330px) {
    .copyright {
        line-height: 1.8
    }
}

@media (max-width: 1023.5px) {
    .hide_xs_sm {
        display:none !important
    }
}

@media (max-width: 767.5px) {
    .hide_xs {
        display:none !important
    }
}

@media (max-width: 767px) {
    .footer-tabbar-placeholder {
        background: #121212;
        height: calc(49px + constant(safe-area-inset-bottom));
        height: calc(49px + env(safe-area-inset-bottom));
    }
}

@media (min-width: 1240px) {
    .containers {
        margin: 0 70px;
        max-width: none;
        width: auto;
    }
}

.footer-navi {
    position: relative;
    background: #2a2a32;
    color: #949498;
    line-height: 1.9286;
    z-index: 21;
    display: none;
    padding: 15px 0;
}

@media (min-width: 768px) {
    .footer-navi {
        display: block;
    }
}

@media (min-width: 1024px) {
    .footer-navi {
        padding: 40px 0;
    }
}

.home .footer-navi {
    display: block;
}
    
.containers, .home-slide .vitara_slide_in .slide_item_containers {
    position: relative;
    margin: 0 15px;
}

@media (min-width: 1330px) {
    .containers, .home-slide .vitara_slide_in .slide_item_containers {
        margin: 0 75px;
    }
}

@media (min-width: 1024px) {
    .footer-navi .about {
        width: 32.1538%;
        max-width: 470px;
        margin: 0;
        font-size: 13px;
    }
}

.navis {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    display: none;
}

.footer-navi .widget {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.ewms {
    margin: 0 auto;
    display: none;
}

.bands .item, .bands .group-item .item-images .img-item {
    width: 33.33333333%;
    padding: 0 7px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .fl, .navis .navi {
        float: left;
    }
}

@media (min-width: 1330px) {
    .footer-navi .about {
        font-size: 14px;
        padding-right: 60px;
    }
}

@media (min-width: 1024px) {
    .footer-navi .widget::before {
        content: '';
        width: 0;
        height: 95%;
        border-left: 1px solid #33333c;
        position: absolute;
        right: 0;
        top: 5px;
    }
}

.navis {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    display: none;
}

@media (min-width: 768px) {
    .navis {
        width: 60%;
    }
}

@media (min-width: 1024px) {
    .navis {
        width: 40%;
    }
}

@media (min-width: 1024px) {
    .navis {
        display: block;
    }
}

@media (min-width: 768px) {
    .fl, .navis .navi {
        float: left;
    }
}

.navis .navi {
    width: 33.33333333%;
    text-align: center;
}

@media (min-width: 768px) {
    .fr {
        float: right;
    }
}

.ewms {
    margin: 0 auto;
    display: none;
}

@media (min-width: 1024px) {
    .ewms {
        display: block;
    }
}

@media (min-width: 768px) {
    .ewms {
        width: 270px;
        padding-left: 50px;
        margin: 0;
    }
}

.ewms::before {
    left: 1px;
}

@media (min-width: 1024px) {
    .footer-navi .widget::before {
        content: '';
        width: 0;
        height: 95%;
        border-left: 1px solid #33333c;
        position: absolute;
        right: 0;
        top: 5px;
    }
}

.ewms ul {
    text-align: center;
    margin-bottom: 35px;
}

.ewms .ico {
    font-size: 46px;
    cursor: pointer;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

.ewms h4 {
    font-size: 12px;
    font-weight: normal;
    margin: 0;
}

.ewms {
    margin: 0 auto;
    display: none
}

@media (min-width: 1024px) {
    .ewms {
        display:block
    }
}

@media (min-width: 768px) {
    .ewms {
        width:270px;
        padding-left: 50px;
        margin: 0
    }
}

.ewms::before,.ewms::after {
    right: auto;
    left: 0
}

.ewms::before {
    left: 1px
}

.ewms .li-shequn>.ico {
    color: #ff6000
}

.ewms .like {
    text-align: center
}

.ewms .like h3 {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.1
}

.ewms ul {
    text-align: center;
    margin-bottom: 35px
}

.ewms li {
    float: left;
    width: 33.3333%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline;
    line-height: 1.3
}

.ewms .ico {
    font-size: 46px;
    cursor: pointer;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.ewms .ico:hover {
    color: #fff
}

.ewms .ico:hover>i {
    background-color: #fff;
    color: #ff6000
}

.ewms .ico i {
    display: block;
}

.ewms .ico>i {
    margin: 0 0.7rem;
    background-color: rgba(148, 148, 152, 0.15);
    -webkit-border-radius: .06rem;
    -moz-border-radius: .06rem;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 4rem;
    text-align: center;
    margin-bottom: 1.2rem;
}

.ewms h4 {
    font-size: 12px;
    font-weight: normal;
    margin: 0
}

.footer-navi {
    position: relative;
    background: #2a2a32;
    color: #949498;
    line-height: 1.9286;
    z-index: 21;
    display: none;
    padding: 15px 0
}

@media (min-width: 768px) {
    .footer-navi {
        display:block
    }
}

@media (min-width: 1024px) {
    .footer-navi {
        padding:40px 0
    }
}

.footer-navi a {
    color: #949498
}

.footer-navi a:hover {
    color: #fff
}

.footer-navi .title {
    color: #fff;
    margin-top: 0px;
    font-weight: normal;
    line-height: 1.38889;
    font-size: 18px;
    margin-bottom: 14px
}

.footer-navi .zyt {
    font-size: 30px;
}

@media (max-width: 767px) {
    .footer-navi .zyt {
        font-size: 20px;
    }
}

.footer-navi .widget {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative
}

@media (min-width: 1024px) {
    .footer-navi .widget::before {
        content:'';
        width: 0;
        height: 95%;
        border-left: 1px solid #33333c;
        position: absolute;
        right: 0;
        top: 5px
    }

    .footer-navi .widget::after {
        content: '';
        width: 0;
        height: 95%;
        border-right: 1px solid #222229;
        position: absolute;
        right: 1px;
        top: 5px
    }
}

@media (min-width: 1024px) {
    .footer-navi .about {
        width:32.1538%;
        max-width: 470px;
        margin: 0;
        font-size: 13px
    }
}

@media (min-width: 1330px) {
    .footer-navi .about {
        font-size:14px;
        padding-right: 60px
    }
}

@media (max-width: 767px) {
    .footer-navi .about {
        margin-bottom:15px
    }
}


@media (min-width: 768px) {
    .footer-navi .containers-bq {
        padding-top:32px
    }
}

.footer-navi .qqgroup {
    width: 100%
}

@media (min-width: 1024px) {
    .footer-navi .qqgroup {
        width:auto
    }
}

.footer-navi .qqgroup a {
    display: block;
    width: 220px;
    height: 52px;
    line-height: 52px;
    background: #222228;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    margin: 0 auto
}

@media (min-width: 1330px) {
    .bands .items {
        margin: 0 -15px;
    }
}

.bands .item, .bands .group-item .item-images .img-item {
    width: 33.33333333%;
    padding: 0 7px;
    margin-bottom: 15px;
}

@media (min-width: 1330px) {
    .bands .item, .bands .group-item .item-images .img-item {
        width: 16.66666667%;
    }
}

@media (min-width: 1330px) {
    .bands .item, .bands .group-item .item-images .img-item {
        padding: 0 15px;
    }
}

@media (min-width: 1330px) {
    .bands .item, .bands .group-item .item-images .img-item {
        margin-bottom: 0;
    }
}

.bands .band {
    background-color: #42424d;
    padding-top: 52px;
    -webkit-border-radius: .06rem;
    -moz-border-radius: .06rem;
    border-radius: 0.6rem;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
    -webkit-background-size: auto auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    position: relative;
    background-position: center;
    overflow: hidden;
}

.hidden, .picHD {
    display: none !important;
}

.bands .item,.bands .group-item .item-images .img-item {
    width: 33.33333333%;
    padding: 0 7px;
    margin-bottom: 15px
}

@media (min-width: 1330px) {
    .bands .item,.bands .group-item .item-images .img-item {
        width:16.66666667%
    }
}

@media (min-width: 1330px) {
    .bands .item,.bands .group-item .item-images .img-item {
        padding:0 15px
    }
}

@media (min-width: 1330px) {
    .bands .item,.bands .group-item .item-images .img-item {
        margin-bottom:0;
    }
}

.bands .band::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.bands .band:hover {
    background-color: #24242d
}

.bands .band:hover::after {
    background: transparent
}

.bands .band-icon {
    width: 100%;
    height: 52px;
    padding-top: 0;
    line-height: .52rem;
    text-align: center;
    display: block;
    font-size: .18rem;
    background-color: #212126;
    color: #69696f;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.containers-bq {
    display: flex;
    flex-direction: column;
    min-height: calc(100% - var(--footer-height));
}

.bands {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}


.band-icon {
    width: 1.04rem;
    height: 1.04rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #212126;
    color: #69696f;
    border-radius: 50%;
    transition: all .2s;
}

.icon-text {
    font-size: 0.8rem;
}

.footer {
    height: var(--footer-height);
}

.bands .band-icon:hover {
    background-color: #24242d;
    color: #fff;
    font-size: .2rem
}

.bands .band-icon::after {
    display: none
}

.bands .band-icon .ico::before {
    width: auto;
}

.bands .item:nth-child(1) .band-icon,.bands .item:nth-child(2) .band-icon,.bands .group-item .item-images .img-item:nth-child(1) .band-icon,.bands .group-item .item-images .img-item:nth-child(2) .band-icon {
    font-size: .24rem;
}

.bands .item:nth-child(1) .band-icon:hover,.bands .item:nth-child(2) .band-icon:hover,.bands .group-item .item-images .img-item:nth-child(1) .band-icon:hover,.bands .group-item .item-images .img-item:nth-child(2) .band-icon:hover {
    font-size: .26rem
}

@media (max-width: 767px) {
    .bands .item .band-icon,.bands .group-item .item-images .img-item .band-icon {
        font-size:14px
    }
}

.bands .band-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bands .band-icon .icon-text {
    display: flex;
    align-items: center;
    justify-content: center; 
    font-size: 20px;
    color: #69696f;
    transition: all .2s;
}

.bands .band-icon:hover .icon-text {
    color: #fff;
    font-size: 26px;
}

@media (max-width: 767px) {
    .bands .band-icon .icon-text {
        font-size: 15px;
    }
    
    .bands .band-icon:hover .icon-text {
        font-size: 18px;
    }
}

[class^="iconss"]:before, [class*=" iconss"]:before {
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    opacity: 0.8;
    font-variant: normal;
    text-transform: none;
    line-height: 2em;
    margin-left: .2em;
    font-size: 120%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}

.footer-navi .ewms .like strong {
    background-image: linear-gradient(90deg, #13adff 0, #3385ff 50%, #3385ff);
    font-size: 54px;
    line-height: 1.24;
    font-family: Impact;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-weight: normal
}

.footer-navi .ewms .like strong:after {
    content: "+";
    position: absolute;
    font-size: 28px;
    background-image: linear-gradient(90deg, #13adff 0, #3385ff 50%, #3385ff);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}