@charset 'utf-8';
.donut {
   display: inline-block;
   border: 4px solid rgba(0, 0, 0, 0.5);
   border-left-color: #59a782;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   animation: donut-spin 1.2s linear infinite;
}
body {
   font-size: .14rem;
   font-weight: 300;
   color: #333;
   background-color: #fff;
   width: 100%;
   position: relative;
}

a {
   color: #333;
   text-decoration: none;
}

.specialText {
   color: #CD2500 !important;
}

.hidden {
   display: none !important;
}

.clearfix::after {
   content: '';
   display: block;
   line-height: 0;
   height: 0;
   overflow: hidden;
   clear: both;
}

header {
   height: 7.46rem;
   background: url(../img/wo-top.webp);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   position: relative;
   z-index: -1;
}

header .header {
   padding: .2rem 0 0 .2rem;
   width: 1.23rem;
   height: .25rem;
}

header .top-zglt {
   width: 1.23rem;
   height: .25rem;
}

.header a {
   display: inline-block;
   width: 5vw;
   height: 5vw;
   background: url(../img/icon-back.png) no-repeat center / auto 100%;
   position: fixed;
}

header h1 {
   text-align: center;
   color: #000;
   font-size: 1.3rem;
   font-weight: 600;
}

.main {
   height: 20rem;
   position: relative;
   top: -2.5rem;
   z-index: 4;
}

.pannel {
   display: flex;
   padding: 5vw 3vw;
   margin-top: .8rem;
}

.pannel figure {
   flex: 1;
}

.pannel figure img {
   display: block;
   width: 43%;
   margin: 0 auto 2vw;
}

.fromDiv {
   margin: 0 auto;
   width: 89%;
   height: 1.92rem;
   background: url(../img/top-shuru.webp);
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.fromDiv .form .wo-title {
   margin-bottom: .1rem;
   width: 100%;
   height: .16rem;
   text-align: center;
   line-height: .16rem;
   font-size: .12rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #433FBB;
}

.form {
   padding: 4vw 5vw;
   padding-bottom: 0;
   position: relative;
}

.form .int {
   margin: 0 auto;
   width: 2.71rem;
   flex: 1;
   display: flex;
   align-items: center;
   height: .44rem;
   background: #E1E1E1;
   border-radius: 2px;
}

.form .panel_div {
   background: #E1E1E1;
}

.phone_Div_flex {
   display: flex;
   justify-content: space-between;
}

.vcode-label-describe {
   margin-top: 14px;
   font-size: 13px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #888888;
   line-height: 17px;
}

.form .int .preicon {
   width: 13vw;
   height: 14.2vw;
   background: blueviolet;
   border-radius: 2vw 0vw 0vw 2vw;
   text-align: center;
   line-height: 13vw;
}

.phone-input-icon {
   font-size: 16px;
   font-weight: 600;
   color: #000000;
}

.form .int label {
   flex: 1;
   position: relative;
}

.glyphicon-phone:before {
   content: "\e145";
}

.form .int label span {
   width: 48vw;
   padding: 2vw;
   border-radius: 1vw;
   border: 1px solid #F56C6C;
   background: #FEF0F0;
   color: #F56C6C;
   font-size: 14px;
   line-height: 1.6;
   top: 150%;
   position: absolute;
   z-index: 99;
}

.form .int label input {
   display: block;
   width: 2.71rem;
   height: .44rem;
   line-height: .44rem;
   background: #E1E1E1;
   border: 0;
   outline: none;
   font-size: .17rem;
   font-weight: 400;
   color: #999999;
   margin-top: 3px;
   margin: 0 auto;
   padding-left: 2px;
}

.form .int label #vcode-input {
   font-size: 4.5vw !important;
}

.form .int .clears {
   font-size: 15px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #FF88BE;
   padding-right: 4vw;
}

.form .int .preicon.code-icon {
   background: url(../img/icon-code.png)no-repeat center / auto 50%;
}


