@import "header.css";
body { font-family: "Microsoft YaHei"; }
body, ul, li, p, a { margin: 0; padding: 0; list-style: none; font-family: Arial, Microsoft YaHei, sans-serif; }
::-webkit-scrollbar {
width:0;
}
a { text-decoration: none; color:#333; }
* { outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
img { vertical-align: middle; }
.ltop { position: fixed; top: 30%; left: 0; width: 200px; z-index: 100; display: flex; align-items: center; justify-content: center; transition: all 600ms; }
.ltop a img { width: 200px; }
.ltop .close { position: absolute; left: 5px; top: 5px; cursor: pointer; }
.ltop .close img { width: 20px; }
.rtop { position: fixed; top: 30%; right: 0; width: 120px; height: 120px; border-radius: 10px; background: rgba(0, 117, 195, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; transition: all 600ms; }
.rtop .close { position: absolute; right: 5px; top: 5px; cursor: pointer; }
.rtop .close img { width: 25px; }
.emergency { position: fixed; top: 50%; left: 50%; width: 300px; padding: 30px; border-radius: 10px; background: #0075C3; z-index: 100; box-shadow: 0 0 10px rgba(102, 102, 102, 0.5); transform: translate(-50%, -50%); display: none; animation: move 20s linear infinite; }
 @keyframes move {
 0% {
 top:0;
 left:0;
}
 25% {
 top:50%;
 left:40%;
}
 50% {
 top:0;
 left:80%;
}
 75% {
 top:50%;
 left:50%;
}
 100% {
 top:100%;
 left:-300px;
}
}
.emergency .title { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; color: white; font-size: 18px; text-align: center; }
.emergency .des { line-height: 1.8; margin-top: 10px; color: white; }
.vision_color { margin: auto; width: 400px; height: 40px; line-height: 20px; font-size: 12px; margin-top: 10px; }
.vision_color b { float: left; font-size: 14px; margin: 0px 10px; color: #777; }
.vision_color a { float: left; cursor: pointer }
.vision_color .font { margin-right: 8px; font-size: 12px }
.vision_color .colors { width: 10px; height: 15px; float: left; border: #fff 1px solid; margin-top: 4px; }
.vision_color .colors:hover { border: #999 1px solid; }
.vision_color .colors01 { background: #f1f2c6; }
.vision_color .colors02 { background: #efe1c4; }
.vision_color .colors03 { background: #f0dcd3; }
.vision_color .colors04 { background: #c4e86a; }
.vision_color .colors05 { background: #c5ecf3; }
.vision_color .colors06 { background: #d1c9ee; }
.vision_color .colors07 { background: #e6e7eb; }
.vision_color .colors08 { background: #ededea; }
.new_boount { width: 161px; height: 34px; background-color: #B50708; border-radius: 10px; position: absolute; right: 0px; top: 100%; z-index: 999; }
.new_boount span { text-align: center; display: block; height: 35px; line-height: 25px; color: #ffffff; font-size: 22px; padding-top: 5px; cursor: pointer; }
#changeSmall { display: none; }

@media screen and (max-width: 1200px) {
.ltop { width: 150px; }
.ltop a img { width: 150px; }
.rtop { width: 80px; height: 80px; }
.rtop a img { width: 50px; }
.emergency { width: 60%; padding: 20px 5%; }
 @keyframes move {
 0% {
 top:0;
 left:0;
}
 25% {
 top:50%;
 left:15%;
}
 50% {
 top:0;
 left:30%;
}
 75% {
 top:50%;
 left:15%;
}
 100% {
 top:100%;
 left:-300px;
}
}
}
