main {
    flex: 1;
    padding: 5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    /* background: var(--background-light); */
}

@media only screen and (max-width: 767.98px) {
    main {
        padding: 1rem;
    }
}

.h-full {
    height: 100%;
}

.h-auto {
    height: auto;
}

.line {
    /* position: absolute; */
    width: 100%;
    height: 1px;
    background: #dddddd;
    top: 0;
    left: 0;
    top: 50%;
    margin-top: -1px;
    margin-bottom: 2rem;
}

.app-read-container {
    letter-spacing: calc(-.037em + .526px);
    --navheight: value;
    --sc4height: value;
}

.app-read-container img {
    width: 100%;
    display: block;
    vertical-align: middle;
}
.app-read-container video{
    width: 100%;
    display: block;
}

.app-read-container a {
    color: inherit;
    text-decoration: none;
}

.app-read-container .show-pc {
    display: inline-block;
}

.app-read-container .show-mob {
    display: none;
}

.app-read-container .app-read-show-ie{
    display: none;
}

.app-read-container .text-nowrap {
    white-space: nowrap;
}

.app-read-container picture {
	width: 100%;
}
.app-read-container .blur-up {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: -webkit-filter 400ms;
	transition: -webkit-filter 400ms;
	transition: filter 400ms;
	transition: filter 400ms, -webkit-filter 400ms;
}
.app-read-container .blur-up.lazyloaded {
	-webkit-filter: blur(0);
	filter: blur(0);
}
.app-read-container .lazyload:not([src]) {
	display: none;
}

.app-read-container .read-title {
    color: #000;
    font-size: 2.5vw;
    font-weight: 700;
    line-height: 1.6;

}

.app-read-container .read-text {
    color: #767676;
    font-size: 1.25vw;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 1.6666666vw;
}

.app-read-container .sc3-voice-container,
.app-read-container .app-read-sc5,
.app-read-container .app-read-sc6,
.app-read-container .app-read-sc7,
.app-read-container .app-read-sc8 
{
    width: 83.333333vw;
    margin: 0 auto;
    background-color: #f5f5f7;
}

/* kv */
.app-read-container .app-read-sc1-kv {
    width: 100%;
    display: flex;
    padding-top: 7.8645833vw;
    padding-left: 14.01041667vw;
    padding-bottom: 5.20833333vw;
    box-sizing: border-box;
}

.app-read-sc1-kv .sc1-mkt-text {
    margin-top: 4.302083333vw;
}

/* .app-read-sc1-kv .sc1-mkt-text img {
    width: 10.625vw;
} */

.app-read-sc1-kv .mkt-title {
    width: 34.5vw;
    color: #000;
    font-size: 4.1666666vw;
    font-weight: 500;
    line-height: 1.25;
    margin-top: 1.145833333vw;
}

.app-read-sc1-kv .mkt-text {
    width: 34vw;
    font-size: 1.25vw;
    font-weight: 500;
    color: #767676;
    line-height: 1.6;
    margin-top: 0.52083333vw;
}


.app-read-sc1-kv .sc1-mkt-img {
    width: 40.67708333vw;
    margin-left: 9.0625vw;
}


/* sc2 */
.app-read-container .app-read-sc2 {
    background-color: #fff;
    padding-top: 8.0208333vw;
}

.app-read-sc2 .text-box {
    width: 47.354167vw;
    margin: 0 auto;
    text-align: center;
}

.app-read-sc2 .read-text {
    text-align: left;
    margin-left: 1.111111vw;
}

.app-read-sc2 .sc2-swiper-box {
    margin-top: 3.52083333vw;
    overflow: hidden;
    padding-left: 0.83333333vw;
    padding-bottom: 1.71875vw;
}

.app-read-sc2 .sc2-swiper-container {
    display: flex;
}

.app-read-sc2 .sc2-swiper-warpping {
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
}

.app-read-sc2 .sc2-swiper-silde {
    width: 13.85416667vw;
    flex-shrink: 0;
    flex-grow: 1;
}

.app-read-sc2 .book-name {
    font-size: 1.14583333vw;
    font-weight: 500;
    line-height: 1.25;
    color: #767676;
}

@keyframes breath{
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.4;
    }
}
@-webkit-keyframes breath{
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.4;
    }
}

/* sc5 */
.app-read-sc5 .sc5-animation-box {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-top: 7.2916666vw;
    padding-left: 15.625vw;
    padding-bottom: 6.927083vw;
}
.app-read-sc5 .sc5-bg-img{
    width : 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.app-read-sc5 .sc5-book-container{
    width: 27.44791667vw;
    position: relative;
    z-index: 2;
}
.app-read-sc5 .read-subtitle{
    font-size: 1.875vw;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 1.09375vw;
}
.app-read-sc5 .app-read-not-ie{
    position: relative;
    z-index: 2;
}

.app-read-sc5 .sc5-yy-img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 32vw;
}