.form .lianjie {
   margin-bottom: 15px;
   height: 11vw;
   width: 100%;
   border-radius: 1vw;
   color: #fff;
   border: 0;
   font-size: 18px;
}

.form .icon-point {
   height: 47px;
   width: 39px;
   background: url(../img/icon-point.png) no-repeat center top;
   top: 22vw;
   left: 60vw;
   position: absolute;

   /* 动效 */
   animation: runpoint 0.5s linear infinite normal;
   animation-direction: alternate;

   /* Safari and Chrome */
   -webkit-animation: runpoint 0.5s linear infinite normal;
   -webkit-animation-direction: alternate;
}

/* 手势动效 */
@keyframes runpoint {
   from {
      top: 22vw;
      left: 60vw;
   }

   to {
      top: 26vw;
      left: 64vw;
   }
}

/* Safari and Chrome */
@-webkit-keyframes runpoint {
   from {
      top: 22vw;
      left: 60vw;
   }

   to {
      top: 26vw;
      left: 64vw;
   }
}

.form .user-info {
   margin: 0 auto;
   width: 100%;
   border-radius: 3px;
   padding: 1px;
}

.form .user-info div {
   width: 100%;
   padding: 1vw 0;
}

.form .user-info .user-info-title {
   font-size: 4.5vw;
   font-weight: bold;
   color: #FE3D6E;
}

.form .user-info .btn {
   height: auto;
   width: 49%;
   border-radius: 2vw;
   color: #fff;
   background: #88D94D;
   border: 3px solid #88D94D;
   font-size: 18px;
   font-weight: 500;
   padding: 1vw;
   margin-top: 2vw;
}

.info-title {
   padding: 0;
   height: 3rem;
   background: url(../img/info-title.png) no-repeat center top / 100% auto;
}

/* =============================用户授权======================== */
.form .userInfo {
   margin: 0 auto;
   margin-top: .15rem;
   width: 100%;
   height: auto;

}

.form .userInfo .userInfo-statement {
   display: flex;
   justify-content: center;
   width: auto;
   font-size: .115rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #333333;
}

.form .userInfo .userInfo-statement .statement-agree {
   display: block;
   width: .13rem;
   height: .13rem;
   border-radius: 50%;
   border: 1px solid #413FBB;
   margin-right: .05rem;
}

.form .userInfo .userInfo-statement .statement-agree-check {
   width: .13rem;
   height: .13rem;
   border-radius: 50%;
   border: 1px solid #413FBB;
   background: url(../img/wo-check.webp)no-repeat;
   background-size: 100% 100%;
   margin-right: .05rem;
}

.statement {
   color: #403FBB;
}

/* =================================热门会员================================== */
.wo-hotvip {
   margin-top: .58rem;
   width: 100%;
   min-height: 5.5rem;
   background: url(../img/wo-bg2.webp)no-repeat;
   background-size: 100% 100%;
}

.wo-hotvip .wo-hotvip-title {
   margin: 0 auto;
   width: 2.4rem;
   height: .51rem;
}

.wo-hotvip .wo-hotvip-title img {
   width: 100%;
   height: 100%;
}

.wo-hotvip .wo-hotvip-content-xx {
   margin: 0 auto;
   width: 3.59rem;
   height: .92rem;
   background: url(../img/wo-xx.webp)no-repeat;
   background-size: 100% 100%;
   position: relative;
   z-index: 1;
}

.wo-hotvip .wo-hotvip-content {
   margin: 0 auto;
   width: 3.08rem;
   height: auto;
   background: url(../img/wo-hotbg.webp)no-repeat;
   background-size: 100% 100%;
   position: relative;
   top: -.79rem;
   z-index: 0;
}

.wo-hotvip .wo-hotvip-content .wo-hotvip-content-icon {
   margin: 0 auto;
   padding-bottom: .22rem;
   width:78%;
   height: auto;
   display: flex;
   justify-content: left;
   justify-items: flex-start;
   flex-flow: wrap;
}

