@font-face {
    font-family: 'Noto sans CJK';
    src: url('./font/NotoSansCJKjp-Regular.otf');
    /* src: url('../font/NotoSansCJKjp-Bold.otf'); */
    /* src: url('./font/SourceHanSerifJP-Bold.otf'); */
}

@media screen and (max-device-width:750px) {
    body {
        min-width: 0px !important;
        overflow-x: hidden;
        background-color: #000;
    }
    .box {
        width: 100%;
        height: 100%;
        overflow-y: visible !important;
        display: flex;
        align-items: flex-start !important;
        justify-content: center;
        background-image: url('../img/phoneBg.png');
        background-size: 100%;
    }
    .bg {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
    }
    .bg-zhe {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
    }
    .newIc {
        width: 25px !important;
        height: 25px !important;
        position: absolute;
        right: 3%;
        top: 3%;
    }
    .title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 50px;
    }
    .titileIcon {
        width: 3.41rem;
        height: 1.54rem;
        margin-left: 10px;
    }
    .listImg {
        width: 6.9rem;
        height: 3.58rem;
    }
    .list-title {
        right: 10px !important;
    }
    .page {
        width: 1020px;
        /* height: 100vh; */
        /* border: 1px solid red; */
        display: flex;
        flex-direction: column;
        opacity: 0;
        padding-bottom: 30px;
    }
    .page2 {
        width: 980px;
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.7);
        margin-top: 70px !important;
        margin-bottom: 50px;
    }
    .time {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 14px;
    }
    .font14 {
        font-size: 14px;
    }
    .selectTitle {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    #selectTitle {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .tab_list2 {
        width: 100%;
    }
    .tab_list2 ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 0.8rem;
        color: #fff;
    }
    .tab_list2 li {
        display: flex;
        align-items: center;
        justify-content: center;
        list-style-type: none;
        flex: auto;
        font-family: "Noto sans CJK";
        font-size: 16px;
        font-weight: bold;
        border: 1px solid transparent;
    }
    .tab_list2 .active {
        color: #FFE700;
        border: 1px solid #FFE700;
    }
    .content {
        width: 100%;
        height: 100%;
        margin-top: 0px;
        background-color: transparent;
    }
    .banner {
        width: 6.9rem;
        height: 100%;
        min-height: 11.9rem;
        overflow: hidden;
    }
    .bannerImgBox {
        width: 6.9rem;
        height: 3.52rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .listImg {
        width: 6.9rem;
        height: auto;
    }
    /* .list {
        width: 980px;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 5px;
        overflow: hidden;
    } */
    .listTab {
        position: relative;
        width: 3.32rem;
        height: 4.2rem;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 5px !important;
        margin-right: 5px !important;
    }
    .listBg {
        width: 3.32rem;
        height: 4.2rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .yellowZhe {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #FFE700;
        z-index: 5;
        opacity: 0;
    }
    .listTab:hover .yellowZhe {
        opacity: 0.2;
        transform: 1s all;
    }
    .list-content {
        width: 100%;
        height: 100%;
        color: #fff;
        position: absolute;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .list-title {
        height: 32px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        color: #000;
        font-weight: bold;
        margin: 10px 0 0 10px;
        /* margin: 10px 0 0 10px; */
    }
    .list-title span {
        background-color: #FFE700;
        padding: 5px 10px;
    }
    .infoTitile {
        align-items: center;
    }
    .list-bottom {
        width: 90%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 10px 20px;
        font-size: 14px;
    }
    .more {
        width: 97%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 5px;
    }
    .bottom {
        width: 97%;
        display: flex;
        justify-content: center;
        margin-top: 15px;
        display: none;
    }
    .bottom-btn {
        width: 48px;
        height: 42px;
        border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .bottom-btn span {
        font-size: 20px;
        font-weight: bold;
    }
    .swiperPage {
        width: 90%;
        height: 50px;
        position: absolute;
        bottom: 0% !important;
        left: 0%;
        z-index: 10;
        pointer-events: none;
        /* border: 1px solid #fff; */
    }
    .swiper-container {
        margin: 5px !important;
    }
    .opaAni {
        animation: opa 1s linear;
    }
    @keyframes opa {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .tabBar {
        /* width: 200px; */
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .tabBar-list {
        width: 50px;
        height: 42px;
        border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .tabBar-list span {
        font-size: 20px;
        font-weight: bold;
        width: 48px;
        text-align: center;
    }
    .yellow {
        background-color: #FFE700;
        color: #000 !important;
    }
    #infoT {
        width: 100%;
    }
    .back {
        font-size: 24px;
        color: #fff;
        opacity: 1 !important;
    }
    .pcMore:hover {}
}