.app-read-sc5 .text-box {
    width: 27.041666vw;
    margin-left: 6.6666667vw;
    position: relative;
    z-index: 2;
}

/* sc6 */
.app-read-sc6 .sc6-animation-container {
    position: relative;
    width:100%;
    margin: 0 auto;
    display: flex;
    padding: 9.6354167vw 0 8.07291667vw;
    padding-left: 7.39583333vw;
    box-sizing: border-box;
    background-color: #f5f5f7;
}

.app-read-sc6 .sc6-img-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.app-read-sc6 .sc6-animation-box {
    width: 31.9791667vw;
    position: relative;
    z-index: 2;
    margin-left: 13.0729167vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-read-sc6 .text-box {
    position: relative;
    width: 22.5vw;
    margin-top: 1.9vw;
    z-index: 2;
}

/* sc7 */
.app-read-container .app-read-sc7 {
    padding-top: 4.32291667vw;
}

.app-read-sc7 .text-box {
    width: 40.6770833vw;
    margin: 0 auto;
    text-align: center;
}

.app-read-sc7 .sc7-img-box {
    width: 75.46875vw;
    margin-top: 3.02083333vw;
    margin-left: 6.5625vw;
}


/* sc8 */
.app-read-container .app-read-sc8 {
    position: relative;
    margin-top: -3.28125vw;
}

.app-read-sc8 .sc8-content-wrapper {
    position: absolute;
    padding-left: 4.6875vw;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.app-read-sc8 .text-box {
    width: 25.41666667vw;
}

.app-read-sc8 .read-title {
    color: #fff;
    line-height: 1.6;
    margin-top: 9.375vw;
}

.app-read-sc8 .icon-container {
    margin-left: 15.83333vw;
    position: relative;
}

.app-read-sc8 .icon-warpper1 {
    width: 37.5vw;
    height: 36.0416667vw;
    background-color: #414344;
    opacity: 0.34;
}

.app-read-sc8 .icon-warpper2 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    padding: 4.47916667vw 4.84375vw;
    box-sizing: border-box;
}

.app-read-sc8 .icon-warpper2>div {
    display: flex;
    justify-content: space-between;
}

.app-read-sc8 .icon-item {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.app-read-sc8 .icon-container .icon-center {
    padding: 2.65625vw 0;
    justify-content: center;
}

.app-read-sc8 .icon-item img {
    width: 4.21875vw;
}

.app-read-sc8 .icon-desc {
    font-size: 1.25vw;
    color: #fff;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 1.145833333vw;
}

.app-read-sc8 .read-ps{
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
    color: #737171;
    margin-top: 0.520833vw;
    text-align: right;
    padding-right: 5.208333vw;
}

@media screen and (min-width: 1920px){
    .app-read-sc8 .read-ps{
        font-size: 0.625vw;
    }
}
/* mob */
@media screen and (orientation:portrait) and (max-width: 1024px) and (max-device-width:1024px),
(max-width: 1023px) {
    .app-read-container {
        background-color: #f5f5f7;
    }
    .app-read-container .show-pc{
        display: none;
    }
    .app-read-container .show-mob{
        display: block;
    }
    .app-read-container .read-title {
        font-size: 4.44444445vw;
    }

    .app-read-container .read-text {
        font-size: 3.3333333vw;
        margin-top: 5.55555556vw;
    }

    .app-read-container .sc3-voice-container,
    .app-read-container .app-read-sc5,
    .app-read-container .app-read-sc6,
    .app-read-container .app-read-sc7,
    .app-read-container .app-read-sc8 {
        width: 100%;
    }

    /* kv */
    .app-read-container .app-read-sc1-kv {
        width: 100%;
        display: flex;
        flex-flow: column;
        padding-top: 13.19444444vw;
        padding-left: 7.6388889vw;
        padding-bottom: 6.38888889vw;
        background-color: #fff;
        overflow: hidden;
    }

    .app-read-sc1-kv .sc1-mkt-text {
        margin-top: 0;
    }

    .app-read-sc1-kv .sc1-mkt-text img {
        width: 18.3333333vw;
    }

    .app-read-sc1-kv .mkt-title {
        width: 83.333333vw;
        font-size: 5.83333333vw;
        margin-top: 3vw;
    }

    .app-read-sc1-kv .mkt-info {
        img {
            width: 20px;
            height: 20px;
        }
    }

    .app-name {
        font-size: 1.3rem;
    }

    .app-read-sc1-kv .mkt-text {
        width: 82.333333vw;
        font-size: 3.3333333vw;
        margin-top: 5.5555556vw;
    }

    .app-read-sc1-kv .sc1-mkt-img {
        width: 90.41666667vw;
        margin-top: 6.80555556vw;
        margin-left: 3.47222222vw;
    }

    /* sc2 */
    .app-read-container .app-read-sc2 {
        padding-top: 16.666667vw;
    }

    .app-read-sc2 .text-box {
        width: 100%;
        text-align: center;
    }

    .app-read-sc2 .read-text {
        width: 84.0277778vw;
        text-align: center;
        margin: 0 auto;
        margin-top: 5.55555556vw;
    }

    .app-read-sc2 .sc2-swiper-box {
        margin-top: 10.34722222vw;
        padding-left: 0;
        padding-bottom: 7.361111111vw;
    }

    .app-read-sc2 .sc2-swiper-container {
        display: flex;
    }

    .app-read-sc2 .sc2-swiper-warpping {
        display: flex;
    }

    .app-read-sc2 .sc2-swiper-silde {
        width: 20.69444444vw;
        flex-shrink: 0;
        flex-grow: 1;
    }

    .app-read-sc2 .book-name {
        font-size: 3.3333333vw;
    }

    /* sc5 */
    .app-read-sc5 .sc5-animation-box {
        width: 100%;
        display: flex;
        flex-flow: column-reverse;
        justify-content: center;
        padding: 0;
        padding-top: 8.75vw;
        padding-bottom: 18.3333333vw;
    }

    .app-read-sc5 .text-box {
        width: 90.52777778vw;
        margin: 0 auto;
        text-align: center;
    }
    .app-read-sc5 .read-subtitle{
        font-size: 3.33333333vw;
    }
    .app-read-sc5 .read-title{
        margin-top: 5.55555556vw;
    }

    .app-read-sc5 .read-text {
        width: 53.9444444vw;
        margin: 0 auto;
        margin-top: 5.5555556vw;
    }

    .app-read-sc5 .sc5-book-container {
        width: 48.19444444vw;
        height: 59.72222222vw;
        margin: 0 auto;
        margin-top: 16.666667vw;
    }

    .app-read-sc5 .sc5-yy-img{
        width: 60vw;
    }

    /* sc6 */
    .app-read-sc6 .sc6-animation-container {
        position: relative;
        width: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        padding-top: 16.666667vw;
        padding-bottom: 19.1666667vw
    }

    .app-read-sc6 .text-box {
        width: 78.6111111vw;
        text-align: center;
        margin-top: 0;
    }

    .app-read-sc6 .read-text {
        width: 70.972222vw;
        margin: 0 auto;
        margin-top: 5.55555556vw;
    }

    .app-read-sc6 .sc6-animation-box {
        width: 57.6388889vw;
        margin-top: 6.25vw;
        margin-left: 0;
    }

    /* sc7 */
    .app-read-container .app-read-sc7 {
        padding-top: 16.666667vw;
    }

    .app-read-sc7 .text-box {
        width: 71.25vw;
        margin: 0 auto;
        text-align: center;
    }

    .app-read-sc7 .read-text {
        width: 47.0833333vw;
        margin: 0 auto;
        margin-top: 5.55555556vw;
    }

    .app-read-sc7 .sc7-img-box {
        width: 91.3888889vw;
        margin-top: 6.1111111vw;
        margin-left: 8.19444444vw;
    }

    /* sc8 */
    .app-read-container .app-read-sc8 {
        position: relative;
        margin-top: 2.5vw;
    }

    .app-read-sc8 .sc8-content-wrapper {
        padding-left: 5vw;
    }

    .app-read-sc8 .text-box {
        width: 34.7222222vw;
    }

    .app-read-sc8 .read-title {
        margin-top: 13.75vw;
        font-size: 3.33333333vw;
    }

    .app-read-sc8 .icon-container {
        margin-left: 13.333333vw;
        position: relative;
    }

    .app-read-sc8 .icon-warpper1 {
        width: 46.9444444vw;
        height: 45.138889vw;
        background-color: #414344;
        opacity: 0.34;
    }

    .app-read-sc8 .icon-warpper2 {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        padding: 5.5555556vw 5.97222222vw;
        box-sizing: border-box;
    }

    .app-read-sc8 .icon-warpper2>div {
        display: flex;
        justify-content: space-between;
    }

    .app-read-sc8 .icon-container .icon-center {
        padding: 3.33333333vw 0;
        justify-content: center;
    }

    .app-read-sc8 .icon-item img {
        width: 5.1388888vw;
    }
    .app-read-sc8 .icon-desc{
        font-size: 2vw;
    }

    .app-read-sc8 .read-ps{
        margin-top: 1.388889vw;
        font-size: 3.3333333vw;
        padding-right: 2.7777778vw;
    }
}


/* zdp */
@media screen and (min-device-aspect-ratio:10/13) and (max-device-aspect-ratio:127/100){

}


/* ie */
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
    .app-read-container .app-read-not-ie{
        display: none;
    }

    .app-read-container .app-read-show-ie{
        display: block;
    }
    .app-read-sc5 .app-read-show-ie{
        position: relative;
        z-index: 2;
    }
    .app-read-sc6 .sc6-animation-container{
        padding-top: 8.4vw;
    }
    .app-read-sc6 .text-box{
        width: 23.5vw;
    }
}
