body {
    background-color: #010101;
}

.root {
    width: 100%;
    margin-top: 108rem;
}

.root a {
    font-size: 0;
}

.root img {
    width: 100%;
    height: 100%;
}

/* 列表item样式 */
.list-item {
    width: 686rem;
    height: 686rem;
    position: relative;
}

.list-item .mask {
    width: 100%;
    height: 468rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.list-item .item-info {
    position: absolute;
    left: 32rem;
    right: 32rem;
    bottom: 60rem;
}

.list-item .item-info .item-category {
    color: #FFFFFF;
    font-size: 24rem;
    font-weight: 500;
}

.list-item .item-info .item-title {
    color: #FFFFFF;
    font-size: 54rem;
    font-weight: 500;
    margin-top: 4rem;
}

.list-item .item-info .type {
    margin-top: 58rem;
    display: flex;
    align-items: center;
}

.list-item .item-info .type .square {
    width: 18rem;
    height: 20rem;
    background-color: #DEDEDE;
}

.list-item .item-info .type .type-name {
    color: #FFFFFF;
    font-size: 24rem;
    font-weight: 500;
    margin-left: 20rem;
}


/* 列表item样式-2 */
.list-item-2 {
    margin-top: 32rem;
}

.list-item-2 .image-box-2 {
    width: 100%;
    height: 294rem;
}

.list-item-2 .item-info-2 {
    height: 326rem;
    background-color: #FFFFFF;
    padding: 32rem 32rem 0 32rem;
    position: relative;
    box-sizing: border-box;
}

.list-item-2 .item-info-2 .item-2-category {
    color: #4A4A4A;
    font-size: 24rem;
    font-weight: 500;
}

.list-item-2 .item-info-2 .item-2-title {
    color: #000000;
    font-size: 44rem;
    font-weight: 500;
    margin-top: 20rem;
}

.list-item-2 .item-info-2 .type-2 {
    display: flex;
    align-items: center;
    position: absolute;
    left: 32rem;
    bottom: 50rem;
}

.list-item-2 .item-info-2 .type-2 .square-2 {
    width: 18rem;
    height: 20rem;
    background-color: #DEDEDE;
}

.list-item-2 .item-info-2 .type-2 .type-2-name {
    color: #000000;
    font-size: 24rem;
    font-weight: 500;
    margin-left: 20rem;
}

/* 列表item样式-3 */
.list-item-3 {
    height: 172rem;
    margin-top: 60rem;
    display: flex;
    justify-content: space-between;
}

.list-item-3 .item-3-left {
    width: 172rem;
    height: 172rem;
}

.list-item-3 .item-3-right {
    width: 474rem;
}

.list-item-3 .item-3-right .item-3-category {
    color: #FFFFFF;
    font-size: 22rem;
    font-weight: 500;
}

.list-item-3 .item-3-right .item-3-title {
    color: #FFFFFF;
    font-size: 32rem;
    font-weight: 500;
    margin-top: 8rem;
}

/* 首页分类名称样式 */
.box-header {
    padding: 80rem 0;
}

.box-header .name {
    color: #FFFFFF;
    font-size: 84rem;
    font-weight: 500;
    text-align: center;
    margin: 0 auto;
}

.box-header .name.black {
    color: #000000;
}

.box-header .line {
    width: 58rem;
    height: 6rem;
    background-color: #F9CC02;
    margin: 60rem auto 0 auto;
}

/* 首页查看更多样式 */
.home-more {
    padding-top: 80rem;
}

.home-more .more {
    width: 160rem;
    border-bottom: 4rem solid #F9C74D;
    color: #FFFFFF;
    font-size: 22rem;
    text-align: center;
    margin: 0 auto;
}

.home-more .more.black {
    color: #000000;
}

/* 内容区域 */
.root .box-1 {
    padding-top: 1rem;
}
.root .box-1 .list {
    margin-top: 40rem;
    padding: 0 32rem;
}

.root .box-1 .box-1-gg {
    height: 188rem;
    margin-top: 80rem;
}

.root .box-2 .discover {
    margin-top: 20rem;
    margin-left: 32rem;
    color: #FFFFFF;
    font-size: 30rem;
    font-weight: 500;
}

.root .box-2 .list {
    margin-top: 70rem;
    display: flex;
    overflow-x: auto;
}

.root .box-2 .list::-webkit-scrollbar {
    display: none !important;
}

.root .box-2 .list .item {
    width: 332rem;
    height: 332rem;
}
.root .box-2 .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.root .box-2 .list .item.no-margin {
    margin-right: 0;
}

.root .box-3 {
    margin-top: 120rem;
}

.root .box-3 .list {
    margin-top: 40rem;
}

.root .box-3 .list .images-box {
    height: 614rem;
    padding-bottom: 84rem;
    position: relative;
}

.root .box-3 .list .images-box .left-arrow {
    position: absolute;
    top: 290rem;
    left: 14rem;
    width: 20rem;
    height: 34rem;
}

.root .box-3 .list .images-box .right-arrow {
    position: absolute;
    top: 290rem;
    right: 14rem;
    width: 20rem;
    height: 34rem;
}

.root .box-4 {
    margin-top: 120rem;
}

.root .box-4 .avatar {
    width: 160rem;
    height: 160rem;
    margin: 20rem auto 0 auto;
    box-sizing: border-box;
}
.root .box-4 .avatar img{
    width: 160rem;
    height: 160rem;
    border: 2rem solid #F9CC02;
    border-radius: 80rem;
}

.root .box-4 .editor {
    color: #FFFFFF;
    font-size: 30rem;
    font-weight: 500;
    text-align: center;
    margin-top: 40rem;
}

.root .box-4 .list {
    height: 658rem;
    margin-top: 100rem;
    position: relative;
}

.root .box-4 .list .left-arrow {
    position: absolute;
    top: 294rem;
    left: 20rem;
    width: 20rem;
    height: 34rem;
}

.root .box-4 .list .right-arrow {
    position: absolute;
    top: 294rem;
    right: 20rem;
    width: 20rem;
    height: 34rem;
}

.root .box-4 .summary {
    color: #FFFFFF;
    font-size: 32rem;
    font-weight: 500;
    margin: 86rem 32rem 0 32rem;
}

.root .box-4 .box-4-gg {
    height: 188rem;
    margin-top: 80rem;
}

.root .box-5 {
    padding-bottom: 80rem;
}

.root .box-5 .list {
    padding: 0 32rem;
}

.root .box-6 {
    background-color: #F2F2F2;
    padding-bottom: 80rem;
}

.root .box-6 .image-box {
    width: 686rem;
    height: 686rem;
    padding: 0 32rem;
    margin-top: -48rem;
}

.root .box-6 .title {
    color: #000000;
    font-size: 48rem;
    font-weight: 500;
    margin: 80rem 32rem 0 32rem;
}

.root .box-6 .summary {
    color: #000000;
    font-size: 30rem;
    font-weight: 500;
    margin: 60rem 32rem 0 32rem;
}

.root .box-7 .list {
    padding: 0 32rem;
}

.root .box-8 {
    padding-bottom: 200rem;
}

.root .box-8 .list {
    padding: 0 32rem;
    margin-top: -20rem;
}
/************************/
.swiper-container1 {
      width: 750rem;
      height: 332rem;
}

/***********************/
/*************************************/
.mySwiper {
    width: 456rem;
    height: 588rem;
    overflow: hidden;
}

.mySwiper .swiper-slide {
    display: flex;
    /*align-items: center;*/
    /*justify-content: center;*/
    width: 456rem;
    height: 588rem;
}

.mySwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/***********************/
.swiper-container{
    width: 638rem;
    margin: 0 auto;
    overflow: hidden;
}
.swiper-container .swiper-slide{
     width: 614rem;
    height: 614rem;
}
.swiper-container .swiper-slide {
    z-index: 1;
	transform: scale(0.96);
 }
.swiper-container .swiper-slide-active,.swiper-slide-duplicate-active{
     z-index: 2;
      transform: scale(0.96);
	}

.swiper-pagination .swiper-pagination-bullet
{
    width: 16rem;
    height: 16rem;
    background: #2D2D2D;
    opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet-active
{
    width: 16rem;
    height: 16rem;
    background: #FFFFFF;
}

.box3_channelname
{
       position: absolute;
    left: 34rem;
    bottom: 211rem;
    height: 34rem;
    font-size: 24rem;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 34rem;
    z-index: 10;
}

.box3_title
{
    position: absolute;
    left: 34rem;
    bottom: 36rem;
    width: 570rem;
    height: 152rem;
    font-size: 54rem;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 76rem;
    overflow: hidden;
    z-index: 10;
}