@import "./flex.css";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0 auto;
    overflow: hidden;
    max-width: 750px;
    position: relative;
}

img {
    display: block;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 6px;
}

::-webkit-scrollbar:horizontal {
    height: 8px;
}

::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

.music-blk {
    position: absolute;
    left: 3%;
    bottom: 2%;
    z-index: 100;
}

.music-ctl {
    width: 0.6rem;
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* animation */
.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

/* share-mask */
.shareMask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

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

.flex-row-end-center{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.flex-row-start-center{
    display: flex;
    align-items: center;
}

/* page common */
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    overflow: hidden;
}
/* new start */
.swiper-container-3d{
    perspective: none;
}
.page-bg{
    background-color: #25326a;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.bg{
    animation: bgZoomFadeIn 0.8s 0.4s forwards;
    -webkit-animation: bgZoomFadeIn 0.8s 0.4s forwards;
    transform: translateX(0) translateY(0) scale(2);
    opacity: 0;
    width: 100%;
    height: 100%;
}
@keyframes bgZoomFadeIn{
    to{
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}
@keyframes bgZoom{
    from{
        transform: translateX(0) translateY(0) scale(2);
    }
}
.center-with-absolute {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.logo{
    width: 1.83rem;
    position: absolute;
    right: 0.63rem;
    top: 0.51rem;
    z-index: 99;
    -webkit-animation: fadeIn 0.8s 0.4s forwards;
    animation: fadeIn 0.8s 0.4s forwards;
    opacity: 0;
}
.title{
    width: 7.09rem;
    position: absolute;
    left: 0.09rem;
    top: 4.3rem;
    z-index: 99;
    transform: translate(0,0) scale(1);
    opacity: 0;
    transition: 0.5s;
}
.title-ani{
    animation: fadeInLeft 0.8s 0.8s forwards;
}
.title-base{
    opacity: 1;
}
.detail{
    width: 1.72rem;
    top: 7.46rem;
    z-index: 99;
}
.pic{
    width: 2.41rem;
    position: absolute;
    z-index: 10;
    right: 0;
    top: 6.7rem;
}
.swiper2{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
}
.next,.prev{
    width: 1.85rem;
    position: absolute;
    bottom: 0.5rem;
    z-index: 99;
}
.next{
    right: 1.47rem;
}
.prev{
    left: 1.47rem;
}
.title1{
    width: 6rem;
    padding: 0.1rem 0.5rem 0.1rem 0.16rem;
    border-radius: 0.2rem;
    background-image: linear-gradient(-4deg,
    #161696 0%,
    #018ce4 100%),
    linear-gradient(
            #00bcc8,
            #00bcc8);
    background-blend-mode: normal,
    normal;
    display: flex;
    align-items: flex-start;
    top: 2.4rem;
    z-index: 99;
}
.code{
    width: 0.58rem;
    height: 0.59rem;
    flex: none;
}
.title1-text{
    flex: 1;
    margin-left: 0.17rem;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.41rem;
    line-height: 0.59rem;
    text-align: justify;
}
.text-list{
    width: 6.44rem;
    height: 5.61rem;
    background-color: rgba(0,28,78,0.68);
    top: 4.05rem;
    z-index: 99;
    border-radius: 0.3rem;
    overflow: hidden;
}
.text-list-inner{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding:0.43rem 0 2rem;
}
.text-list-unit{
    width: 100%;
    background-color: rgba(6,87,139,0.68);
    margin-top: 0.31rem;
    padding: 0.27rem 0.25rem;
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 99;
}
.text-list-unit:first-of-type{
    margin-top: 0;
}
.text-list-unit-left{
    height: 0.35rem;
    display: flex;
    align-items: center;
    flex: none;
}
.text-list-unit-left-inner{
    width: 0.1rem;
    flex: none;
    height: 0.1rem;
    background-color: #ffffff;
    border-radius: 50%;
}
.text-list-unit-right{
    line-height: 0.35rem;
    color: #ffffff;
    flex: 1;
    margin-left: 0.07rem;
    font-size: 0.26rem;
}
.text-list-bg{
    width: 1.72rem;
    height: auto;
    position: absolute;
    z-index: 10;
    right: 0.51rem;
    bottom: 0;
}
.text3-list{
    top: 4.7rem;
}
.text4-list,.text5-list{
    top: 5.35rem;
}
/* new end */
/* iphone 678 */
@media (min-aspect-ratio: 9/16) {
    
}
/* iphone XR */
@media (min-aspect-ratio: 3/4) {
    
}