/* 360view */ @charset "utf-8"; img { border: 0; vertical-align: top; max-width: 100%; height: auto; } *:focus {outline: none;} * { margin: 0; padding: 0; } html,body{ width: 100%; } body { margin: 0; padding: 0; height: 100%; background: #000; width: 100%; outline: none; overflow: hidden; } img { max-width: 100%; max-height: 100vh; } .view360{ height: 100vh; display: flex; align-items: center; margin: 0; padding: 0; justify-content: center; text-align: center; } .view360 img{ margin: 0; padding: 0; outline: none;} .view360content {position: relative; width: 100vw; display: block;  margin: 0; padding: 0;outline: none;} .view360content:hover{ cursor:grab!important; } .view360content:active{ cursor:grabbing!important; } .view360content .dragArea {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('./view360.png') no-repeat center rgba(0,0,0,0.4);background-size: 300px auto;-ms-user-select: none;-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;} @media screen and (max-width: 400px) { .view360content .dragArea { background-size: 75% auto;} } .view360content .dragArea{ opacity: 0; animation: anime  0.3s 1 forwards ease-out; z-index: 1; transition:0.3s;} @keyframes anime { 0% { opacity: 0; } 100% { opacity: 1;} } .view360content.mousedown .dragArea { animation: anime2  0.3s 1 forwards ease-out; } @keyframes anime2 { 0% { opacity: 1; } 100% { opacity: 0; } }