/* reset */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,legend,button,input,textarea,form,th,td{margin:0;padding:0;}
body{font:14px SimHei,Noto Sans SC,system-ui,-apple-system,Segoe UI,sans-serif;word-wrap:break-word;-webkit-overflow-scrolling:touch;}
html,body{ position:relative;height:100%;}
.div,a,img{-webkit-user-select:none;user-select:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
ol,ul{list-style:none outside;}
address,caption,cite,code,dfn,em,strong,u,i,th,var{font-style:normal;} 
abbr[title], acronym[title]{border-bottom:1px dotted;cursor:help;}
:focus{outline:0;}
q:before, q:after{content:''; }
abbr,acronym,fieldset,img,fieldset{border:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
a:hover{outline:none;}
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

html {max-width: 500px;margin: 0 auto;}
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}
body {font-family:Microsoft YaHei,Helvetica Neue,Helvetica,STHeiTi,Arial,sans-serif; max-width: 500px; margin: 0 auto;}
.clearfix:after {
    content: '\0020';
    display: block;
    height: 0;
    clear: both;
}
.none{ display: none;}
.hide {display: none!important;}
input,textarea{
  outline:none;
  border:1px solid #ccc;
  border-radius: .05rem;
}

body{
  height: 100%;
}
body>div{
  width: 100%;
  height: 100%;
}
body>div>div{
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#page-1 {
    display: block;
    background: url(https://n.sinaimg.cn/auto/roye20250816/1-0.jpg) center center / 100% 100% no-repeat;
}
#img1-1, #img3-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    /* transform: translateY(-50%); */
    width: 100%;
    height: auto;
}
#img1-2, #img2-1, #img3-3 {
    position: absolute;
    top: .86rem;
    left: .34rem;
    width: 1.58rem;
    height: auto;
}
#img1-3 {
    position: absolute;
    bottom: 1.46rem;
    left: 1rem;
    width: 1.64rem;
    height: auto;
}

#jietong {
    position: absolute;
    bottom: 1.46rem;
    right: 1rem;
    width: 1.64rem;
    height: auto;
    border-radius: 50%;
    overflow: hidden;
}
#img1-4 {
    display: block;
    width: 1.64rem;
    height: auto;
}
#gaoguang {
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    animation: gaoguang 3s infinite;
}
   
@keyframes gaoguang {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}
@-webkit-keyframes gaoguang {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}
#img1-5 {
    position: absolute;
    bottom: 12.65rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: 1.97rem;
    height: auto;
}

#page-2, #page-5 {
    background: #000;
}
#page-2 > div {
    position: absolute;
    bottom: 1.74rem;
    left: 0;
    width: 2.3rem;
    text-align: center;
}
#page-2 #zan_wrap {
    display: none;
}
#page-2 p {
    font-size: .32rem;
    line-height: .6rem;
    color: #cfcece;
}
#addcount {
    position: relative;
    display: none;
}
#addcount.addzan {
    display: block;
    animation: addzan 1.5s ease-out forwards;
}
@keyframes addzan {
    0% {
        top: 0;
        opacity: 1;
    }
    100% {
        top: -1rem;
        opacity: 0;
    }
}
@-webkit-keyframes addzan {
    0% {
        top: 0;
        opacity: 1;
    }
    100% {
        top: -1rem;
        opacity: 0;
    }
}
#video2-1, #video5-1 {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
#img2-2 {
    position: absolute;
    bottom: 1.46rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.7rem;
    height: auto;
}
#img2-3, #img2-4 {
    display: block;
    width: .88rem;
    margin: 0 auto;
}

#mask3 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.58);
}
#img3-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -6rem);
    width: 6.73rem;
    height: auto;
}
#img3-4, #img3-6 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 4rem);
    width: 4.19rem;
    height: auto;
}
#img3-5, #img3-7 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 5.3rem);
    width: 4.19rem;
    height: auto;
}