.wo-hotvip-content-icon .p {
   margin-top: .3rem;
   width: 1.2rem;
   text-align: center;
}

.wo-hotvip-content-icon .p img {
   width: .74rem;
   height: .74rem;
}

.wo-hotvip-content-icon .p h2 {
   margin-top: 0.08rem;
   width: 1.2rem;
   text-align: center;
   font-size: .13rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #333333;
}

.wo-hotvip-content-more {
   margin: 0 auto;
   padding: 0rem 0 .28rem 0;
   width: 100%;
   height: .34rem;
   text-align: center;
}

.wo-hotvip-content-more img {
   width: 1.18rem;
   height: .34rem;
}

/* =====================千元好书================= */
.wo-qianbook {
   margin-top: -.5rem;
   width: 100%;
   height: auto;
   position: relative;
}

.wo-qianbook .wo-qianbook-title {
   margin: 0 auto;
   width: 2.4rem;
   height: .51rem;
}

.wo-qianbook .wo-qianbook-title img {
   width: 100%;
   height: 100%;
}

.wo-qianbook .wo-qianbook-content {
   margin-top: .08rem;
   width: 100%;
   height: 1.84rem;
   text-align: center;
}

.wo-qianbook .wo-qianbook-content img {
   width: 3.11rem;
   height: 1.84rem;
}

/*  =====================畅享留声机 ===================== */
.wo-lsj {
   width: 100%;
   min-height: 7rem;
   background: url(../img/wo-bg3.webp)no-repeat;
   background-size: 100% 100%;
   position: relative;
   top: -2.1rem;
   z-index: -1;
}

.wo-lsj .wo-lsj-content {
   padding-top: 2.4rem;
   width: 100%;
   height: 3.33rem;
   text-align: center;
}

.wo-lsj .wo-lsj-content img {
   width: 3.11rem;
   height: 3.33rem;
}

/* =======================特别说明======================== */
.wo-illustrate {
   margin: 0 auto;
   width: 100%;
   height: 7rem;
   background: url(../img/wo-bg4.webp)no-repeat;
   background-size: 100% 100%;
   position: relative;
   top: -2.1rem;
}

.wo-illustrate .wo-illustrate-title {
   width: 0.52rem;
   height: 0.52rem;
   position: relative;
   top: -1.1rem;
   left: 0.25rem;
   z-index: 2;
}

.wo-illustrate .wo-illustrate-title img {
   width: 0.52rem;
   height: 0.52rem;
}

.wo-illustrate .wo-illustrate-content {
   margin: 0 auto;
   width: 3.08rem;
   height: auto;
   background: url(../img/wo-rule.webp)no-repeat;
   background-size: 100% 100%;
   position: relative;
   margin-top: -1.35rem;
}

.wo-illustrate .wo-illustrate-content p {
   margin: 0 auto;
   padding-bottom: .1rem;
   width: 90%;
   text-align: left;
   font-size: .13rem;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #666666;
   line-height: .2rem;
}

.wo-illustrate .wo-illustrate-content p:nth-child(1) {
   padding-top: .2rem;
}

.wo-illustrate .wo-illustrate-content p:nth-child(8) {
   padding-bottom: .3rem;
}

.wo-illustrate .wo-illustrate-x {
   width: 0.52rem;
   height: 0.52rem;
   position: relative;
   top: -.4rem;
   left: -0.5rem;
   z-index: 2;
   margin-left: auto;
}

.wo-illustrate .wo-illustrate-x img {
   width: 0.52rem;
   height: 0.52rem;
}








.glyphicon-bell {
   width: 2.2rem;
   height: 2.2rem;
}

footer {
   margin: 0 auto;
}

footer h2 {
   text-align: center;
   font-size: 28px;
   font-weight: 500;
   margin-bottom: 3vw;
}

footer h2 span {
   position: relative;
}

footer h2 span::after,
footer h2 span::before {
   content: '';
   display: block;
   width: 10vw;
   height: 5vw;
   background: url(../img/title.png) no-repeat center/ 100% auto;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: -10vw;
}

