.wrap {
    width: 7.5rem;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    padding-bottom: .8rem;
}

.go-top {
    width: 1.52rem;
    height: .25rem;
    background: url(../images/goto.png)top center no-repeat;
    background-size: 100% 100%;
    display: block;
    margin: 0 auto;
}


/* ��ҳ */

.w-top {
    width: 100%;
    height:0;
    position: relative;
    box-sizing: border-box;
    transition: all .5s;
    -webkit-transition: all .5s;
    margin-top: 1.28rem;
}
.w-top.qg{
    background: url(../images/bg_0703.jpg) no-repeat center;
    background-size: 100% auto;
}
.w-top.double{
    background: url(../images/bgx.jpg) top center no-repeat;
    background-size: 100% 100%;
}
/* .w-top.day{
    background: url(../images/kv.jpg)top center no-repeat;
    background-size: 100% 100%;
}
.w-top.night{
    background: url(../images/kv2.jpg)top center no-repeat;
    background-size: 100% 100%;
} */

/* .w-top.on{
    background:url(../images/top-bgx2.gif)top center no-repeat;
    background-size: 100% 100%;
} */
@keyframes light_ {
    0% {
            filter:brightness(1);
    -webkit-filter:brightness(1);
    }
    50% {
            filter:brightness(1.2);
    -webkit-filter:brightness(1.2);
    }
    100% {
            filter:brightness(1);
    -webkit-filter:brightness(1);
    }
}
@-webkit-keyframes light_ {
    0% {
            filter:brightness(1);
    -webkit-filter:brightness(1);
    }
    50% {
            filter:brightness(1.2);
    -webkit-filter:brightness(1.2);
    }
    100% {
            filter:brightness(1);
    -webkit-filter:brightness(1);
    }
}
.logo {
    width: 2.34rem;
    margin-left: .3rem;
    display: block;
    margin-bottom: 4.5rem;
    z-index: 3;
    position: relative;
    animation: light_ 4s linear infinite both;
    -webkit-animation: light_ 4s linear infinite both;
    opacity: 0;
}
.double .logo{
    margin-left: 0.3rem;
    margin-bottom:3.3rem;
}
.top-gif {
    width: 100%;
    height: 10.59rem;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: -3;
}

.top-gif.on {
    display: block;
    z-index: 1;
}

.video-box {
    width: 1rem;
    height: 1rem;
    padding-top: 0.06rem;
    background: url(../images/video_box0826.png) no-repeat top center;
    background-size: 100% 100%;
    margin: 0 auto;
    background: none;
    position: relative;
    z-index: 3;
    top: -47%;
}
.double .video-box{
    margin-bottom: -0.2rem;
}

.video-content {
    width: 100%;
    height: 100%;
    border-radius: 0.8rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /*display: none;*/
}

.video-content img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}

.video-frame {
    width: 100%;
    height: 100%;
    /*background-position: -2.3rem 0;*/
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    display: block;
    background: none;
}

.btn-video {
    width: 0.76rem;
    height: 0.81rem;
    background-position: -1.61rem 0;
    position: absolute;
    left: 1.05rem;
    top: 0.25rem;
    animation: light_scale 5s linear infinite both;
    -webkit-animation: light_scale 5s linear infinite both;
}

.slogan {
    /* height: 2.44rem; */
    display:none;
    margin: 0 auto;
}
.qg .slogan0{
    width: 6.78rem;
    display: block;
}
.double .slogan1{
    width: 7.5rem;
    display: block;
}
.kv-btn{
    width: 1.32rem;
    height: 2.1rem;
    position: absolute;
    left: .5rem;
    bottom: 3.5rem;
    animation: rotate03 .8s ease-in-out infinite alternate;
    -webkit-animation: rotate03 .8s ease-in-out infinite alternate;
}
.kv-btn.qg{
    background: url(../images/kv-btn.png) top center no-repeat;
    background-size: 100% 100%;
}
.kv-btn.double{
    background: url(../images/kv-btn2.png) top center no-repeat;
    background-size: 100% 100%;
}

