@charset "utf-8";
 a:link { text-decoration:none; color: #000;}
a:visited { text-decoration:none; color: #000;}
a:active { text-decoration:none; color: #000;}
a:hover { text-decoration:none; color: #000;} .viewer360 .screenWrap {
margin: 0 auto;
width: 100%;
height: 500px;
position: relative;
z-index: 1;
}
.viewer360 .screenWrap .prev,
.viewer360 .screenWrap .next {
top: 50%;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 20px;
position: absolute;
display: block;
text-align: center;
background: #fff;
border: #555 1px solid;
transform: translateY(-50%);
transition: all 0.5s ease;
opacity: 0.5;
z-index: 2;
}
.viewer360 .screenWrap .prev {
left: 20px;
}
.viewer360 .screenWrap .next {
right: 20px;
}
.viewer360 .screenWrap .prev:hover,
.viewer360 .screenWrap .next:hover {
opacity: 0.8;
}
.viewer360 .screenWrap .prev:after,
.viewer360 .screenWrap .next:after {
content: '';
top: 0;
left: 0;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 20px;
position: absolute;
display: block;
text-align: center;
transition: all 0.5s ease;
}
.viewer360 .screenWrap .prev:after {
content: '＜';
}
.viewer360 .screenWrap .next:after {
content: '＞';
}
.viewer360 #screen {
width: 100%;
height: 500px;
position: relative;
}
.viewer360 nav {
margin: 20px auto;
}
.viewer360 nav a {
margin: 0 10px;
width: 160px;
height: 80px;
line-height: 60px;
text-align: center;
display: inline-block;
overflow: hidden;
background-size: cover;
box-sizing: border-box;
transition: all 0.5s ease;
opacity: 0.5;
}
.viewer360 nav a:hover {
opacity: 1;
}
.viewer360 nav a.active {
opacity: 1;
}
.viewer360 nav a.view1 {background-image: url(/jQuery360Viewer/viewer1/img/thumb/thumb1.jpg);}
.viewer360 nav a.view2 {background-image: url(/jQuery360Viewer/viewer1/img/thumb/thumb2.jpg);}
.viewer360 nav a.view3 {background-image: url(/jQuery360Viewer/viewer1/img/thumb/thumb3.jpg);}
.viewer360 nav a.view4 {background-image: url(/jQuery360Viewer/viewer1/img/thumb/thumb4.jpg);}
@media only screen and (max-width: 768px) {
.viewer360 .screenWrap {
margin: 20px auto;
width: 280px;
height: 280px;
position: relative;
}
.viewer360 .screenWrap .prev,
.viewer360 .screenWrap .next {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 10px;
}
.viewer360 .screenWrap .prev {
left: -40px;
}
.viewer360 .screenWrap .next {
right: -40px;
}
.viewer360 .screenWrap .prev:after,
.viewer360 .screenWrap .next:after {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 10px;
}
.viewer360 #screen {
width: 280px;
height: 280px;
}
.viewer360 nav a {
margin: 0 5px;
width: 70px;
height: 35px;
}
}