html,body{ 
    /* font-family: 'Microsoft YaHei', Arial, Atilla,'Hiragino Sans GB', 'Open Sans', 微软雅黑, STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;  */
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    margin:0; 
    padding:0; 
    color: #25355e;
    letter-spacing: 0.02rem;
    font-size: 16px;
}
*{
    user-select: text;
}
.test-1::-webkit-scrollbar {
    width: 8px; 
    height: 8px;
    position: relative;
    right: -10px;
}

.test-1::-webkit-scrollbar {
    background: transparent;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.test-1::-webkit-scrollbar-track {
    margin: 5px;
}

.test-1::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
}

.test-1::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
}
.loading {
    z-index: 9999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.068);
    display: flex;
    justify-content: center;
    align-items: center;
} 
.loading span{
    background: url(../images/loading.gif) no-repeat top center ;
    padding-top: 45px;
}
.loading.student span{
    position: absolute;
    left: 50%;
    margin-left: -375px;
    width: 150px;
    display: flex;
    justify-content: center;
}
.buddyMain .loading span{
    position: absolute;
    left: 50%;
    top: 350px;
    margin-left: -230px;
    width: 150px;
    display: flex;
    justify-content: center;
}
text {
    text-align: center;
}
body{
    background-color: #fff;
}
input,button{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    outline: none;
    padding: 0;
    letter-spacing: 0.05rem;
}
input.inputText{
    background-color: #f7f8fd;
    height: 50px;
    line-height: 50px;
    border: 0;
    border-radius: 10px;
    font-size: 17px;
}
textarea{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
    margin: 0;
    padding: 10px;
}
input[type=search]{
    background:none;
    text-align: left;
}
input[type=button]:enabled:active{
    
}
ol, ul, li{ list-style-type:none; margin:0; padding:0;}
a{ color:#2f3c4e; display: inline-block;}
a:hover{ color:#25355e;}
a:link,a:visited,a:hover,a:active{ text-decoration:none;}
h1,h2,h3,p{ margin:0; font-weight: normal;}
.beforeX{ position: relative;}
.beforePR::before{ position: relative; content: ''; display: flex;}
.yellColor{
    color: #e8940f;
}
img{ max-width: 100%;}
input,button{ border: 0; background: none;}
button{ cursor: pointer;}
.animat{transition: all .3s ease 0s;}
.animat:hover{transform: scale(1.05);}

input:focus{ outline: 0;}
input::-webkit-input-placeholder{color:rgba(167,179,209,.7) !important;}
input::-moz-placeholder{  color:rgba(167,179,209,.7) !important;}
input:-moz-placeholder{ color:rgba(167,179,209,.7) !important;}
input:-ms-input-placeholder{ color:rgba(167,179,209,.7) !important;}
textarea::-webkit-input-placeholder{color:rgba(167,179,209,.7) !important; font-weight: normal;}
*, ::after, ::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.test-1::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}

.test-1::-webkit-scrollbar{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.test-1::-webkit-scrollbar-track{
    margin: 5px;
}
.test-1::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
/* box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2); */
background   : rgba(0,0,0,.2);

}
.test-1::-webkit-scrollbar-track {
/*滚动条里面轨道*/
/* box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2); */
border-radius: 10px;
background: rgba(0, 0, 0, 0.05);
}

    
.clockTC{
    cursor: pointer;
    position: absolute;
    right: 15px;
    bottom: 10px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.clockTC::before{
    content: '';
    position: absolute;
    display: block;
    width: 80%;
    height: 9%;
    transform: rotate(45deg);
    background-color: #2f3c4e;
}
.clockTC::after{
    content: '';
    position: absolute;
    display: block;
    width: 80%;
    height: 9%;
    transform: rotate(-45deg);
    background-color: #2f3c4e;
}


.buddyMain{
    background-color: #fbf0ce;
    /* background: url(../images/imgDay.jpg) no-repeat center; */
    background: url(../images/imgDay1.png) no-repeat center;
    background-size: auto 100%;
    height: 785px;
    overflow: hidden;
}
.content{
    max-width: 1300px;
}
.buddyMain .content{
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative;
}
.character{
    margin-top: 50px;
    width: 600px;
    height: 700px;
    display: flex;
    justify-content: center;
    margin-left: 200px;
}
.character > div{
    position: relative;
}
.character > div::before{
    content: '';
    display: block;
    width: 600px;
    height: 200px;
    position: absolute;
    bottom: -30px;
    left: -50px;
    background: url(../images/intoDT.png) no-repeat;
}
.character canvas{
    /* max-height: 100%; */
    width: 500px !important;
    height: 700px !important;
    position: relative;
}
.cabinet{
    background-size: auto 100% !important;
    width: 60vh;
    height: 80vh;
    display: flex;
    justify-content: center;
    padding-right: 4vh;
    padding-top: 4.8vh;
}
.cup1{
    background: url(../images/cup1.png) no-repeat center;
}
.cup2{
    background: url(../images/cup2.png) no-repeat center;
}
.cup3{
    background: url(../images/cup3.png) no-repeat center;
}
.clothesUl{
    display: flex;
    flex-wrap: wrap;
}

.clothesUl li span{
    display: block;
    cursor: pointer;
}
.cabinetM > header{
    width: 51vh;
    height: 7.8vh;
    display: flex;
    align-items: center;
    margin: auto;
}
.cabinetM > header ul{
    display: flex;
    width: 100%;
}
.cabinetM > header ul li{
    width: 25%;
}
.cabinetM > header ul li span{
    display: flex;
    width: 100%;
    height: 0;
    padding-bottom: 70%;
    cursor: pointer;
    color: transparent;
    background-size: 100%;
    background-repeat: no-repeat !important;
}
li.WG1 span{
    background-image: url(../images/navWGa_1.png);
}
li.WG1.active span{
    background-image: url(../images/navWG_1.png);
}
li.WG span{
    background-image: url(../images/navWGa.png);
}
li.WG.active span{
    background-image: url(../images/navWG.png);
}
li.YF span{
    background-image: url(../images/navYa.png);
}
li.YF.active span{
    background-image: url(../images/navY.png);
}
li.YJ span{
    background-image: url(../images/navYJa.png);
}
li.YJ.active span{
    background-image: url(../images/navYJ.png);
}
li.WZ span{
    background-image: url(../images/navWZa.png);
}
li.WZ.active span{
    background-image: url(../images/navWZ.png);
}
li.XZ span{
    background-image: url(../images/navXZa.png);
}
li.XZ.active span{
    background-image: url(../images/navXZ.png);
}
.cabinetNr{
    height: 44vh;
    margin: 1.7vh 7vh 0 7vh;
    position: relative;
}
.cabinetNrL{
    width: 7vh;
    height: 7vh;
    position: absolute;
    left: -8vh;
    top: 19vh;
    background: url(../images/intoLeft.png) no-repeat;
    background-size: 100%;
}
.cabinetNrR{
    width: 7vh;
    height: 7vh;
    position: absolute;
    right: -8vh;
    top: 19vh;
    background: url(../images/intoRight.png) no-repeat;
    background-size: 100%;
}
.cabinetM > footer{
    height: 9.5vh;
    margin: 3vh 3.2vh 0 6.2vh;
}
.preservationDiv > div{
    display: flex;
}
.preservationDiv span{
    display: block;
    width: 21vh;
    height: 10vh;
    background-size: 100% !important;
    color: transparent;
    cursor: pointer;
}
.preservationDiv span:nth-child(1){
    background: url(../images/into1.png) no-repeat;
}
.preservationDiv span:nth-child(2){
    background: url(../images/into2.png) no-repeat;
}
.enlargeH{
    transition: 0.15s ease-in-out;
    cursor: pointer;
}
.enlargeH:hover{
    transform: scale(1.05);
}
ul.bodyUl{
    padding: 1vh;
}
ul.bodyUl li{
    display: flex;
    align-items: center;
    /* padding: 10px 0; */
}
ul.bodyUl li header,
ul.hairUl li header{
    height: 55px;
    margin-bottom: 8px;
}
ul.bodyUl li header img{
    height: 100%;
}
ul.bodyUl li:nth-child(1) div{
    display: flex;
}
ul.bodyUl li:nth-child(1) span{
    display: flex;
}
.sliderDiv span{
    height: 1.5vh;
    width: 23vh;
    display: flex;
    align-items: center;
    border-radius: 0.75vh;
    background-image: linear-gradient(#76716c,#b9b4ae);
    position: relative;
}
.sliderDiv span b{
    width: 4vh;
    height: 4vh;
    background: url(../images/intoBhk.png);
    background-size: 100%;
    position: absolute;
    cursor: pointer;
}
.DressUpDiv > div ul li footer div.scrollbar{
    width: 100%;
    background: none;
    padding: 0;
    margin: 0;
    height: 0;
    display: none;
}
.socksUl,
.shoesUl,
.glassesUl,
.hairUl{
    display: flex;
    flex-wrap: wrap;
    display: block;
}
.socksUl li span,
.shoesUl li span,
.glassesUl li span,
.hairUl li span{
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

.sliderDiv1{
    width: 22vh;
}
.sliderDiv1 .rangeslider__handle{
    background: url(../images/intoBhk.png);
    background-size: 100%;
    border: 0;
    box-shadow: none;
    width: 4vh;
    height: 4vh;
    
}
.sliderDiv1 .rangeslider, 
.sliderDiv1 .rangeslider__fill{
    height: 1.5vh;
    width: 100%;
    background-image: linear-gradient(#76716c,#b9b4ae);
}
.sliderDiv1 .rangeslider__fill {
    background: #419ccf;
}
.sliderDiv1 .rangeslider__handle:active{
    background: url(../images/intoBhk.png);
    background-size: 100%;
}

/* 衣柜 */
.DressUp{
    width: 600px;
    height: 735px;
    background: url(../images/cabinet.png) no-repeat center;
}
.DressUp > header{
    display: flex;
    padding-top: 16px;
    justify-content: center;
}
.DressUp > header span{
    display: block;
    width: 180px;
    height: 50px;
    line-height: 50px;
    padding-top: 5px;
    text-align: center;
    color: #a23f00;
    font-size: 22px;
    background: url(../images/cabinet2.png) no-repeat;
    cursor: pointer;
}
.DressUp > header div.active span{
    background: url(../images/cabinet1.png) no-repeat;
    width: 190px;
    color: #bb1700;
}
.DressUpDiv > div > header{
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
}
.DressUpDiv > div > header span{
    display: flex;
    position: relative;
    width: 13.5%;
    justify-content: center;
    color: transparent;
}
.DressUpDiv > div > header span::before{
    content: '';
    display: flex;
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.DressUpDiv > div > header span i{
    display: none;
}
.DressUpDiv > div,
.DressUpDiv > div ul li{
    display: none;
}
.DressUpDiv > div:nth-child(1),
.DressUpDiv > div ul li:nth-child(1){
    display: block;
}
span.faxing::before{
    background: url(../images/zxInto01s.png) no-repeat;
}
span.faxing.active::before{
    background: url(../images/zxInto01.png) no-repeat;
}
span.lianxing::before{
    background: url(../images/zxInto02s.png) no-repeat;
}
span.lianxing.active::before{
    background: url(../images/zxInto02.png) no-repeat;
}
span.wuguan::before{
    background: url(../images/zxInto03s.png) no-repeat;
}
span.wuguan.active::before{
    background: url(../images/zxInto03.png) no-repeat;
}
span.yanjing::before{
    background: url(../images/zxInto04s.png) no-repeat;
}
span.yanjing.active::before{
    background: url(../images/zxInto04.png) no-repeat;
}
span.taozhuang::before{
    background: url(../images/zxInto05s.png) no-repeat;
}
span.taozhuang.active::before{
    background: url(../images/zxInto05.png) no-repeat;
}
span.shangyi::before{
    background: url(../images/zxInto06s.png) no-repeat;
}
span.shangyi.active::before{
    background: url(../images/zxInto06.png) no-repeat;
}
span.kuzi::before{
    background: url(../images/zxInto07s.png) no-repeat;
}
span.kuzi.active::before{
    background: url(../images/zxInto07.png) no-repeat;
}
span.wazi::before{
    background: url(../images/zxInto08s.png) no-repeat;
}
span.wazi.active::before{
    background: url(../images/zxInto08.png) no-repeat;
}
span.xie::before{
    background: url(../images/zxInto09s.png) no-repeat;
}
span.xie.active::before{
    background: url(../images/zxInto09.png) no-repeat;
}
.DressUpDiv ul{
    width: 430px;
    height: 480px;
    margin: auto;
    padding:20px 10px;
    /* overflow: auto; */
}

/* .DressUpDiv ul.hairUl, */
.DressUpDiv ul.glassesUl{
    padding: 10px 10px;
}
.HairColor{
    background-color: #eeab6f;
    height: 55px;
    border-radius: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.HairColor span{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    background-color: #000;
    margin: 0 12px;
    box-shadow: 0 2px 2px inset rgba(0,0,0,0.25);
    cursor: pointer;
}
.HairColor span.active{
    width: 34px;
    height: 34px;
    background-color: #fff !important;
    border:7px solid #000;
    box-shadow: none;
}
.HairColor span:nth-child(1){
    background-color: #000;
}
.HairColor span:nth-child(2){
    background-color: #4b362f;
}
.HairColor span:nth-child(3){
    background-color: #9a6840;
}
.HairColor span:nth-child(4){
    background-color: #947062;
}
.HairColor span:nth-child(5){
    background-color: #a3a09f;
}
.HairColor span:nth-child(6){
    background-color: #f0caaa;
}
.HairColor span:nth-child(7){
    background-color: #dfdcba;
}
.HairColor span:nth-child(1).active{
    border-color: #000;
}
.bodyUl .HairColor span:nth-child(1).active{
    border-color: rgb(237, 187, 158);
}
.HairColor span:nth-child(2).active{
    border-color: #4b362f;
}
.HairColor span:nth-child(3).active{
    border-color: #9a6840;
}
.HairColor span:nth-child(4).active{
    border-color: #947062;
}
.HairColor span:nth-child(5).active{
    border-color: #a3a09f;
}
.HairColor span:nth-child(6).active{
    border-color: #f0caaa;
}
.HairColor span:nth-child(7).active{
    border-color: #dfdcba;
}
.DressUpDiv > div ul li footer{
    display: flex;
    flex-wrap: wrap;
    /* padding: 0 0 8px 0; */
    margin: 0 -2%;
    width: 103%;
    overflow: auto;
    max-height: 450px;
}
.DressUpDiv > div ul.bodyUl li footer,
.DressUpDiv > div ul.hairUl li footer{
    max-height: 390px;
}
.DressUpDiv > div ul li footer div{
    display: flex;
    flex-wrap: nowrap;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #eeab6f;
    border-radius: 12px;
    margin: 8px 2%;
    padding: 8px 5px;
    width: 29.333333%;
    cursor: pointer;
    transition: all 0.3s;
    align-content: space-between;
}
.DressUpDiv > div ul li footer div:hover{
    transform: scale(1.05);
}
.DressUpDiv > div ul li footer div.active{
    background-color: #fed19a;
    border: 2px solid #15b1d3;
}
.DressUpDiv > div ul li footer div span{
    width: 100%;
    text-align: center;
}
.DressUpDiv > div ul li footer div i{
    font-style: normal;
    color: #b43000;
    font-size: 18px;
    font-weight: 900;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin-top: -5px;
}
.DressUpDiv > div ul li footer div i::before{
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/intoJB.png) no-repeat;
    background-size: 100%;
    margin-right: 3px;
}
.preserveFooter{
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.preserveFooter button{
    border-radius: 12px;
    height: 60px;
    color: #fff;
    padding: 0 30px 0 15px;
    font-size: 20px;
    margin: 0 15px;
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.3s;
}
.preserveFooter button:hover{
    transform: scale(1.05);
}
.preserveFooter button::before{
    display: block;
    content: '';
    width: 50px;
    height: 50px;
}
.preserveFooter button b{
    display: block;
    font-size: 16px;
    font-weight: normal;
    line-height: 15px;
    margin-top: -2px;
}
button.NSaveButton{
    background-image:linear-gradient(to top, #eb4d5d, #fb6356);
    background-color: #eb4d5d;
    box-shadow: 0 4px 0 #a32c2c;
}
button.SaveButton{
    background-image:linear-gradient(to top, #26bdc5, #47d5d6);
    background-color: #26bdc5;
    box-shadow: 0 4px 0 #0f88a4;
}
.preserveFooter button.NSaveButton::before{
    background: url(../images/NSaveInto.png) no-repeat;
}

.preserveFooter button.SaveButton::before{
    background: url(../images/SaveInto.png) no-repeat;
}
.integral{
    position: absolute;
    top: 20px;
    left: 100px;
    display: flex;
    align-items: center;
}
.integral::before{
    content: '';
    display: flex;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: url(../images/intoXX.png) no-repeat #ff1f43 center;
    position: relative;
    z-index: 1;
}
.integral header{
    background-color: #fa667d;
    padding: 10px 20px 10px 30px;
    margin-left: -20px;
    color: #fff;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.integral header > div{
    background-color: #f51e40;
    line-height: 20px;
    border-radius: 5px;
    font-size: 15px;
    text-align: center;
    margin-top: 5px;
}
.DressUpDiv .dress ul{
    padding: 10px;
}
.DressUpDiv .dress > ul footer div{
    width: 46%;
}
.buddyMainS{
    background-color: #fbf0ce;
    background: url(../images/imgDay.jpg) no-repeat center;
    background-size: auto 100%;
    height: 735px;
    overflow: hidden;
    position: relative;
}
.buddyMainS .character{
    width: 500px;
    height: 560px;
    margin-left: -550px;
    left: 50%;
    position: absolute;
}
.buddyMainS .character canvas{
    width: 400px !important;
    height: 560px !important;
    margin-top: 55px;
}
.buddyMainS .character > div::before{
    display: none;
}
.studentTX{
    position: absolute;
    right: 50%;
    margin-right: -550px;
    display: flex;
    align-items: center;
    top: 40px;
}
.studentTX > div span{
    display: block;
    text-align: right;
}
.studentTX > div span:last-child{
    color: #545ee1;
    padding-right: 8px;
}
.studentTX header span{
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border:5px rgba(255,255,255,0.35) solid;

}
.studentTX header span img{
    width: 100%;
}
.StudnetTime{
    position: absolute;
}
.StudnetTime{
    position: absolute;
    position: absolute;
    color: #fff;
    top: 262px;
    right: 50%;
    margin-right: -330px;
    text-align: center;
}
.StudnetTime h1{
    padding: 10px 5px 18px 5px;
}
.betaDiv{
    width: 140px;
    height: 120px;
    background: url(../images/betaInto.png) no-repeat;
    position: absolute;
    left: 50%;
    bottom: 100px;
    margin-left: -200px;
}
@keyframes example {
    0% {
        top: 18px;
    }
    50% {
        top: 23px;
    }
    100% {
        top: 18px;
    }
}
.chatInto{
    width: 80px;
    height: 70px;
    background: url(../images/chatInto.png) no-repeat;
    position: absolute !important;
    top: 75px;
    right: 125px;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    z-index: 1;
    cursor: pointer;
    display: none;
}
.chatBox{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 999999;
    justify-content: center;
    align-items: center;
    display: none;
}
.chatBox.active{
    display: flex;
}
.chatBox > div{
    background-color: #adc4fa;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    margin-top: -90px;
    padding: 10px;
}
.chatDiv{
    background-color: #fff;
    border-radius: 15px;
    padding: 5px;
    min-height: 450px;
    position: relative;
    box-shadow: 0 5px 5px rgb(17 113 200 / 5%) inset, 0 -5px 5px rgb(17 113 200 / 10%) inset;
}
.chatDiv > div{
    height: 430px;
    overflow: auto;
    padding: 0 5px;
}
.chatDiv::before{
    position: absolute;
    content: '';
    display: block;
    width: 23px;
    height: 19px;
    background: url(../images/chatInto1.png) no-repeat;
    left: -15px;
    top: 45px;
    display: none;
}
input.inputText{
    box-shadow: 0 5px 5px rgb(17 113 200 / 5%) inset, 0 -5px 5px rgb(17 113 200 / 10%) inset;
    background-color: #fff;
    border-radius: 15px;
    width: 100%;
}
.textareaText{
    box-shadow: 0 5px 5px rgb(17 113 200 / 5%) inset, 0 -5px 5px rgb(17 113 200 / 10%) inset;
    background-color: #fff;
    border-radius: 15px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
}
.textareaText textarea{
    border: 0;
    background: none;
    height: 25px;
    line-height: 25px;
    padding: 0;
}
.textareaText textarea::-webkit-scrollbar,
.textareaText textarea::-webkit-scrollbar-thumb,
.textareaText textarea::-webkit-scrollbar-track{
    background: transparent;
}



.chatBox footer > div{
    display: flex;
    width: 100%;
}
.chatBox footer{
    display: flex;
    padding-top: 10px;
    position: relative;
}
.chatBox footer input{
    border: 0;
}
input.publishButton{
    min-width: 50px;
    height: 50px;
    border-radius: 15px;
    margin: 0 10px;
    background: url(../images/chatInto2.png) #fe6d72 center no-repeat;
    box-shadow: 0 3px 3px rgb(255 255 255 / 5%) inset, 0 -3px 3px rgb(0 0 0 / 10%) inset;
}
input.preserveButton{
    min-width: 50px;
    height: 50px;
    border-radius: 15px;
    background: url(../images/chatInto3.png) #6b6af8 center no-repeat;
    box-shadow: 0 3px 3px rgb(255 255 255 / 5%) inset, 0 -3px 3px rgb(0 0 0 / 10%) inset;
}
.chatBox b{
    position: absolute;
    display: flex;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    bottom: -70px;
    left: 50%;
    margin-left: -23px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.chatBox b::before,
.chatBox b::after{
    position: absolute;
    content: '';
    display: block;
    transform: rotate(45deg);
    width: 60%;
    height: 7%;
    background-color: #fff;
    border-radius: 2px;
}
.chatBox b::after{
    transform: rotate(-45deg);
}
.chatDivNr{
    position: relative;
    padding:5px 0 0px 55px;
    min-height: 60px;
}
.headImg{
    position: absolute;
    left: 0;
    height: 50px;
    width: 50px;
    min-width: 50px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 2px rgb(0 0 0 / 20%);
    border-radius: 50%;
    overflow: hidden;
}
.NameSize {
    margin-top: 8px;
}
.TimeSize {
    font-size: 15px;
    color: #acaeb9;
}
.ChatTit {
    display: inline-block;
    padding: 5px 0;
}
.ChatTit span {
    background-color: #f0f5f9;
    display: flex;
    align-items: center;
    padding: 5px 20px;
    border-radius: 5px 25px 25px;
    min-height: 50px;
    text-align: left;
}
i.hornInto{
    display: flex;
    cursor: pointer;
    min-width: 30px;
    margin-left: 10px;
    width: 30px;
    height: 30px;
    background: url(../images/hornInto.png) no-repeat;
}
.chatDivL .ChatTit{
    display: flex;
    align-items: center;
}
.chatDivL{
    margin-right: 50px;
}
.chatDivR{
    padding: 10px 55px 0px 0;
    margin-left: 50px;
}
.chatDivR .headImg{
    left: auto;
    right: 0;
    margin-right: 0;
}
.chatDivR .chatText{
    text-align: right;
}
.chatDivR .ChatTit span{
    background-color: #fcefea;
    border-top-left-radius: 25px;
    border-top-right-radius: 5px;
}

@media screen and (max-width: 1440px){
    .HairColor span.active{
        width: 2.2vw;
        height: 2.2vw;
    }
    .HairColor span.active{
        border-width: 0.5vw;
    }
    .buddyMain{
        height: 52vw;
        background-image: url(../images/imgDay2.png);
    }
    .DressUp{
        width: 40vw;
        height: 49vw;
        background-size: 100% auto;
        margin-right: 5vw;
    }
    .character{
        width: 41vw;
        height: 48vw;
        margin-top: 0vw;
        margin-left: 12vw;
    }
    .character canvas{
        width: 34vw !important;
        height:48vw !important;
    }
    .buddyMain .content{
        max-width: 100%;
    }
    .integral{
        top: 1vw;
        left: 2vw;
    }
    .integral::before{
        width: 6vw;
        height: 6vw;
        background-size: 80%;
    }
    .integral header{
        padding: 0.8vw 1.5vw 0.8vw 3vw;
        margin-left: -2vw;
        border-top-right-radius: 0.8vw;
        border-bottom-right-radius: 0.8vw;
    }
    .integral header span{
        font-size: 1.3vw;
    }
    .integral header div{
        font-size: 1.2vw;
        line-height: 1.8vw;
        margin-top: 0.3vw;
        border-radius: 0.5vw;
    }
    
    .DressUp > header{
        padding-top: 1.35vw;
    }
    .character > div::before{
        width: 39vw;
        height: 13vw;
        background-size: 100% auto;
        left: -3vw;
        bottom: -2.5vw;
    }
    .DressUp > header span{
        width: 11.2vw;
        height: 3.1vw;
        background-size: 100% !important;
        line-height: 3.1vw;
        font-size: 1.4vw;
        padding-top: 0.25vw;
    }
    .DressUp > header div.active span{
        width: 11.8vw;
    }
    .DressUpDiv ul,
    .DressUpDiv ul.hairUl{
        width: 29vw;
        margin-left: 5.35vw;
        height: 31.5vw;
        padding: 0.5vw 1vw;
    }

    .DressUpDiv > div > header{
        height: 3.5vw;
    }
    .preserveFooter{
        padding: 0;
        margin-top: 1.5vw;
    }
    .preserveFooter button{
        height: 4.2vw;
        font-size: 1.4vw;
        padding: 0 2vw 0 1vw;
        margin: 0 0.8vw;
        border-radius: 0.8vw;
    }
    .preserveFooter button::before{
        width: 3.8vw;
        height: 3.8vw;
        background-size: 100% !important;
    }
    .preserveFooter button b{
        margin-top: -0.1vw;
        line-height: 1vw;
        font-size: 1.2vw;
    }
    button.SaveButton{
        box-shadow: 0 0.2vw 0 #0f88a4;
    }
    button.NSaveButton{
        box-shadow: 0 0.2vw 0 #a32c2c;
    }
    ul.bodyUl li header,
    .HairColor,
    ul.hairUl li header {
        height: 3vw;
    }
    .HairColor span{
        width: 2vw;
        height: 2vw;
        margin: 0 0.8vw;
    }
    ul.bodyUl li, 
    ul.hairUl li,
    .DressUpDiv ul.glassesUl,
    .DressUpDiv ul.clothesUl,
    .DressUpDiv ul.trousersUl,
    .DressUpDiv ul.suitUl,
    .DressUpDiv ul.socksUl,
    .DressUpDiv ul.shoesUl{
        padding: 0.5vw 0 !important;
    }
    
    .DressUpDiv > div ul li{
        padding: 0;
    }
    .DressUpDiv > div > header span::before{
        width: 2.8vw;
        height: 2.8vw;
        background-size: 100% !important;
        background-position: center;
    }
    .DressUpDiv > div ul li footer {
        padding: 0;
        width: 96%;
        margin: 0 2%;
        max-height: 30.5vw;
    }
    .DressUpDiv > div ul.bodyUl li footer,
    .DressUpDiv > div ul.hairUl li footer{
        width: 102%;
        margin: 0 -1%;
        max-height: 27vw;
    }
    .DressUpDiv > div ul li footer div{
        margin: 0.5vw 1%;
        width: 31.333333%;
        border-radius: 0.8vw;
    }
    .DressUpDiv > div ul li footer div i{
        height: 2vw;
        font-size: 1.5vw;
        margin-top: 0.5vw;
    }
    .DressUpDiv > div ul li footer div i::before{
        width: 2vw;
        height: 2vw;
    }



}
@media screen and (max-width: 1199px){
    .buddyMainS{
        background-size: auto 100%;
        background-position: center left -12vw;
        height: 55vw;
    }
    .studentTX{
        top: 2vw;
        right: 2vw;
        margin-right: 0;
    }
    .StudnetTime{
        top: 19vw;
        margin-right: 0;
        right: 9.5vw;
        width: 17vw;
    }
    .StudnetTime h1{
        padding: 0;
        font-size: 2.8vw;
        line-height: 4vw;
    }
    .StudnetTime span{
        font-size: 1.5vw;
    }
    .buddyMainS .character canvas {
        width: 30vw !important;
        height: 40vw !important;
        margin-top: 8vw;
    }
    @keyframes example {
        0% {
            top: 9.5vw;
        }
        50% {
            top: 10vw;
        }
        100% {
            top: 9.5vw;
        }
    }
    .chatInto{
        width: 7vw;
        height: 6vw;
        background-size: auto 80%;
        top: 10vw;
    }
    .buddyMainS .character {
        width: 41vw;
        height: 48vw;
        margin-top: 0vw;
        margin-left: 5vw;
        left: 0;
    }
    .betaDiv{
        width: 11vw;
        height: 9vw;
        background-size: auto 100%;
        left: 0;
        margin-left: 30vw;
    }
    .studentTX header span{
        width: 8vw;
        height: 8vw;
        border-width: 0.5vw;
    }
}
@media screen and (max-width: 1000px){
    .integral::before {
        width: 7vw;
        height: 7vw;
    }
    .integral header {
        padding: 0.8vw 1.5vw 0.8vw 4vw;
        margin-left: -3vw;
    }
    .preserveFooter button{
        height: 4.5vw;
        padding: 0 1vw 0 0.2vw;
    }
    
    .DressUpDiv > div ul li footer div i{
        font-size: 1vw;
    }
}
@media screen and (orientation: landscape) {   
    /*横屏 css*/  
    /* @media screen and (max-width: 1024px){
        .buddyMain {
            height: 100vh;
        }
        .DressUp {
            width: 73vh;
            height: 90vh;
            background-size: auto 100%;
        }
        .DressUp > header {
            padding-top: 2.5vh;
        }
        .DressUp > header span{
            width: 20.2vh;
            height: 5.6vh;
            line-height: 5.6vh;
            font-size: 2.5vh;
            padding-top: 0.6vh;
        }
        .DressUp > header div.active span {
            width: 21.3vh;
        }
        .DressUpDiv > div > header {
            height: 7vh;
        }
        .DressUpDiv > div > header span::before{
            width: 5vh;
            height: 5vh;
        }
        .DressUpDiv ul, .DressUpDiv ul.hairUl {
            width: 52.5vh;
            margin: auto;
            height: 58vh;
        }
        ul.bodyUl li header, .HairColor, ul.hairUl li header {
            height: 6vh;
        }
        .HairColor span {
            width: 3.5vh;
            height: 3.5vh;
        }
        .HairColor span.active {
            width: 4vh;
            height: 4vh;
        }
        .DressUpDiv > div ul.bodyUl li footer, 
        .DressUpDiv > div ul.hairUl li footer {
            max-height: 48.5vh;
        }
        .DressUpDiv > div ul li footer {
            max-height: 56vh;
        }
        .DressUpDiv > div ul li footer div i {
            height: 4vh;
            font-size: 2.8vh;
            margin-top: 0.5vh;
        }
        .DressUpDiv > div ul li footer div i::before {
            width: 4vh;
            height: 4vh;
        }
        .preserveFooter {
            margin-top: 2vh
        }
        .preserveFooter button {
            height: 8vh;
            padding: 0 3vh 0 2vh;
            font-size: 2.5vh;
            margin: 0 1.5vh;
        }
        .preserveFooter button b {
            margin-top: -0.2vh;
            line-height: 2vh;
            font-size: 2vh;
        }
        .character {
            width: 70vh;
            height: 91vh;
            margin-left: 4vh;
        }
        .character canvas {
            width: 65vh !important;
            height: 91vh !important;
        }
        .character > div::before {
            width: 65vh;
            height: 18vw;
            left: -2vh;
            bottom: -5vh;
        }
    } */
}  
@media screen and (orientation:portrait){
    /* 竖屏 */
    /* @media screen and (max-width: 1199px){
        .character canvas {
            width: 27vh!important;
            height: 38vh !important;
        }
        .buddyMain .content{
            flex-wrap: wrap;
        }
        .bjColor{
            background-color: #b97d49;
        }
        .buddyMain{
            height: auto;
            background-size: auto 50vh;
            background-position: top;
        }
        .character{
            height: 48vh;
            width: 48vh;
            padding-right: 0;
            margin-top: 2vh;
        }
        .character > div{
            width: 100%;
        }
        .cabinet{
            padding: 0;
            width: 100%;
            height: 55vh;
            background: none;
            margin-top: -5vh;
        }
        .cabinetM{
            width: 100%;
        }
        .cabinetM > header{
            width: 100%;
            height: 9.5vh;
            background-color: #fff7d3;
            border-radius: 1vh;
            box-shadow: 0 0 3px rgba(0,0,0,0.2);
            padding: 0.8vh;
            position: relative;
            z-index: 1;
        }
        .cabinetM > header ul{
            background-color: #f8d47e;
            border-radius: 1vh;
            padding: 0 1.5vw;
        }
        .cabinetM > header ul li span{
            padding: 0;
            height: 8.1vw;
            width: 14vw;
            background-repeat: no-repeat;
            background-position: center;
            display: block;
            margin: 1vh auto;
            border-radius: 1vh;
            border: 1px solid rgba(0,0,0,0.1);
            background-size: auto 140% !important;
        }
        .cabinetM > header ul li.active span {
            background-size: auto 130% !important;
            height: 9vw;
            width: 15vw;
        }
        .cabinetM > header ul li {
            display: flex;
            align-items: center;
        }
        .cabinetNrL,
        .cabinetNrR{
            display: none;
        }
        .cabinetNr{
            background-color: #fff7d3;
            margin: -1px 2vw 0 2vw;
            height: 35vh;
            padding: 2vh;
        }
        .clothesUl,
        .cabinetNr ul{
            background-color: #fbdfb8;
            height: 32.5vh;
            overflow: auto;
            border-radius: 2vh;
        }
        .socksUl li, 
        .shoesUl li, 
        .glassesUl li, 
        .hairUl li{
            width: 33.333333%;
        }
        .sliderDiv span,
        .sliderDiv1{
            width: 60vw
        }
        .clothesUl li span{
            display: flex;
            justify-content: center;
        }
        .cabinetM > footer{
            margin: -1px 2vw 0 2vw;
            height: 10.7vh;
            background-color: #fff7d3;
        }
        .preservationDiv > div {
            justify-content: center;
        }
        .clothesUl li{
            width: 25%;
        }
        ul.bodyUl li header {
            margin-right: 1vw;
        }
        .hairUl li{
            overflow: hidden;
        }
        .hairUl li span{
            justify-content: center;
        }
        .hairUl li span img{
            width: 130%;
            max-width: none;
        }
        li.WG1 span{
            background-image: url(../images/navWGa_1s.png);
        }
        li.WG1.active span{
            background-image: url(../images/navWG_1s.png);
        }
        li.WG span{
            background-image: url(../images/navWGas.png);
        }
        li.WG.active span{
            background-image: url(../images/navWGs.png);
        }
        li.YF span{
            background-image: url(../images/navYas.png);
        }
        li.YF.active span{
            background-image: url(../images/navYs.png);
        }
        li.YJ span{
            background-image: url(../images/navYJas.png);
        }
        li.YJ.active span{
            background-image: url(../images/navYJs.png);
        }
        li.WZ span{
            background-image: url(../images/navWZas.png);
        }
        li.WZ.active span{
            background-image: url(../images/navWZs.png);
        }
        li.XZ span{
            background-image: url(../images/navXZas.png);
        }
        li.XZ.active span{
            background-image: url(../images/navXZs.png);
        }
        
    }
    @media screen and (max-width: 480px){
        
        .sliderDiv span,
        .sliderDiv1 {
            width: 55vw;
        }
        ul.bodyUl li:nth-child(1) div img{
            max-height: 12.5vw;
        }
        .cabinetM > header{
            height: 19vw;
        }
        .cabinetM > header ul li span{
            display: block;
            height: 10vw;
            width: 13vw;
            background-size: 170% auto !important;
        }
        .cabinetM > header ul li.active span{
            background-size: 150% auto !important;
            height: 12vw;
            width: 15vw;
        }
        .cabinetM > header ul li {
            display: flex;
            align-items: center;
        }
        .buddyMain {
            background-size: auto 40vh;
            background-position: right 45% top 0;
        }
        .character {
            height: 40vh;
            width: 40vh;
            padding-top: 0;
        }
        .cabinetM > header ul {
            padding: 0 1vh;
        }
        .cabinetNr {
            height: 42vh;
        }
        .clothesUl {
            height: 40vh;
        }
        .clothesUl li {
            width: 33.333333%;
        }
        .clothesUl li img{
            max-width: 90%;
        }
        .cabinet{
            margin-top: -7%;
            height: 62vh;
        }
        ul.bodyUl li {
            padding: 0.8vh 0;
        }
        .clothesUl, .cabinetNr ul {
            height: 39.5vh;
        }
        ul.bodyUl li header {
            height: 5.3vh;
            width: 13vh;
        }
        .hairUl li{
            height: 25vw;
        }
    } */
}