@keyframes rotate03
{
    0%{-webkit-transform: translate3d(0, 3%, 0);transform: translate3d(0, 3%, 0);} 
    100%{-webkit-transform: translate3d(0, 0%, 0);transform: translate3d(0, 0%, 0);}
}
@-webkit-keyframes rotate03
{
    0%{-webkit-transform: translate3d(0, 3%, 0);transform: translate3d(0, 3%, 0);} 
    100%{-webkit-transform: translate3d(0, 0%, 0);transform: translate3d(0, 0%, 0);}
}
#kv-btn.night{
    background: url(../images/night.png)top center no-repeat;
    background-size: 100% 100%;
}
#kv-btn.day{
    background: url(../images/day.png)top center no-repeat;
    background-size: 100% 100%;
}

/* ����ҳ */

.sec2 {
    width: 100%;
    height: 13.62rem;
    background: url(../images/sec2x.jpg)top center no-repeat;
    background-size: 100% 100%;
    margin-top: -2px;
}

.swiper-box {
    width: 6.85rem;
    margin-left: 0.4rem;
    height: 3.49rem;
}

.swiper-box .swiper-container {
    width: 100%;
    height: 3.49rem;
}

.swiper-box .swiper-wrapper {
    height: 2.9rem;
}

.swiper-box .swiper-container .swiper-slide {
    width: 100%;
    height: 2.9rem;
}

.swiper-box .swiper-container .swiper-slide a,
.swiper-box .swiper-container .swiper-slide a img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}

.sec2 .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 0rem;
}

.sec2 .swiper-pagination-bullet-active {
    background: #db66bb;
}

/*.news {
    width: 100%;
    height: 5.74rem;
}
*/
.swiper-container_13{
    width: 100%;
}
.swiper-container_13 .swiper-slide::after{
    clear: both;
    display: block;
    content: "";
}
.news-arr {
    width: 0.24rem;
    height: 0.47rem;
    background: url(../images/sp.png) top center no-repeat;
    background-size: 5rem auto;
    float: left;
    margin-left: 0.15rem;
}
@keyframes Left_{0%,30%{opacity:0;-webkit-transform:translateX(0px);transform:translateX(0px)}60%{opacity:1;-webkit-transform:translate(0);transform:translate(0)}to{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}}
@-webkit-keyframes Left_{0%,30%{opacity:0;-webkit-transform:translateX(0px);transform:translateX(0px)}60%{opacity:1;-webkit-transform:translate(0);transform:translate(0)}to{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}}
.news-arL{
    background-position:-3.53rem -1.68rem;
    animation: Left_ 1.5s infinite ease-in-out;
    -webkit-animation: Left_ 1.5s infinite ease-in-out;
}
@keyframes Right_{0%,30%{opacity:0;-webkit-transform:translateX(0px);transform:translateX(0px)}60%{opacity:1;-webkit-transform:translate(0);transform:translate(0)}to{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}}
@-webkit-keyframes Right_{0%,30%{opacity:0;-webkit-transform:translateX(0px);transform:translateX(0px)}60%{opacity:1;-webkit-transform:translate(0);transform:translate(0)}to{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}}
.news-arR{
    background-position:-3.14rem -1.68rem;
    animation: Right_ 1.5s infinite ease-in-out;
    -webkit-animation: Right_ 1.5s infinite ease-in-out;
}
.news-tab {
    width: 6.85rem;
    height: .55rem;
    line-height: .55rem;
    margin-bottom: 0.3rem;
    padding-left: 0.2rem;
    float:  left;
}
.swiper-slide-13-2 .news-tab{
    width: 2.9rem;
}
.news-tab li {
    float: left;
    width: 1.3rem;
    height: .26rem;
    border-right: 0.02rem solid #e1e2e8;
    font-size: 0.25rem;
    text-align: center;
    line-height: .26rem;
    margin-top: 0.14rem;
}

.news-tab li a {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    color: #25346d;
}

.news-tab li.on a {
    color: #4a71c0;
    font-weight: bold;
}

.news-tab li.none {
    border-right: none;
}

.swiper-container_2 {
/*    width: 6.67rem;
    height: 5rem;
    overflow: hidden;
    margin: 0 auto;*/
}

