*{
    padding: 0;
    margin: 0;
}

body{
    background-color: white;
}

.sq-vr {
position: fixed;
right: 0%;
bottom: 20%;
z-index: 999;
/* width: 360px; */
/* height: 162px; */
/* background: url(../pc/images/vr2.png); */
/* background-size: cover; */
}

.sq-vr-img {
}

.sq-vr-img img {
width: 120px;
background-color: white;
}

.sq-vr-ms {
}

.sq-vr-ms p {
position: absolute;
top: 40%;
text-align: center;
width: 100%;
font-size: 22px;
color: #0000006b;
font-weight: bold;
}

.sq-vr-ms {
width: 102px;
height: 90px;
/* padding: 60px 0 0; */
margin: 0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 19%;
text-align: center;
background: url(/pc/images/circle2_03.png)no-repeat center;
background-size: 100% 100%;
cursor: pointer;
}

.sq-vr-ms::before {
position: absolute;
content: "";
width: 80px;
height: 80px;
background: url('../pc/images/circle1_03.png')no-repeat center;
background-size: 100% 100%;
left: 12px;
top: 10px;
animation: myfirst 10s linear infinite;
}
.sq-vr-ms:hover p{
   color: red;
}
.sq-vr-bg {
width: 100%;
width: 320px;
position: relative;
/* height: 150px; */
}

.sq-vr-bg::before {
content: "";
position: absolute;
width: 100%;
left: 0;
background-color: rgb(0 0 0 / 10%);
top: 0;
height: 100%;
}

.sq-vr-bg img {
width: 100%;
height: 100%;
}

.sq-vr-bg2 {
position: absolute;
width: 100%;
left: 0;
/* background-color: rgb(0 0 0 / 26%); */
top: 0;
height: 100%;
}

.close-vr-btn {
position: absolute;
top: 30px;
right: 30px;
z-index: 9;
display: block;
margin: -20px -20px 0 0;
width: 20px;
height: 20px;
cursor: pointer;
}

.close-vr-btn::after {
position: absolute;
top: 10px;
width: 20px;
height: 2px;
background-color: #fff;
content: '';
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

.close-vr-btn::before {
position: absolute;
top: 10px;
width: 20px;
height: 2px;
background-color: #fff;
content: '';
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}

@keyframes myfirst {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

@-webkit-keyframes myfirst {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

@media screen and (max-width:768px) {
    .sq-vr{
        display: none;
    }
}