html, body, #app {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑","Helvetica Neue", Helvetica, Arial, sans-serif;
}
* {
font-family: "微软雅黑","Helvetica Neue",Helvetica,Arial,sans-serif;
user-select: none;
font-size: 0.83vw;
}
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
margin: 0;
padding: 0;
}
fieldset,
img,
input,
button,
textarea {
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul,
ol {
list-style: none;
}
input {
padding-top: 0;
padding-bottom: 0;
//font-family: "SimSun", "宋体";
}
select,
input {
vertical-align: middle;
}
select,
input,
textarea {
font-size: 12px;
margin: 0;
}
textarea {
resize: none;
}
/*防止拖动*/
img {
border: 0;
vertical-align: middle;
max-width: 100%
}
/* 去掉图片低测默认的3像素空白缝隙*/
table {
border-collapse: collapse;
}
body {
font: 12px/150% Arial, Verdana, "\5b8b\4f53";
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
/*IE/7/6*/
}
a {
color: #666;
text-decoration: none;
}
/* a:hover {
color: #f2ad00;
} */
h1,
h2,
h3,
h4,
h5,
h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
s,
i,
em {
font-style: normal;
text-decoration: none;
}
/* IE 浏览器 */
.scrollbar-body-y {
/*三角箭头的颜色*/
scrollbar-arrow-color: #0581ab;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0581ab;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0a393f;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0a393f;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color:#0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0581ab;
}
.scrollbar-body-y {
overflow: hidden;
overflow-y: auto;
}
.scrollbar-body-y::-webkit-scrollbar {
width: 0.36vw;
background-color: rgba(0,204,255,0.3);
}
.scrollbar-body-y::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 204, 255, 0.6);
background-color: rgba(0, 204, 255, 0.6);
border-radius: 0.18vw;
}
.scrollbar-body-x {
overflow: hidden;
overflow-x: auto;
}
.scrollbar-body-x::-webkit-scrollbar {
height: 0.36vw;
background-color: rgba(0,204,255,0.3);
}
.scrollbar-body-x::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 204, 255, 0.6);
background-color: rgba(0, 204, 255, 0.6);
border-radius: 0.18vw;
}
.swiper-container .swiper-pagination {
bottom: 0px !important;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet {
transition: opacity 0.3s;
width: 1.04vw;
height: 0.21vw;
background-color: #1f80da;
border-radius: 0.1vw;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
opacity: 1;
}
.is_hover {
cursor: pointer;
transition: opacity 0.3s;
}
.is_hover:hover {
opacity: 0.8;
}
.horse_run {
background-image: linear-gradient(90deg, rgba(0,204,255,0) 0%, #00ccff 100%), linear-gradient(0deg, #00ccff 0%, rgba(0,204,255,0) 100%), linear-gradient(-90deg, rgba(0,204,255,0) 0%, #00ccff 100%), linear-gradient(0deg, rgba(0,204,255,0) 0%, #00ccff 100%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
animation: moveLine 8s infinite linear;
height: calc(100% - 2px);
padding: 1px;
background-clip: content-box;
}
@keyframes moveLine {
0% {
background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;
}
5% {
background-position: 0px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px;
}
30% {
background-position: 100% 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px;
}
35% {
background-position: calc(100% + 100px) 1px, calc(100% - 1px) 0px, calc(100% + 100px) calc(100% - 1px), 1px -100px;
}
50% {
background-position: calc(100% + 100px) 1px, calc(100% - 1px) 100%, calc(100% + 100px) calc(100% - 1px), -100px -100px;
}
55% {
background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 100% calc(100% - 1px), -100px calc(100% + 100px);
}
80% {
background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 0px calc(100% - 1px), 1px calc(100% + 100px);
}
85% {
background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 100%;
}
100% {
background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 0px;
}
}
@keyframes fadenum{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@keyframes scale{
0%{transform:scale(1);opacity: 1;}
50%{transform:scale(0.9);
opacity: 0.8;}
100%{transform:scale(1);}
}