#page-4 {
    position: relative;
    background: #ebeef1 url(https://n.sinaimg.cn/auto/roye20250816/4-0.jpg) top center / 100% auto no-repeat;
}
#img4-1 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
}
#img4-2 {
    position: absolute;
    bottom: 4.48rem;
    right: .38rem;
    width: .95rem;
    height: auto;
}
#box4-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.4rem;
    background: #edeaee;
}
#img4-4 {
    display: block;
    width: 100%;
}
#page-4 li {
    width: 6.74rem;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    border-radius: .1rem;
    color: #222222;
    background: #fff;
    font-size: .28rem;
    margin: .25rem auto 0;
}
#page-4 li:first-child {
    margin-top: .35rem;
}
#page-4 li[disabled="disabled"] {
    background: #9ac1ab;
    color: #fff;
}
#page-4 li.unuse {
    background: #bfbfbf;
    color: #727272;
}
#box4-4 {
    position: absolute;
    bottom: 3.4rem;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    padding-bottom: .4rem;
}
#box4-4 > div {
    display: flex;
    align-items: flex-start;
    margin-top: .58rem;
    position: relative;
}
#box4-4 > div.conversation-right {
    justify-content: flex-end;
}
#box4-4 .photo {
    display: block;
    width: .81rem;
    border-radius: .05rem;
}
.conversation-left {
    margin-left: .4rem;
}
.conversation-right {
    margin-right: .4rem;
}
.yuyinwrap {
    margin-left: .1rem;
    padding-left: .16rem;
    background: url(https://n.sinaimg.cn/auto/yilian20250123/4-6.png) left .02rem / .6rem auto no-repeat;
}
.yuyin {
    background: #fff;
    border-radius: .05rem;
    height: .75rem;
    line-height: .75rem;
    padding-left: .7rem;
    font-size: .26rem;
    color: #5b5b5b;
    position: relative;
}
.yyicon1 {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: .26rem;
    width: .08rem;
}
.yyicon2 {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: .32rem;
    width: .1rem;
}
.yyicon3 {
    position: absolute;
    transform: translateY(-46%);
    top: 50%;
    left: .36rem;
    width: .16rem;
}
.unread {
    margin-left: .15rem;
    margin-top: .3rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fa453b;
}
.conversation-left audio, #promptsound1, #promptsound2, #ringtone {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.conversation-left audio {
    left: 1.07rem;
}
.textwrap {
    margin-right: .1rem;
    padding-right: .16rem;
    position: relative;
}
.textwrap:before {
    position: absolute;
    top: .24rem;
    right: 1px;
    width: 0;
    height: 0;
    content: '';
    border-top: 0.12rem solid transparent;
    border-bottom: 0.12rem solid transparent;
    border-left: 0.16rem solid #95ec69;
}
.textwrap .text {
    background: #95ec69;
    border-radius: .05rem;
    height: .75rem;
    line-height: .75rem;
    padding: 0 .26rem;
    font-size: .26rem;
    color: #222222;
    position: relative;
}
.textwrap .text.twoline {
    line-height: .36rem;
    padding: .16rem .24rem;
    max-width: 3.8rem;
}
#img4-11 {
    display: block;
    width: 3.52rem;
}

#toast {
    position:fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    top: 50%;
    left: 50%;
    padding: 0 20px;
    width: auto;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    background: rgba(0,0,0,0.7);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    display: none;
    z-index: 100;
}

.zoomIn {
    animation: zoomInOut 4s 1s infinite;
}
   
@keyframes zoomInOut {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    5% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }
    10% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    15% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }
    20%,100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}
@-webkit-keyframes zoomInOut {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    5% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }
    10% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    15% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }
    20%,100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.audiopaly2 {
    animation: playaudio2 1s infinite;
}

.audiopaly3 {
    animation: playaudio3 1s infinite;
}
   
@keyframes playaudio2 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
   
@-webkit-keyframes playaudio2 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
   
@keyframes playaudio3 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
   
@-webkit-keyframes playaudio3 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

#layer {
    position:fixed;
    top: 50%;
    left: 50%;
    width: 5.64rem;
    height: 2.97rem;
    transform: translate(-50%, -50%);
    background: url(https://n.sinaimg.cn/auto/yilian20250123/layer.png) center center / 5.64rem auto no-repeat;
    display: none;
    z-index: 100;
}
#closepage {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2.82rem;
    height: 1rem;
}
#closelayer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2.82rem;
    height: 1rem;
}