.new-content.on {
    display: block;
}

.news-notice {
    width: 6.67rem;
    height: 0.7rem;
    background: url(../images/notice-frame.png)top center no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-bottom: 0.2rem;
    line-height: 0.45rem;
    text-align: center;
}

.icon-horn {
    display: inline-block;
    width: 0.49rem;
    height: .56rem;
    background-position: -.66rem 0;
    vertical-align: middle;
    margin-right: -0.3rem;
}

.news-notice a {
    width: 100%;
    height: 100%;
    display: block
}

.news-notice span {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.25rem;
    color: #FFF;
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swiper-container_2 ul {
    width: 100%;
    overflow: hidden;
}

.swiper-container_2 ul li {
    width: 100%;
    height: .7rem;
    margin-bottom: 0.1rem;
    line-height: .7rem;
    font-size: 0.25rem;
    color: #4a71c0;
}

.swiper-container_2 ul li::after {
    clear: both;
    display: block;
    content: "";
}

.swiper-container_2 ul li a {
    width: 100%;
    height: 100%;
    display: block;
    color: #4a71c0;
}

.character {
    float: left;
    width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character span {
    display: inline-block;
    vertical-align: middle;
}

.character p {
    display: inline;
    width: 4.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.time {
    float: right;
}

.news-foot {
    margin-top: 0.2rem;
    margin-left: 0.2rem;
}

.news-foot a {
    display: inline-block;
    width: 3.51rem;
    height: 1.69rem;
    margin-right: -0.3rem;
    margin-bottom: -0.1rem;
}

.news-foot a img {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: block;
}


/* ְҵ���� */

.sec3 {
    width: 100%;
    height: 14.99rem;
    background: url(../images/sec3.jpg)top center no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.role-box {
    width: 2.32rem;
    height: 1.26rem;
    position: absolute;
    top: 0.1rem;
    left: 0.5rem;
    overflow: hidden;
}

.role {
    width: 2.32rem;
    height: 1.26rem;
    background: url(../images/role-sp.png)top center no-repeat;
    background-size: 13rem 0;
    display: block;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    position: absolute;
    left: 2.72rem;
    top: 0.15rem;
    background-size: 18rem 1.26rem;
}

.on .role {
    opacity: 1;
    filter: alpha(opacity=100);
}

.role0 {
    background-position: 0 0;
}

.role1 {
    background-position: -2.32rem 0
}

.role2 {
    background-position: -4.64rem 0
}

.role3 {
    background-position: -6.96rem 0
}

.role4 {
    background-position: -9.28rem 0
}

.role5 {
    background-position: -11.6rem 0
}


.role-ul {
    width: 100%;
    height: 1.42rem;
    background: url(../images/icon-cir.png)top center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 6.5rem;
    z-index: 5;
}

.role-li {
    width: 1.08rem;
    height: 1.08rem;
    position: absolute;
    background: url(../images/role-sp2.png)top center no-repeat;
    background-size: 7.5rem 2.5rem;
}

.role-li0 {
    background-position: 0 0;
    left: 0.1rem;
    top: -0.1rem;
}

.role-li0.on {
    background-position: 0 -1.29rem;
}

.role-li1 {
    background-position: -1.17rem 0;
    left: 1.2rem;
    top: 0.6rem;
}

.role-li1.on {
    background-position: -1.17rem -1.29rem;
}

.role-li2 {
    background-position: -2.34rem 0;
    left: 2.5rem;
    top: 0.9rem;
}

.role-li2.on {
    background-position: -2.34rem -1.29rem;
}

.role-li3 {
    background-position: -3.51rem 0;
    left: 3.9rem;
    top: .9rem;
}

.role-li3.on {
    background-position: -3.51rem -1.29rem;
}

.role-li4 {
    background-position: -4.69rem 0;
    right: 1.2rem;
    top: .5rem;
}

.role-li4.on {
    background-position: -4.69rem -1.29rem;
}

.role-li5 {
    background-position: -5.87rem 0;
    right: 0rem;
    top: -0.1rem;
}

.role-li5.on {
    background-position: -5.87rem -1.29rem;
}

.role-content {
    width: 7.5rem;
    height: 9rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 1.2rem;
}

.role-slide {
    width: 100%;
    height: 8.8rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=100);
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    z-index: -3;
}

.role-slide.on {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 3;
}

.sex-box {
    width: 0.7rem;
    position: absolute;
    left: 0.5rem;
    top: 0.1rem;
}

.sex-box a {
    width: .75rem;
    height: .75rem;
    display: block;
    background: url(../images/sp.png)top center no-repeat;
    background-size: 5rem auto;
}

.sex-box .btn-girl {
    background-position: -.92rem -2.93rem;
    margin-bottom: 0.15rem;
}

.sex-box .btn-girl.on {
    background-position: -.92rem -2.16rem;
}

.sex-box .btn-boy {
    background-position: -1.73rem -2.16rem;
}

.sex-box .btn-boy.on {
    background-position: -1.73rem -2.93rem;
}

.role-slide img {
    width: 100%;
    height: 6rem;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: .9rem;
    display: none;
}

.role-slide img.on {
    display: block
}

.btn-role {
    width: 0.83rem;
    height: 0.91rem;
    display: block;
    background: url(../images/sp.png)top center no-repeat;
    background-size: 5rem auto;
    position: absolute;
    top: 3rem;
    z-index: 5;
}

.role-prev {
    background-position: 0 -2.06rem;
    left: 0.2rem;
}

.role-next {
    background-position: 0 -3.12rem;
    right: 0.2rem;
}

.role-slide p {
    width: 5rem;
    text-align: center;
    font-size: 0.25rem;
    line-height: 0.4rem;
    color: #25346d;
    position: absolute;
    top: 6rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.skill-box {
    width: 100%;
    position: absolute;
    bottom: 4.2rem;
}

.icon-jn {
    width: 1.52rem;
    height: 0.25rem;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.3rem;
}

.swiper-skill {
    opacity: 1;
    filter: alpha(opacity=0);
    width: 100%;
    height: 3.9rem;
    overflow: hidden;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    z-index: 3;
    position: absolute;
}

.swiper-skill.on {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 3;
    display: block;
}

.skill-ul {
    margin-left: 0.32rem;
}

.skill-ul::after {
    clear: both;
    display: block;
    content: "";
}

.skill-ul li {
    float: left;
    width: 2.12rem;
    height: 3.24rem;
    margin-right: .18rem;
    border-radius: 0.1rem;
    overflow: hidden;
    border: 0.02rem solid #FFF;
    position: relative;
    background: #f5f8ff;
}

.skill-ul li .jn-box {
    width: 100%;
    height: 1.17rem;
}

.skill-ul li .jn {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: block;
}

.skill-ul .icon-skill-cir {
    width: 0.79rem;
    height: 0.79rem;
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block
}

.skill-ul .icon-skill-cir img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto
}

.skill-name {
    width: 1.8rem;
    font-size: .25rem;
    color: #25346d;
    text-align: center;
    margin: 0 auto;
    margin-top: .65rem;
    margin-bottom: .05rem;
}

.skill-font {
    font-size: .18rem;
    width: 1.8rem;
    line-height: .3rem;
    margin: 0 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.skill-box .swiper-pagination {
    bottom: 0
}

.skill-box .swiper-pagination-bullet {
    background: #FFF;
    opacity: 1;
}

.skill-box .swiper-pagination-bullet-active {
    background: #db66bb;
}


/* ��ɫͼ */

.sec4 {
    width: 100%;
    height: 11.02rem;
    background: url(../images/sec4.jpg)top center no-repeat;
    background-size: 100% 100%;
    margin-top: -1px;
    position: relative;
}

.swiper-container_3 {
    position: relative;
}

.swiper-container_3,
.swiper-wrapper_3,
.swiper-container_3 .swiper-slide {
    width: 100%;
    height: 11.02rem;
}

.swiper-container_3 .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}

.btn-ts {
    width: 0.83rem;
    height: 0.91rem;
    display: block;
    background: url(../images/sp.png)top center no-repeat;
    background-size: 5rem auto;
    position: absolute;
    top: 5rem;
    z-index: 5;
}

.swiper-container_3 .swiper-button-prev {
    background-position: 0 -2.06rem;
    left: 0.2rem;
}

.swiper-container_3 .swiper-button-next {
    background-position: 0 -3.12rem;
    right: 0.2rem;
}

.sec5_href {
    position: absolute;
    bottom: 1.2rem;
    z-index: -1;
    width: 100%;
}


/* ר������+��Ƶ+ͬ��վ */

.sec5 {
    width: 100%;
    background: #FFF;
    position: relative;
    ;
}

.video_photo_box {
    width: 100%;
    margin: 0 auto;
}

.video_photo_box::after {
    clear: both;
    display: block;
    content: "";
}

.video_photo_top {
    width: 6.73rem;
    height: .7rem;
    text-align: center;
    line-height: .7rem;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0.3rem;
    border-bottom: 0.01rem solid #cbddff;
}

.video_photo_top p {
    width: 2.2rem;
    float: left;
    vertical-align: middle;
    font-size: 0.25rem;
    color: #25346d;
    height: .7rem;
    line-height: 0.7rem;
    margin-bottom: 0.15rem;
    margin-right: 0.1rem;
    text-align: center;
}

.video_photo_top p.pl {
    width: 2.2rem;
    text-align: center;
}

.video_photo_top p.on {
    font-size: 0.25rem;
    color: #4a71c0;
    font-weight: bold;
}

.video_photo_more {
    float: right;
    display: block;
    font-size: 0.25rem;
    color: #25346d;
    height: .7rem;
    line-height: 0.7rem;
    margin-bottom: 0.15rem;
    margin-right: 0.5rem;
}

.icon-line {
    width: 0.02rem;
    height: 0.25rem;
    background: #cbddff;
    position: absolute;
    left: 2.23rem;
    top: 0.22rem;
}

.icon-line2 {
    width: 0.02rem;
    height: 0.25rem;
    background: #cbddff;
    position: absolute;
    right: 2.18rem;
    top: 0.22rem;
}

.swiper-container_4 {
    width: 100%;
}

.activities_href {
    position: absolute;
    width: 100%;
    z-index: -1;
    bottom: 14.4rem;
}

.sec5_mix_href {
    position: absolute;
    width: 100%;
    z-index: -1;
    bottom: 20rem;
}

.vpc_ul {
    margin-left: 0.33rem;
}

.vpc_ul::after {
    clear: both;
    display: block;
    content: "";
}

.vpc_ul li {
    float: left;
    width: 3.3rem;
    height: 2.52rem;
    margin-right: 0.25rem;
    font-size: 0.2rem;
    color: #25346d;
    line-height: 0.5rem;
    margin-bottom: 0.2rem;
}

.vpc_ul li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpc_video-box {
    width: 3.3rem;
    height: 2.02rem;
    position: relative;
    border-radius: 0.1rem;
    overflow: hidden;
}

.vpc_video-box img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.btn-vpc-play {
    width: 0.7rem;
    height: 0.7rem;
    display: block;
    background: url(../images/sp.png)top center no-repeat;
    background-size: 5rem auto;
    background-position: -1.8rem -1.30rem;
    position: absolute;
    left: 1.3rem;
    top: 0.65rem;
}

.video-photo-more {
    display: none;
}


/* sec5_mix */

.sec5_mix {
    width: 100%;
    margin: 0 auto;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}

.sec5_mix_top {
    width: 6.73rem;
    height: .7rem;
    text-align: center;
    line-height: .7rem;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0.3rem;
    border-bottom: 0.01rem solid #cbddff;
}

.sec5_mix_top::after {
    clear: both;
    display: block;
    content: "";
}

.sec5_mix_top p {
    width: 1.6rem;
    height: .7rem;
    margin-right: 0.05rem;
    font-size: 0.25rem;
    color: #25346d;
    float: left;
}

.sec5_mix_top p.on {
    font-size: 0.25rem;
    color: #4a71c0;
    font-weight: bold;
}

.sec5_mix_top .icon-line {
    width: 0.02rem;
    height: 0.25rem;
    background: #dbdce3;
    position: absolute;
}

.sec5_mix_top .icon-line0 {
    left: 1.61rem;
    top: 0.22rem;
}

.sec5_mix_top .icon-line1 {
    left: 3.25rem;
    top: 0.22rem;
}

.sec5_mix_top .icon-line2 {
    left: 4.92rem;
    top: 0.22rem;
}

.sec5_mix .swiper-container_10 {
    width: 6.73rem;
    margin: 0 auto;
    height: 4rem;
    overflow: hidden;
}

.sec5_mix .swiper-container_10 ul {
    width: 100%;
    overflow: hidden;
}

.sec5_mix .swiper-container_10 ul li {
    width: 100%;
    height: .7rem;
    margin-bottom: 0.1rem;
    line-height: .7rem;
    font-size: 0.25rem;
    color: #25346d;
}

.sec5_mix .swiper-container_10 ul li a {
    width: 100%;
    height: 100%;
    display: block;
    color: #25346d;
}

.sec5_mix .swiper-container_10 ul li a:active {
    color: #4a71c0;
}


/* ר���ɹò�￿*/

.mix {
    width: 100%;
    margin-bottom: 0.3rem;
}

.mix-top {
    width: 6.73rem;
    height: .8rem;
    line-height: .8rem;
    font-size: 0.25rem;
    color: #25346d;
    border-bottom: 0.01rem solid #cbddff;
    margin: 0 auto;
    margin-bottom: 0.3rem;
}

.mix-top::after {
    clear: both;
    content: "";
    display: block
}

.mix-top-left {
    float: left;
}

.mix-top-name {
    font-size: 0.25rem;
    color: #25346d;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.05rem
}

.mix-line {
    width: 0.02rem;
    height: 0.25rem;
    background: #cbddff;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.05rem;
    margin-top: 0.04rem;
}

.mix-English {
    font-size: 0.25rem;
    color: #79c0f8;
    display: inline-block;
    vertical-align: middle
}

.mix-right {
    display: block;
    float: right;
    font-size: 0.25rem;
    color: #e679a3
}

.mix_ul {
    margin-left: 0.33rem;
}

.mix_ul::after {
    clear: both;
    display: block;
    content: "";
}

.mix_ul li {
    float: left;
    width: 3.3rem;
    margin-right: 0.25rem;
    font-size: 0.2rem;
    color: #25346d;
    line-height: 0.5rem;
    margin-bottom: 0.2rem;
}
/* .activities .mix_ul li .mix_content_box{
    height: 3.24rem;
}
.FANFIC .mix_ul li .mix_content_box{
    height:2.3rem;
} */
.mix_ul li a {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    color: #25346d;
}

.mix_content_box {
    width: 100%;
    height: 2.02rem;
    position: relative;
    border-radius: 0.1rem;
    overflow: hidden;
}

.mix_content_box img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}

.mix_foot::after {
    clear: both;
    display: block;
    content: "";
}

.mix-name {
    width: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}

.mix-author {
    width: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: right;
    text-align: right;
}

.swiper-container_12 {
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}

.swiper-container_12 .swiper-pagination {
    bottom: -.35rem;
}


/* .swiper-container_12 .swiper-pagination-bullet{opacity: 1;} */

.swiper-container_12 .swiper-pagination-bullet-active {
    background: #db66bb;
}

.activities .mix-top-name {
    width: 1.2rem;
    margin-right: 0;
}

.activities .mix-top-left {
    margin-right: 0.05rem;
}

.activities .mix-top-left::after {
    clear: both;
    display: block;
    content: "";
}

.activities .mix-top-left div {
    float: left;
}

.activities .mix-top-left .mix-top-name {
    width: 1.2rem;
    text-align: center;
}

.activities .mix-top-left.on .mix-top-name {
    font-size: 0.25rem;
    color: #4a71c0;
    font-weight: bold;
}

.activities .mix-top-left .mix-line {
    width: 0.02rem;
    height: 0.25rem;
    background: #cbddff;
    float: left;
    margin-right: 0;
    margin-top: 0.29rem;
    margin-left: 0.05rem;
}

.swiper-container_12 {
    width: 100%;
}