footer h2 span::before {
   left: 100%;
   transform: translateY(-50%) rotate(180deg);
}

.container-fluid {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   margin-top: 6vw;
}

footer p {
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #777777;
   line-height: 27px;
}

/** 字体颜色 **/
.fc-white {
   font-size: 13px;
   text-align: center;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #000000;
}

.fc-golden {
   color: #F7D1B1;
}

.cost {
   font-weight: bold;
   color: #32AAFF;
   ;
}

/* 重新调整样式 */
#vcode-label {
   margin: 0 auto;
   margin-bottom: 3vw;
}

#vcode-label .getcode {
   margin: 0 auto;
   margin-left: 8px;
   width: auto;
   height: 52px;
   font-size: 15px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #FF88BE;
   background-color: white;
   border: 0px solid #FF88BE;
   border-radius: 6px;
   margin-right: 5vw;
}

#vcode-label .getcode .vcode-time {
   font-size: 10px;
}

.reminder-yd-title {
   text-align: center;
   font-size: 1.2rem;
   padding: 1.2rem;
   font-weight: bold;
   color: white;
   margin: 0 auto;
}

.reminder-yd-BJ-title {
   text-align: center;
   font-size: 1rem;
   padding: .8rem;
   font-weight: bold;
   margin: 0 auto;
}

.reminder-yd-PT-title {
   text-align: center;
   font-size: 1.2rem;
   padding: 1.2rem;
   font-weight: bold;
   color: white;
   margin: 0 auto;
}

.reminder-yd-MG-title {
   text-align: center;
   font-size: 1.2rem;
   padding: 1.2rem;
   font-weight: bold;
   color: white;
   margin: 0 auto;
}

.reminder-yd-Video-title {
   text-align: center;
   font-size: 1.2rem;
   padding: 1.2rem;
   font-weight: bold;
   color: white;
   margin: 0 auto;
}

.submit-label-merge {
   margin-top: .14rem;
   width: 100%;
   position: relative;
   text-align: center;
}

.submit-label-merge-index {
   z-index: 19891015;
}

.submit-label-merge button {
   width: 2.71rem;
   height: .44rem;
   line-height: .44rem;
   background: #FFC00E;
   font-size: .17rem;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #141414;
   border-color: #FFC00E;
   border-radius: 2px;
   border-width: 0px;
   position: relative;
   z-index: 1;
}


.loading {
   padding: 10px;
   height: 84px;
   background: #000000;
   border-radius: 13px;
   margin: 0 auto;
   text-align: center;
   line-height: 84px;
   font-size: 18px;
   opacity: 0.8;
   color: #ffffff;
}

.music-info_right {
   display: flex !important;
   justify-content: space-between;
   width: 40%;
}

.music-info_right_two {
   display: flex !important;
   justify-content: space-between;
   width: 28%;
   margin-left: 1.2rem;
}

.Bjshow {
   display: none !important;
}


.acolor {
   color: rgb(66, 133, 244);
}

.yzn_name {
   vertical-align: middle;
   line-height: 44px;
   font-size: 17px;
   font-family: PingFangSC-Semibold, PingFang SC;
   font-weight: 600;
   color: #000000;
}

.text-center_span {
   width: 88%;
   text-align: left;
   font-size: 14px;
   color: #000000;
   font-weight: 500;
}

.reminder_p {
   font-size: 13px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #000000;
   line-height: 26px;
}

.send_button_sty {
   color: #BEBEBE;
   font-size: 15px;
}

.vcode_label_flex {
   display: flex;
   justify-content: start;
}

.form-control {
   border: 1px solid #fff;
   box-shadow: inset 0 0 0 rgb(255 255 255 / 0), 0 0 0 rgb(255 255 255 / 0)
}

.form-control:focus {
   border-color: #fff;
   box-shadow: inset 0 0 0 rgb(255 255 255 / 0), 0 0 0 rgb(255 255 255 / 0)
}