#zhezhao {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #333;
    left: 0;
    top: 0;
    color: #FFFFFF;
    z-index: 9999;
    font-size: 14px;
    text-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    display: none;
}
#zhezhao .bg {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-bottom: 20px;
    background: url(https://n.sinaimg.cn/auto/goodme20250328/zhezhaobg.png) 0 0 no-repeat;
    -webkit-background-size: 67px auto;
    background-size: 67px auto;
    -webkit-animation: lock 3s infinite 1.5s linear;
    animation: lock 3s infinite 1.5s linear;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

@-webkit-keyframes lock {
    0% {
      -webkit-transform: rotate(90deg);
    }
    20% {
      -webkit-transform: translate(0);
    }
    80% {
      -webkit-transform: translate(0);
    }
    100% {
      -webkit-transform: translate(90deg);
    }
}

@keyframes lock {
    0% {
      transform: rotate(90deg);
    }
    20% {
      transform: translate(0);
    }
    80% {
      transform: translate(0);
    }
    100% {
      transform: translate(90deg);
    }
}

@media (orientation: portrait) {/* 竖屏模式 */
    #zhezhao {
        display: none;
    }
}

@media (orientation: landscape) {/* 横屏模式 */
    #zhezhao {
        display: flex;
    }
}

.InPC #zhezhao {
    display: none;
}

.shortPhone #img1-1, .shortPhone #img3-1 {
    bottom: -2rem;
}
.shortPhone #img1-5 {
    bottom: 10.65rem;
}



/*****jqueryPlugins - scrollbar begin*****/
.video-pop .pop-list .ps-scrollbar-x-rail {
    display: none;
}

.city-market .droplist .incon .ps-scrollbar-x-rail {
    display: none;
}

.video-bar .ps-scrollbar-y-rail {
    display: none;
}

.ps-container .ps-scrollbar-x-rail {
    position: absolute;
    /* please don't change 'position'*/
    bottom: 7px;
    /* there must be 'bottom' for ps-scrollbar-x-rail*/
    height: 1px;
    background-color: #aaa;
    opacity: 0.6;
    filter: alpha(opacity=60);
    -o-transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
    -moz-transition: background-color .2s linear, opacity .2s linear;
    transition: background-color .2s linear, opacity .2s linear;

    display: none!important
}

.ps-container:hover .ps-scrollbar-x-rail, .ps-container.hover .ps-scrollbar-x-rail {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.ps-container .ps-scrollbar-x-rail:hover, .ps-container .ps-scrollbar-x-rail.hover {
    background-color: #eee;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.ps-container .ps-scrollbar-x-rail.in-scrolling {
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.ps-container .ps-scrollbar-y-rail {
    position: absolute;
    /* please don't change 'position'*/
    right: 1px;
    /* there must be 'right' for ps-scrollbar-y-rail*/
    width: 1px;
    background-color: #dfdfdf;
    /*dddddd*/
    /*-webkit-border-radius: 2px;*/
    /*-moz-border-radius: 2px;*/
    /*border-radius: 2px;*/
    opacity: 0.6;
    filter: alpha(opacity=60);
    -o-transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
    -moz-transition: background-color .2s linear, opacity .2s linear;
    transition: background-color .2s linear, opacity .2s linear;
}

.ps-container:hover .ps-scrollbar-y-rail, .ps-container.hover .ps-scrollbar-y-rail {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.ps-container .ps-scrollbar-y-rail:hover, .ps-container .ps-scrollbar-y-rail.hover {
    background-color: #eee;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.ps-container .ps-scrollbar-y-rail.in-scrolling {
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.ps-container .ps-scrollbar-x {
    position: absolute;
    /* please don't change 'position'*/
    bottom: -2px;
    /* there must be 'bottom' for ps-scrollbar-x*/
    height: 5px;
    background: url(//www.sinaimg.cn/qc/autoimages/autoVersion2017/line04.gif) center 1px no-repeat #cecccc;
    border-radius: 100px;
    -o-transition: background-color .2s linear;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

.ps-container.ie6 .ps-scrollbar-x {
    font-size: 0;
    /* fixed scrollbar height in xp sp3 ie6*/
}

.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
    background-color: #999999;
    opacity: 1;
    filter: alpha(opacity=100);
}

.ps-container .ps-scrollbar-y {
    position: absolute;
    /* please don't change 'position'*/
    right: -1px;
    /*14px*/
    /* there must be 'right' for ps-scrollbar-y*/
    width: 3px;
    background-color: #aa93ce;
    /*aaa*/
    /*-webkit-border-radius: 2px;*/
    /*-moz-border-radius: 2px;*/
    /*border-radius: 2px;*/
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transition: background-color .2s linear;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

.ps-container.ie .ps-scrollbar-y {
    font-size: 0;
    /* fixed scrollbar height in xp sp3 ie6*/
}

.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y, .ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
    background-color: #e94740;
    opacity: 1;
    filter: alpha(opacity=100);
}

/*****jqueryPlugins - scrollbar end*****/