.input-group-lg>.form-control,
.input-group-lg>.input-group-addon,
.input-group-lg>.input-group-btn>.btn {
   padding: 10px 5px;
}

.btn-default {
   border-color: #fff
}

.btn-default.disabled.focus,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
.btn-default[disabled].focus,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default.focus,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:hover {
   border-color: #fff
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
   background-color: #fff
}

.badge {
   padding: 0px;
}

.btn-default .badge {
   color: #BEBEBE;
   font-size: 15px;
   background-color: #fff
}

.input-group .form-control {
   float: none;
   width: 46%;
}

.btn-default {
   background-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
   text-shadow: 0 0px 0 #fff;
}

.btn {
   border: 1px solid #fff;
}

.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
   box-shadow: inset 0 0px 0 rgb(255 255 255 / 15%), 0 0px 0px rgb(0 0 0 / 8%);
}

.input-group-lg>.form-control,
.input-group-lg>.input-group-addon,
.input-group-lg>.input-group-btn>.btn {
   font-size: 17px;
}

.nav_img {
   width: 25px;
}


/* =======================================方案1弹框样式=======================================*/
.aMantleOrder {
   width: 100%;
   height: auto;
}

.aMantleOrder .submit-label-merge {
   margin: 0 auto;
   width: 90%;

}

.aMantleOrder .submit-label-merge button {
   font-size: 18px;
   color: white;
   background-color: #F63E62;
   width: 100%;
   height: 52px;
   background: #FE3D6E;
   border-radius: 5px;
   border-color: #ffffff;
   border-width: 0px;
}

.aMantleOrder .moveGif {
   width: 34%;
   height: auto;
   margin: 0 auto;
   text-align: right;

}

.aMantleOrder .moveGifImg {
   width: 3rem;
   position: absolute;
   top: 0%;

}

.aMantleOrder .moveZhiImg {
   width: 18%;
   position: relative;
   left: 70%;
   top: -2rem;
   display: block;
   z-index: 1;
}

/*  */
.maskDiv {
   width: 100%;
   height: 307vw;
   background: rgb(0, 0, 0, .8);
   position: absolute;
   top: -62vw;
}

.maskDiv .moveGifImg {
   width: 3rem;
   position: absolute;
   top: 43.5%;
   left: 68%;
   z-index: 1;
}

.maskDiv .moveZhiImg {
   width: 3rem;
   position: absolute;
   top: 45%;
   left: 69%;
   z-index: 2;
}

/* =======================联通wo阅读[精品优选课]====================== */
.framesuccess {
   margin: 0 auto;
   width: 90%;
   height: 4rem;
   background: #FFFFFF;
   border-radius: 0.16rem;
   text-align: center;
}

.framesuccess .frame-content {
   height: 43%;
}

.framesuccessP {
   font-size: 17px;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 600;
   color: #333333;
   padding-top: .2rem;
   padding-bottom: .15rem;
}

.framesuccessP2 {
   font-size: 22px;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #C63C08;
   padding-bottom: .15rem;
}

.successImg {
   width: 60%;
}

.goTorevice {
   width: 1.85rem;
   height: .45rem;
   margin: 0 auto;
   margin-top: .25rem;
   text-align: center;
   line-height: .45rem;
   background: linear-gradient(180deg, #FF7939 0%, #FF6E5C 100%);
   border-radius: 23px;
   font-size: 17px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #FFFFFF;
}
/* 页面底部的中国联通授权信息 */
.wo-sqxxbtn{
   width: 100%;
   height: .73rem;
   text-align: right;
   position: relative;  
   top:-1.5rem;
}
.wo-sqxxbtn img{
   width: .28rem;
   height: .73rem;
}
.wo-zgltbot{
   width: 100%;
   height: 2.17rem;
   text-align: center;
   margin-top: -2.3rem;
}
.wo-zgltbot img{
   width: 100%;
   height: 2.17rem;
}
/* ==========================================振铃三方支付样式结束==========================*/
input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px #E1E1E1 inset !important;
}